The
Final Step -
The script to insert for Roll-over Buttons:
The following script is
what constitutes the three Roll-over Buttons above. You can NOT simply
Copy and Paste the following into your page, as the opening and closing
tags below < > are in ascii characters in the actual html. This is just
what it LOOKS like in your code.
I have included a link for a Windows Text file to download that you can Copy
and Paste directly into your html (Windows Notepad will let you do this, or
Wordpad), but you MUST change the following items:
For every reference to MY buttons (in blue), you
must type in the name of YOUR button (The above are named 3 different names,
even though they look like the same button). You will see that my directory
structure has a folder called: btns This is where I keep the images
for the page, separate from the .htm's as I find it much easier to change graphics
if I keep them separated, since I use many graphics and many .htm's.
You will have to change the URL for every Button (in red)
to point to YOUR URL.
Place the <script language= stuff at the end of your <head
stuff, after the metatags. Reasoning - most search engine
'bots stop at the script line, negating all your metatag work if you place the
script lines before them.
Click HERE to download the Text file in
.zip format with this script. Make sure you do NOT have WordWrap enabled,
as it will mess up the script.
(All this may look complicated. It sure does to me. That's why I use a good
webdesign program, it writes it for me as I design.)
<head>
<script language="JavaScript">
<!--
function swapImgRestore() { //v3.0
var i,x,a=document.sr; for{i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)
x.src=x.oSrc;
}
function preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.p) d.p=new
Array();
var i,j=d.p.length,a=preloadImages.arguments;
for(i=0; i <a.length; i++)
if (a[i].indexOf("#")!=0){
d.p[j]=new Image; d.p[j++].src=a[i];}}
}
function findObj(n, d) { //v3.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length)
{
d=parent.frames[n.substring(p+1)].document;
n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=findObj(n,d.layers[i].document);
return x;
}
function swapImage() { //v3.0
var i,j=0,x,a=swapImage.arguments; document.sr=new
Array; for(i=0;i<(a.length-2);i+=3)
if ((x=findObj(a[i]))!=null){document.sr[j++]=x;
if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" onLoad="preloadImages('btns/buttondn1.gif','btns/buttondn2.gif','btns/buttondn3.gif')">
<a href="buttons.htm" onMouseOut="swapImgRestore()"
onMouseOver="swapImage('Image1','','btns/buttondn1.gif',1)"><img
name="Image1" border="0" src="btns/buttonup1.gif"
width="50" height="20" alt="Beginning Page"></a>
<a href="button2.htm" onMouseOut="swapImgRestore()"
onMouseOver="swapImage('Image2','','btns/buttondn2.gif',1)"><img
name="Image2" border="0" src="btns/buttonup2.gif"
width="50" height="20" alt="Page Two"><a>
<a href="button3.htm" onMouseOut="swapImgRestore()"
onMouseOver="swapImage('Image3','','btns/buttondn3.gif',1)"><img
name="Image3" border="0" src="btns/buttonup3.gif"
width="50" height="20"></a>
</body>