Jump to content

…And Then A Miracle Occurs ==> Rollover Shortcut

Recommended Posts

I am an experienced programmer but new to web apps including Javascript. An instructor gave our class the code needed to create rollover button effects: In the PAGE HEADER:

<head>				  |				  |   <!-- Following script required for Navigation Bar -->   <script type="text/javascript">   <!--	   navImage0 = newImage();	   navImage1 = newImage();	   navImage2 = newImage();	   navImage3 = newImage();	   navImage4 = newImage();	   navImage5 = newImage();	   navImage6 = newImage();   //-->   </script>				  |				  |</head>


<body>				  |				  |	   <a href="../services.shtml" title="Go to: Services at Specific Computer Systems"			onmouseover="navImage1.src='../img/buttonServicesOver.png';"			onmouseout="navImage1.src='../img/buttonServicesNormal.png';"			onclick="navImage1.src='../img/buttonServicesDown.png';"			onmousedown="navImage1.src='../img/buttonServicesDown.png';"			onmouseup="navImage1.src='../img/buttonServicesOver.png';" > 		   <img id="navImage1" src="../img/buttonServicesNormal.png" alt="Button: Go to					Services Page">		   </img>	   </a>				  |				  |</body>

That is ALL of it! This Code Works but I don’t understand why. This became an issue because this code causes an “Object expected” error at the first character of “navImage0 = …” in the header. This error does NOT appear to have any affect on the function of the page including the rollovers. This error appears to occurs only in IE. In trying to diagnose this error I discovered several different (but similar) methods for implementing rollovers. I understand them fine, but they exposed just how much seams to be missing from the solution demonstrated by our instructor. The function “newImage” is NOT defined in any place that I can find. Please can someone tell me why/how does this simple solution work? ThanksRoss

Edited by rdwise
Link to post
Share on other sites

That code is only going to work in Internet Explorer, because only Internet Explorer assigns IDs to global variables. The "newImage()" lines aren't really necessary at all.To make it work in more browsers you need to change the code. This code:onmouseup="navImage1.src='../img/buttonServicesOver.png';" >Should look like this:onmouseup="document.getElementById('navImage1').src='../img/buttonServicesOver.png';" > Overall, this pile of code is big and unnecessary. It's actually very bulky and requires Javascript to be enabled. The modern efficient way is to use CSS sprites. I could understand old developers using this code, but I certainly wouldn't advocate teaching it at schools.

  • Like 1
Link to post
Share on other sites

Ingolme, Thank you for your prompt reply. I'm sorry this thank you took so long. This problem was maddening, though I was begining to suggect it was dependant on some undocumented browser feature. I have been studing the CSS sprites and am working on converting my current projects over. I did want to note that this code does work in firefox, and it does so without causing an "object expected" error. IE and Firefox are the onle browsers I have tested it in. Thanks again.Ross

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...