SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Evangelist jazztie's Avatar
    Join Date
    Mar 2001
    Location
    the Netherlands
    Posts
    519
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    rollover images, but not always...?

    I have the following script:

    Code:
    <head><script language='JavaScript'>
    foto  = new Image();
    foto.src = "images/menu_dark.jpg";
    </script>
    </head>
    <body>
    <img name="foto" onMouseOver="foto.src='images/menu_light.jpg';"
    onMouseOut="foto.src='images/menu_dark.jpg';" src="images/menu_dark.jpg" border=0>
    </body>
    Fairly straight forward... However, what I (also) want is an onClick-event afterwhich the onMouseOut-event is ignored. I have tried onClick="foto.src='images/menu_clicked.jpg';"... But (of course) when I move the mouse off the images, the onMouseOut-event is called.

    In other words: I do want the onMouseOut event, as long as the image is not clicked... but the event should be ignored if the images is clicked. Can anyone help me with this problem? Any help is appreciated!

    Jazz

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So you want the image, once clicked, to be 'latched' and ignore all rollovers? The easiest way I've found to do this is to set a flag on the Image object itself, indicating whether it's attained this state:
    Code:
    <img name="foto" style="cursor:pointer;" 
    onmouseover="if(!this.latched)this.src='images/menu_light.jpg'"
    onmouseout="if(!this.latched)this.src='images/menu_dark.jpg'" 
    onclick="this.latched=true;this.src='images/menu_clicked.jpg'" 
    src="images/menu_dark.jpg" border="0">
    Within an element's event handler's, the this keyword references the element object itself; no need to use 'external' references. If you want to be able to 'toggle' the latching, try:
    Code:
    onclick="this.latched=!this.latched;this.src=(this.latched)?'images/menu_clicked.jpg':'images/menu_dark.jpg'"
    Don't forget to preload the 3rd image...
    ::: certified wild guess :::

  3. #3
    SitePoint Evangelist jazztie's Avatar
    Join Date
    Mar 2001
    Location
    the Netherlands
    Posts
    519
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What if I have more than one picture that has to be changed?

    The code above does work if I only have one picture. What if I want to check the state of all the other pictures?

    For example:
    image_1 has been changed from menu_light.jpg to menu_dark.jpg before.
    Now, I click on image_2 >>
    image_1 should change back to menu_light.jpg AND
    image_2 should change to menu_dark.jpg

    Or in any other order.

    How do I go about getting this done?

    Any help is appreciated!
    Jazz

  4. #4
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Uh-oh...radio-button-graphic-thingy-alert.

    Done a bunch of these,so...if you'll upload a sample graphic or three (accompanying HTML optional) and include comments on anything else you'd like to happen I'll give it a whack, unless someone else whacks it first.
    ::: certified wild guess :::

  5. #5
    SitePoint Evangelist jazztie's Avatar
    Join Date
    Mar 2001
    Location
    the Netherlands
    Posts
    519
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What I have at the moment is:
    Code:
     
    <td><img src="images/news.jpg" onClick="this.latched=!this.latched;this.src=(this.latched)?'images/news.jpg':'images/news_light.jpg';" 
    onMouseover="if(!this.latched)this.src='news_light.jpg'"
    onMouseout="if(!this.latched)this.src='images/news.jpg'" 
    border='0' name='header1'></a></td>
     
    <td><img src="images/sponsor.jpg" onClick="this.latched=!this.latched;this.src=(this.latched)?'images/sponsor.jpg':'images/sponsor_light.jpg';" 
    onMouseover="if(!this.latched)this.src='sponsor_light.jpg'"
     
    onMouseout="if(!this.latched)this.src='images/sponsor.jpg'" 
    border='0' name='header1'></a></td>
     
    <td><img src="images/contact.jpg" onClick="this.latched=!this.latched;this.src=(this.latched)?'images/contact.jpg':'images/contact_light.jpg';" 
    onMouseover="if(!this.latched)this.src='contact_light.jpg'"
     
    onMouseout="if(!this.latched)this.src='images/contact.jpg'" 
    border='0' name='header1'></a></td>
    So, as you can see. All these things work individually. But not combined. Is there an easy way to check the state of the other images? (and change them accordingly to the normal status (being: not _light.jpg)

  6. #6
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you missed my point. Takes more than a snippet of code to accomplish that, since you're now coordinating the states of several images in one routine. I'll be glad to show you an example, but I'd need the actual images you're using (just a few) to test it.
    ::: certified wild guess :::

  7. #7
    SitePoint Evangelist jazztie's Avatar
    Join Date
    Mar 2001
    Location
    the Netherlands
    Posts
    519
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    normal state: mouseover/clicked state:

    normal state: mouseover/clicked state:

    normal state: mouseover/clicked state:

    Hope this helps.
    Jazz

  8. #8
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    <script type="text/javascript">
    
    // image preload //////////////////////
    
    preload('header_nieuws_licht.jpg' , 'header_contact_licht.jpg' , 'menu_donker.jpg');
    
    function preload()
    {
    	preload.arr = [];
    	for (var a = 0; a <arguments.length; ++a)
    	{
    		preload.arr[a] = new Image;
    		preload.arr[a].src = arguments[a];
    	}
    }
    
    ///////////////////////////////////////
    
    function toggleAll(oImage)
    {
    	oImage.locked = !oImage.locked;
    	var img, i = 0, toggle_imgs = ['header1' , 'header2' , 'header3'];
    	for (i; i < toggle_imgs.length; ++i)
    	{
    		img = document.images[toggle_imgs[i]];
    		if (img != oImage && typeof img.origsrc != 'undefined')
    		{
    			img.src = img.origsrc;
    			img.locked = false;
    		}
    	}
    }
    
    </script>
    </head>
    <body>
    <table style="margin:20px auto;">
    <tr>
    <td width="100"><a href="#null"><img name="header1" 
    onload="if(!this.origsrc)this.origsrc=this.src" 
    onmouseover="this.src='header_nieuws_licht.jpg'" 
    onmouseout="if(!this.locked)this.src='header_nieuws.jpg'" 
    onclick="toggleAll(this)" 
    width="82" height="20" border="0" src="header_nieuws.jpg"></a></td>
     
    <td width="100"><a href="#null"><img name="header2" 
    onload="if(!this.origsrc)this.origsrc=this.src" 
    onmouseover="this.src='header_contact_licht.jpg'" 
    onmouseout="if(!this.locked)this.src='header_contact.jpg'" 
    onclick="toggleAll(this)" 
    width="82" height="20" border="0" src="header_contact.jpg"></a></td>
     
    <td width="100"><a href="#null"><img name="header3" 
    onload="if(!this.origsrc)this.origsrc=this.src" 
    onmouseover="this.src='menu_donker.jpg'" 
    onmouseout="if(!this.locked)this.src='menu_licht.jpg'" 
    onclick="toggleAll(this)" 
    width="16" height="16" border="0" src="menu_licht.jpg"></a></td>
    
    </tr>
    </table>
    </body>
    </html>
    You originally had 3 buttons (a 'clicked' one as well). Pretty easy to work in if that's the case.
    Last edited by adios; Feb 4, 2004 at 09:49.
    ::: certified wild guess :::

  9. #9
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very cool, adios

  10. #10
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    T
    _h
    __a
    ___n
    ____k
    _____s

    ______M
    _______i
    ________k
    _________e

    ____________!


    --------------------->
    ::: certified wild guess :::

  11. #11
    SitePoint Evangelist jazztie's Avatar
    Join Date
    Mar 2001
    Location
    the Netherlands
    Posts
    519
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanx alot Adios,
    it works perfectly!

    Jazz


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
  •