One of the original tricks from the early days of web design is still around and going strong. Though there are many more ways to do it than there used to be, and some are more elegant than the example provided here, I will show you how to use a modified script that was spit out of Dreamweaver in an SEO friendly way.

Dreamweaver tends to place the javascript in the head and adds an 'onload' function to the body tag. For some people that might be OK, but I like to have my main tags free of clutter because I build my sites in a modular way. By taking the javascript out of the head and calling it externally, we make the page more user friendly for bots and humans (at least the human who codes the page). When you place the rollover images, you will need to insert two javascript functions in each link; onmouseover & onmouseout. Lets take a look at the pieces.

 

NOTE: spaces have been added around the '<' and '>' characters to have them display properly.
REMEMBER TO DELETE THESE SPACES.

 

The JavaScript

 

Copy and paste this into a new file and name it 'rollover.js' and place it in a spot where you would normally put a script that is going to be used several times. Personally, I have an 'includes' directory that contains a 'js' directory that holds all of my common JavaScripts. You'll use the path again when you call the script externally in a page head (within the < head > tags)

 

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i }
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
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 for(i=0;!x&&d.layers&&i if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

 

Now we need to call the script in the head of the page you want to use it with. Pu this in your page head"

 

< script language="JavaScript" src="/~saltrive/includes/js/rollover.js" type="text/javascript"> < /script >

 

Place The Images

 

Now you need to place the images. For this example we will be putting links on these images. You don't need to have actual links but you do need to use an 'anchor' to work with this script. For example, you could use < a name="My_Rollover" ....>< img src="/~saltrive/my_image.jpg" / >< /a >. We'll go ahead and show you how it's done with a link.

 

< a href="/~saltrive/contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact_Us','','images/contact_us-over.gif',1)" >< img src="/~saltrive/images/contact_us.gif" alt="Contact_Us" name="Contact_Us" width="150" height="25" border="0" / >< /a >

 

The link starts off like any ordinary link with the typical a href and destination page. After that it calls the two JavaScript functions I mentioned earlier to switch the image when rolled over and back again when the cursor leaves the images area. They call the MM_swapImage and MM_swapImageRestore functions defined in the script that was called as the page loaded. The biggest stumbling block when first working with this script is getting the name of the image ( name="Contact_Us" ) and the first variable in the MM_swapImage function (onmouseover="MM_swapImage('Contact_Us','',.....) to match. Notice the empty single quotes with the variable call. That is for the 'alt' tag for the rollover image. I typically forget to put anything in there since it's unnecessary and doesn't help SEO, but feel free to put something in there if you like.