Rotating Banner Image Rollover Question

twilitegxa · November 6, 2010

I have a rotating advertisement banner I'm trying to get going. I have it rotating like i want it to, but now I want to add in some rollover effects and then the hyperlinks that the images go to. Here is what I have so far:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/JavaScript">
<!--
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<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}


function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}


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<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  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];}
}


// Comma separated list of images to rotate 
var imgs = new Array('images/banner1.jpg','images/banner2.jpg');
// delay in milliseconds between image swaps 1000 = 1 second 
var delay =5000;
var counter = 0;


function preloadImgs(){
for(var i=0;i<imgs.length;i++){
	MM_preloadImages(imgs[i]);
}
}


function randomImages(){
if(counter == (imgs.length)){
	counter = 0;
}
MM_swapImage('rotator', '', imgs[counter++]);
setTimeout('randomImages()', delay);
}


//-->
</script>
</head>


<body onload="preloadImgs();randomImages()">
<img src="images/banner1.jpg" name="rotator" width="600" height="100" id="rotator" />
</body>
</html>

Can anyone help me by telling me how I go about adding the rollover? Can I do it the same way I would with regular css? What about the hyperlinks if the images point to different pages?

Sign In

Rotating Banner Image Rollover Question

Recommended Posts

twilitegxa

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information