twilitegxa Posted November 6, 2010 Share Posted 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? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.