SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Mar 2004
    Location
    Dallas, Tx
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    rollovers plus onclick image swaps

    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>

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by OffLead View Post
    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.
    The code at the link below provides locking rollover buttons. Set up your image links just to display the larger image [no rollovers], then run this code afterwards. It will set up three-state rollovers on the same links, without overwriting the existing handlers.

    http://www.hotspot.freeserve.co.uk/s...tive?smartroll
    Tab-indentation is a crime against humanity.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •