rollover script

silentkarma · 12-31-2005, 10:23 AM

I am makin my own website, but when I entered rollover script for my menu buttons, it doesn't work and gives me an error think on the bottom. What did I do wrong?

Code:

<!DOCTYPE HTML SYSTEM>
<html>
<head>
<title>XPLogic</title>
  <script language="JavaScript" type="text/javascript">

function doRollover(imageID, imageSource)  {

document.getElementById(imageID).src = imageSource.png;

}

</script>

<body bgcolor="#858585" style="margin-left: 50%; margin-top: 0%; margin-bottom: 0%; 
margin-right: 50%;">

<div id="container" style="position: relative; width: 728px; left: -364px;">

<div id="logo" style="position: absolute; width: 728px; height: 90px; top: 0px; left: 0px;">
<img src="images/bannerad2.png">
</div>

<div id="nav" style="position: absolute; width: 150px; height: 500px; top: 90px; left: 0px; 

background-image: url(images/navbck.png); background-repeat: no-repeat; border-width: 2px;  

border-style: dashed; border-color: #33CC33;">
  <img id="images/buttonhome.png"; src="images/buttonhome.png"; width="150px"; height="41px"; 

onMouseOver="doRollover ('button2', 'images/buttonhome2.png');" onMouseOut="doRollover 

('button', 'images/buttonhome.png');"> 
</div>

<div id="content" style="position: absolute; width: 578px; height: 500px; top: 90px; left: 

150px; background-image: url(images/contentbck.png); background-repeat: no-repeat; border-

width: 2px; border-style: dashed; border-color: #33CC33;">
</div>

<div id="footer" style="position: absolute; width: 728px; height: 20px; top: 590px; 

background-image: url(images/footerbck.png); background-repeat: no-repeat; valign="top">
</div>
</body>
</head>
</html>

bdemonbr · 01-03-2006, 12:01 PM

I wouldn't be able to help you debug your JS but you can take a look at the script I'm using here :

There's three elements:

1) in the head:

<script language="JavaScript" type="text/JavaScript">

</script>

2) preload the images in the body tag:

< body bgcolor="#333333" text="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF" onLoad="MM_preloadImages('images/rollovers/homeover.gif')">

3) and the placement of the images:

< a href="home.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/rollovers/homeover.gif',1)"><img src="images/rollovers/homeup.gif" alt="home" name="Image4" width="54" height="30" border="0"></a>

I had Dreamweaver automate all this, but hopefully it will help - I especially like the preloading as it keeps there from being a lag time when someone "rolls over" the image.

01-03-2006, 12:01 PM	#2 (permalink)
bdemonbr Registered User Join Date: Jun 2005 Location: Maracaibo, Zulia, Venezuela Posts: 66 OS: WinXP Pro / OS 10.4 / Fedora 9	I wouldn't be able to help you debug your JS but you can take a look at the script I'm using here : There's three elements: 1) in the head: <script language="JavaScript" 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];} } //--> </script> 2) preload the images in the body tag: < body bgcolor="#333333" text="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF" onLoad="MM_preloadImages('images/rollovers/homeover.gif')"> 3) and the placement of the images: < a href="home.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/rollovers/homeover.gif',1)"><img src="images/rollovers/homeup.gif" alt="home" name="Image4" width="54" height="30" border="0"></a> I had Dreamweaver automate all this, but hopefully it will help - I especially like the preloading as it keeps there from being a lag time when someone "rolls over" the image.