rdwise Posted October 5, 2011 Report Share Posted October 5, 2011 (edited) 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> On the IMAGE/LINK: <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 October 5, 2011 by rdwise Link to comment Share on other sites More sharing options...
JamesB Posted October 6, 2011 Report Share Posted October 6, 2011 i have no idea how the rollovers would work with that code, but the error is caused because there should be a space between new and Image for the 7 lines. navImage0 = new Image(); Link to comment Share on other sites More sharing options...
Ingolme Posted October 6, 2011 Report Share Posted October 6, 2011 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. 1 Link to comment Share on other sites More sharing options...
rdwise Posted October 12, 2011 Author Report Share Posted October 12, 2011 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 comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now