Don E Posted October 13, 2011 Share Posted October 13, 2011 With the following code below, which one is considered more better to do of what it's suppose to do?(roll over effect) In other words, which is recommended. They basically do the same thing. HTML: <!doctype html><html><head><title>Rollover</title><script type="text/javascript" src="script.js"></script></head><body><a href="next1.html"><img src="images/button1_off.gif" width="113" height="33" alt="button1" id="button1" /></a><a href="next2.html"><img src="images/button2_off.gif" width="113" height="33" alt="button2" id="button2" /></a><a href="next3.html"><img src="images/button3_off.gif" width="113" height="33" alt="button3" id="button3" /></a></body></html> JavaScript 1: window.onload = rolloverInit;function rolloverInit() {for (var i=0; i<document.images.length; i++) { if (document.images[i].parentNode.tagName == "A") { setupRollover(document.images[i]); }}}function setupRollover(thisImage) {thisImage.outImage = new Image();thisImage.outImage.src = thisImage.src;thisImage.onmouseout = rollOut;thisImage.overImage = new Image();thisImage.overImage.src = "images/" + thisImage.id + "_on.gif";thisImage.onmouseover = rollOver;}function rollOut() {this.src = this.outImage.src;}function rollOver() {this.src = this.overImage.src;} JavaScript 2: window.onload = rolloverInit;function rolloverInit() {for (var i=0; i<document.images.length; i++) { if (document.images[i].parentNode.tagName == "A") { setupRollover(document.images[i]); }}}function setupRollover(Image) {Image.onmouseout = rollOut;Image.onmouseover = rollOver;}function rollOut() {this.src = "images/" + this.id + "_off.gif";}function rollOver() {this.src = "images/" + this.id + "_on.gif";} Input/suggestions are greatly appreciated. Thanks. Link to comment Share on other sites More sharing options...
thescientist Posted October 13, 2011 Share Posted October 13, 2011 for rollovers I would probably just use CSS/Sprites. Link to comment Share on other sites More sharing options...
Don E Posted October 15, 2011 Author Share Posted October 15, 2011 Probably would be a good idea. I was just wondering because I got the above from a video and the author does it the way it is in JavaScript1, but then I figured to myself that it can be written another way and came up with JavaScript2. They basically do the same thing but I wondered why the author may have chose to do it in the way they did.(JavaScript1) From the looks of it, they may have chose to do it the way they did because of 'preloading' the images? I'm not sure. But if so, I wonder if it really makes a difference(between the two JS code above) and which is more efficient/recommended. I learned that preloading images are a good idea because it helps with how fast the page loads? Anyway, thanks to those who supply their input. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.