Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    onclick controlling onmouseout

    I am trying to build a Menu that will have a mouseover effect and when clicked will hold the mouseover image on mouseout. The problem I'm having is that when another menu item is clicked it will not reset the original button's mouseout and if the mouse ever touches it again it will, again, hold the mouseout image.

    I am aware that It would be easier to just use different pages, but I am wanting to eventually have hidden containers with further menu options drop down from the menu(sorry long winded, just trying to explain why it needs to hold the image within the same page).

    here is the function that I have built so far(it doesn't work and I know there are some obvious problems with it, I'm mainly just trying to convey the logic I have used thus far).

    I am a new javascripter, and my experience is mainly with C#.

    I am trying to use document.(objectname).src as if it were a variable because It should have a value to return. I'm trying to store the mouseover image in var i, reset all the buttons, and then put i(should be the mouseover image)back in the (objectname).src. This probably isn't allowed in javascript, but I left it so you can see how my mind is trying to accomplish this task.

    Here you go:

    Code:
    function ClearMenu(xx)
    {
    	var i
    	i = xx.src
    	
    	document.news.src='news.jpg'
    	document.events.src='events.jpg'
    	document.press.src='press.jpg'
    	document.aboutus.src='about.jpg'
    	document.contact.src='contact.jpg'
    	document.join.src='join.jpg'
    	
    	document.news.onmouseout="document.news.src='news.jpg'"
    	document.events.onmouseout="document.events.src='events.jpg'"
    	document.press.onmouseout="document.press.src='press.jpg'"
    	document.aboutus.onmouseout="document.aboutus.src='about.jpg'"
    	document.contact.onmouseout="document.contact.src='contact.jpg'"
    	document.join.onmouseout="document.join.src='join.jpg'"
    
    	xx.src = i
    	xx.onmouseout = i
    }
    My attempt to Call this function would look like this:
    Code:
    <img src="news.jpg" name="news" id="news" onmouseover="newshov.jpg" onmouseout="news.jpg" onclick="ClearMenu(news)"
    thank you for any help you can give.

  • #2
    Banned
    Join Date
    Feb 2009
    Posts
    36
    Thanks
    0
    Thanked 7 Times in 7 Posts
    --- posted in error
    Last edited by Henley; 03-05-2009 at 10:04 PM.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,466
    Thanks
    3
    Thanked 495 Times in 482 Posts
    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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .UL LI {
      width:100px;background-Color:#CCFFFF;float:left;margin-Left:5px;
    }
    
    /*]]>*/
    </style>
    
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    function Swap(id,img){
     var obj=document.getElementById(id);
     if (!obj.save) obj.save=obj.src;
     obj.src=img;
    }
    
    function ImgReset(){
     var args=ImgReset.arguments;
     for (var obj,z0=0;z0<args.length;z0++){
      obj=document.getElementById(args[z0]);
      if (obj&&obj.save) obj.src=obj.save;
     }
    
    }
    /*]]>*/
    </script>
    </head>
    
    <body>
    <ul class="UL" >
      <li onmouseover="Swap('img1','http://www.vicsjavascripts.org.uk/StdImages/Four.gif');" >Tom</li>
      <li onmouseover="Swap('img2','http://www.vicsjavascripts.org.uk/StdImages/Two.gif');">Dick</li>
      <li onmouseover="Swap('img3','http://www.vicsjavascripts.org.uk/StdImages/Three.gif');">Harry</li>
    </ul>
    <br />
    <img id="img1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="Img" width="100" height="100" />
    <img id="img2" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="Img" width="100" height="100" />
    <img id="img3" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="Img" width="100" height="100" />
    <br />
    <input type="button" name="b" value="Reset" onclick="ImgReset('img1','img2','img3');" />
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    wowitsjonjon (03-06-2009)

  • #4
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I appreciate the script, It is a cleaner way to do what I've done so far, by manually reseting each obj.src's. But I still can't seem to make the mouseover image stay put when clicked, I would also need to reset the other button's mouseovers so if they had been clicked previously they would not stick on the mouseover image. These are the edit's i've made so far and logically I think it should work but it's not. When I added the 3 imgstick functions the whole thing broke.

    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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .UL LI {
      width:100px;background-Color:#CCFFFF;float:left;margin-Left:5px;
    }
    
    /*]]>*/
    </style>
    
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    function Swap(id,img){
     var obj=document.getElementById(id);
     if (!obj.save) obj.save=obj.src;
     obj.src=img;
    }
    
    function ImgReset(){
     var args=ImgReset.arguments;
     for (var obj,z0=0;z0<args.length;z0++){
      obj=document.getElementById(args[z0]);
      if (obj&&obj.save) obj.src=obj.save;
     }
    
    function OneStick(){
     document.img1.onmouseout="Swap('img1','http://www.vicsjavascripts.org.uk/StdImages/Four.gif');"
     document.img2.onmouseout="Swap('img2','http://www.vicsjavascripts.org.uk/StdImages/One.gif');"
     document.img3.onmouseout="Swap('img3','http://www.vicsjavascripts.org.uk/StdImages/One.gif');"
    }
    
    function TwoStick(){
     document.img1.onmouseout="Swap('img1','http://www.vicsjavascripts.org.uk/StdImages/One.gif');"
     document.img2.onmouseout="Swap('img2','http://www.vicsjavascripts.org.uk/StdImages/Two.gif');"
     document.img3.onmouseout="Swap('img3','http://www.vicsjavascripts.org.uk/StdImages/One.gif');"
    }
    
    function ThreeStick(){
     document.img1.onmouseout="Swap('img1','http://www.vicsjavascripts.org.uk/StdImages/One.gif');"
     document.img2.onmouseout="Swap('img2','http://www.vicsjavascripts.org.uk/StdImages/One.gif');"
     document.img3.onmouseout="Swap('img3','http://www.vicsjavascripts.org.uk/StdImages/Three.gif');"
    }
    }
    /*]]>*/
    </script>
    </head>
    
    <body>
    <ul class="UL" >
      <li>Tom</li>
      <li>Dick</li>
      <li>Harry</li>
    </ul>
    <br />
    <img id="img1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="Img" width="100" height="100" onmouseover="Swap('img1','http://www.vicsjavascripts.org.uk/StdImages/Four.gif');" onmouseout="//Swap('img1','http://www.vicsjavascripts.org.uk/StdImages/One.gif');" onclick="ImgReset('img2','img3'); OneStick();"  />
    <img id="img2" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="Img" width="100" height="100" onmouseover="Swap('img2','http://www.vicsjavascripts.org.uk/StdImages/Two.gif');" onmouseout="Swap('img2','http://www.vicsjavascripts.org.uk/StdImages/One.gif');" onclick="ImgReset('img1','img3'); TwoStick();" />
    <img id="img3" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="Img" width="100" height="100" onmouseover="Swap('img3','http://www.vicsjavascripts.org.uk/StdImages/Three.gif');" onmouseout="Swap('img3','http://www.vicsjavascripts.org.uk/StdImages/One.gif');" onclick="ImgReset('img1','img2'); ThreeStick();" />
    <br />
    <input type="button" name="b" value="Reset" onclick="ImgReset('img1','img2','img3');" />
    </body>
    
    </html>
    Last edited by wowitsjonjon; 03-06-2009 at 06:58 PM. Reason: changed code again

  • #5
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    any help? I just can't tell what's preventing the code from working.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Making it WAY too hard.

    This is 100% off the top of my head, typing it in here as I go. Watch out for typos.
    Code:
    <html>
    <head>
    <script>
    var holdPic = new Array( false, false, false ); // as many elements as mouseover-able pix
    
    // and then two arrays for the over and out images:
    var overs = new Array("one_over.gif","two_over.gif","three_over.gif");
    var outs   = new Array("one.gif","two.gif","three.gif");
    
    function mouseOver( which )
    {
        var picnum = parseInt( which.name.substring(3) ); // skip over PIX in name
        if ( ! holdPic[picnum] ) which.src = overs[picnum];
    }
    function mouseOut( which )
    {
        var picnum = parseInt( which.name.substring(3) ); // skip over PIX in name
        if ( ! holdPic[picnum] ) which.src = outs[picnum];
    }
    function pixClick( which )
    {
        var picnum = parseInt( which.name.substring(3) ); // skip over PIX in name
        for ( var i = 0; i < holdPic.length; ++i )
        {
            if ( i != picnum )
            {
                holdPic[i] = false;
                document.images["PIX"+i].src = outs[i];
            }
         }
         holdPic[picnum] = true;
    }
    </script>
    </head>
    <body>
    <img src="one.gif" name="PIX0"
         onmouseover="mouseOver(this);" 
         onmouseout="mouseOut(this);"
         onclick="pixClick(this);">
    ...
    <img src="two.gif" name="PIX1"
         onmouseover="mouseOver(this);" 
         onmouseout="mouseOut(this);"
         onclick="pixClick(this);">
    ...
    <img src="three.gif" name="PIX2"
         onmouseover="mouseOver(this);" 
         onmouseout="mouseOut(this);"
         onclick="pixClick(this);">
    ...
    </body>
    </html>
    Let me know how close that comes.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    WOW! I got lucky! Worked first time!

    Worked just fine in MSIE 6 and in FF.

    http://www.clearviewdesign.com/Newbi...enuimages.html

  • Users who have thanked Old Pedant for this post:

    wowitsjonjon (03-08-2009)

  • #8
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    You're awesome, thanks a ton.


  •  

    Posting Permissions

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