SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast Pure L's Avatar
    Join Date
    Oct 2007
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    rollover here swap image there?

    Hi.

    I have this 100% working script which basically just changes an image into it's white version upon mouseover:

    Code:
    <script type="text/javascript">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 = "cssImages/" + thisImage.id + "_white.gif";
    	thisImage.onmouseover = rollOver;
    	}
    	
    	
    	
    	function rollOver() 
    	{
    	this.src = this.overImage.src;
    	}
    	
    	function rollOut() 
    	{
    	this.src = this.outImage.src;
    	}
    	  
    	
    	</script>
    It works great. However..........

    What I'd like to do, is to have another image (not one previously involved in the script) to change to yet another image depending on what image turned white.

    So, say the "news" gif was switched to news_white.gif upon mouseover (which is already happening flawlessly), then this other image (id=mainIndexPic) would change to mainIndexPic_news.gif, or mainIndexPic_pics.gif, etc., depending on which image(or link) turned white.



    In my head, it seems like something like this should work:

    Code:
    <script>
    
        
    do
    {
    document.getElementById("mainIndexPic") + "_news.gif" || document.getElementById("mainIndexPic") + "_pics.gif"
    etc.
    }
    
     while (document.getElementById("news_logo") == news_logo_white.gif || document.getElementById("pics_logo") == pics_logo_white.gif
          etc.;)
          
    </script>
    My head, however, is not worth trusting (as of late) so if anybody could lend me a hand I'd be much obliged. Thanks.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    I've done a couple of tutorials on rollovers before, so this is one that I'll come back to later on tonight after work.

    There are much easier ways of doing rollovers now that allow you to expand them in many useful directions.

  3. #3
    SitePoint Enthusiast Pure L's Avatar
    Join Date
    Oct 2007
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    I've done a couple of tutorials on rollovers before, so this is one that I'll come back to later on tonight after work.

    There are much easier ways of doing rollovers now that allow you to expand them in many useful directions.
    Thanks, pmw.

    It would be great if I could just add something on to the existing script if at all possible.

    (Don't know if that's possible or not at this point, however).

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    When you mouse over an image, you want it to do two rollover events. One for the image itself and another for some other image.

    The onmouseover event is tied to the rollOver() function.

    Code JavaScript:
    thisImage.onmouseover = rollOver;
    . . .
    function rollOver() {
      this.src = this.overImage.src;
    }

    You are wanting news to change mainIndexPic.gif to mainIndexPic_news.gif, and likewise for other sections, but you don't want to change the code too much. Okay, I can go with that. You'll just have to add a setup for mainIndexPic and extend rollOver() and rollOut() functions to change it.

    With the existing script, the setupRollover() function is called once for every linked image, and with each call it sets up the default image, and the white image. When it does this we also want it to set up the mainIndexPic with a an overNews image, and an overPics image, or whatever the appropriate images are.

    The default and white images use thisImage to setup their images, so how do we access the mainIndexPic image? The thisImage object comes from document.images[i]. That's accessing the image with an index number, but you can also access them with their id name.

    Code JavaScript:
    var mainIndexPic = document.images['mainIndexPic'];

    It is possible to have different out images for mainIndexPic called outNews and outPics, but here they are all going to be the same, so a consistant name of outImage is being used for it.

    Code JavaScript:
    mainIndexPic.outImage = new Image();
    mainIndexPic.outImage.src = 'cssImages/mainIndexPic.gif';

    Now we just want to do the news part when the outNews button is being setup.

    Code JavaScript:
    if (thisImage.id == 'news') {
      mainIndexPic.overNews = new Image();
      mainIndexPic.overNews.src = "cssImages/" + thisImage.id + "_news.gif';
    }

    You could repeat this for every type of image, but that would be tedious. Computers are good at tedious tasks, let's be lazy and make the computer work instead, and use thisImage.id for the news or pics name.

    Using mainIndexPic.overNews is the same as using mainIndexPic['overNews'] so you can replace overNews with the more generic over + thisImage.id

    So the final code for setting up mainIndexPic is

    Code JavaScript:
    var mainIndexPic = document.images['mainIndexPic'];
    var imageType = 'over' + thisImage.id;
    mainIndexPic.outImage = new Image();
    mainIndexPic.outImage.src = 'cssImages/mainIndexPic.gif';
    mainIndexPic[imageType] = new Image();
    mainIndexPic[imageType].src = 'cssImages/mainIndexPic_' + thisImage.id + '.gif';

    While the outImage object will get recreated each time this runs for each rollover button, this won't cause any trouble and is an acceptable situation while staying with the existing code structure.

    Once the page has finished loading, the mainIndexPic will contain several images waiting to be used, called overNews and overPics

    Now we just have to somehow use them.

    The images are currently changed with the following functions.

    Code JavaScript:
    function rollOver() {
      this.src = this.overImage.src;
    }
    function rollOut() {
      this.src = this.outImage.src;
    }

    It shouldn't be too hard to add the mainIndexPic.src as well. We're just going to need to get the location of mainIndexPic and the appropriate imageType from the button.

    Code JavaScript:
    function rollOver() {
      this.src = this.overImage.src;
      var mainIndexPic = document.images['mainIndexPic'];
      var imageType = 'over' + this.id;
      mainIndexPic.src = mainIndexPic[imageType].src
    }
    function rollOut() {
      this.src = this.outImage.src;
      var mainIndexPic = document.images['mainIndexPic'];
      mainIndexPic.src = mainIndexPic.outImage.src
    }

    And that should be all you need.

  5. #5
    SitePoint Enthusiast Pure L's Avatar
    Join Date
    Oct 2007
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, PMW!!

    Now I'm at work and will get to this once I'm home.

    I really appreciate your time in looking at this.

    Thanks again!!


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
  •