I am not very well versed in js, but am attempting to figure this out. (Gotta start somewhere, right?) I want this to be unobtrusive js, if possible with no js specifics in the html (though additional or changes to classes/IDs would be fine). I've started with PPK's mouseover script, which is working just fine. To this, I want to add some onclick behaviors.
Here's the page: http://www.offlead.com/stuff/jstest/
Mouseover the thumbnails on the left, and the "on" state appears for the thumbnails. So far so good. What I need to add is onclick behaviors. Click on a thumbnail, and I need the thumbnail to switch to the on state and stay that way, and for two images to load up on the right side. Click on another thumbnail, and the first reverts back to an off state while the new one turns on, and its corresponding larger images load up. Rollovers should continue to work on all "off" state thumbs throughout all of this.
Here is the js and html. I've removed the CSS from the code since it isn't pertinent to this.
Code:<!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>javascript test</title> <script language="JavaScript" type="text/javascript"> <!-- var W3CDOM = (document.createElement && document.getElementsByTagName); var mouseOvers = new Array(); var mouseOuts = new Array(); window.onload = init; function init() { if (!W3CDOM) return; var nav = document.getElementById('thumbnails'); var imgs = nav.getElementsByTagName('img'); for (var i=0;i<imgs.length;i++) { imgs[i].onmouseover = mouseGoesOver; imgs[i].onmouseout = mouseGoesOut; var suffix = imgs[i].src.substring(imgs[i].src.lastIndexOf('.')); mouseOuts[i] = new Image(); mouseOuts[i].src = imgs[i].src; mouseOvers[i] = new Image(); mouseOvers[i].src = imgs[i].src.substring(0,imgs[i].src.lastIndexOf('.')) + "_on" + suffix; imgs[i].number = i; } } function mouseGoesOver() { this.src = mouseOvers[this.number].src; } function mouseGoesOut() { this.src = mouseOuts[this.number].src; } --> </script> </head> <body> <div id="content"> <ul id="thumbnails"> <li><a href="/stuff/jstest/images/img_001b.jpg"><img src="images/thumb_001.jpg" alt="img 001" width="52" height="52" border="0" /></a></li> <li><img src="images/thumb_002.jpg" alt="img 002" width="52" height="52" /></li> <li><img src="images/thumb_003.jpg" alt="img 003" width="52" height="52" /></li> <li><img src="images/thumb_004.jpg" alt="img 004" width="52" height="52" /></li> </ul> <div id="display"><img src="images/img_001a.jpg" alt="img 001" width="130" height="223" id="display-a" /><img src="images/img_001b.jpg" alt="img 001" width="300" height="223" id="display-b" /></div> </div> </body> </html>
Originally Posted by OffLead
Bookmarks