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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Mar 2010
    Posts
    198
    Thanks
    78
    Thanked 5 Times in 5 Posts

    [Javascript] - onMouseOver links change image

    Hi guys,

    I need some help. Im trying to make a navagation menu with images that need to be changed when someone hovers over the child category.

    So lets say I have a menu that looks like this:

    Code:
    <img src="notactiveimagemenu1.jpg" alt="">
    <ul id="menu1">
       <li>link</li>
       <li>link</li>
       <li>link</li>
    </ul>
    <img src="notactiveimagemenu2.jpg" alt="">
    <ul id="menu2">
       <li>link</li>
       <li>link</li>
       <li>link</li>
    </ul>
    Now what im trying to do is if someone hovers over the li items from menu1 to change the image src of menu1.jpg to active.

    I was hoping to do this with some javascript.
    Code:
    // i was thinking about something like this:
    
    // first put menu items in a array
    
    // then use document.getElementById(id).onmouseover = function()
    // and make some sort of check to see which src should be changed.
    Now I really have no clue how to do it.
    So if anyone knows a cool solution please let me know.
    I know I could add onmouseover events to each li item and changing the src of the category. But Im trying to find a better solution.
    And I think I should be able to use document.getElementById(id).onmouseover = function() for that.

    Anyway thanks for any tips.
    Please note I know I could use jquery to do all of this very easy but I consider this practice because I don't know that much javascript.

  • #2
    Regular Coder
    Join Date
    Mar 2010
    Posts
    198
    Thanks
    78
    Thanked 5 Times in 5 Posts
    The best I can come up with is something like this:
    Code:
    function change(menuId, image, newImage)
    {
    	var ul   = document.getElementById(menuId);
    	var img = document.getElementById(image);
    	
    	for (i = 0; i < ul.childNodes.length; i++)
    	{
    		var t = document.getElementById(menuId).childNodes[i];
    		if (t.onmouseover = function()) ? img.src = newImage : img.src = img.src;
    	}
    }
    Code:
    <img src="menu1noactive.jpg" id="d" alt="">
    <ul id="menu1">
      <li>link</li>
      <li>link</li>
    </ul>
    <img src="menu1noactive2.jpg" id="d" alt="">
    <ul id="menu1">
      <li>link</li>
      <li>link</li>
    </ul>
    <script type="text/javascript">
    change('menu1', 'd', 'activeimage.jpg');
    </script>

  • #3
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    5
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Hi there ,
    If you have menus like this:
    Code:
    <img src="notactiveimagemenu1.jpg" alt="">
    <ul id="menu1">
       <li>link</li>
       <li>link</li>
       <li>link</li>
    </ul>
    <img src="notactiveimagemenu2.jpg" alt="">
    <ul id="menu2">
       <li>link</li>
       <li>link</li>
       <li>link</li>
    </ul>
    I think you need something like this( notice that tag ids must be different or use classes instead)
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function change(menuId, image, newImage)
    {   /*alert(menuId);
    	alert(image);
    	alert(newImage);*/
    	var img = document.getElementById(image);
    	img.src = newImage;
    }
    </script>
    </head>
    <body>
    <img src="menu1noactive.jpg" id="d1" alt="" width=20 >
    <ul id="menu1" onmouseover='javascript:change(this.id,"d1","menu1active.jpg")'
      onmouseout='javascript:change(this.id,"d1","menu1noactive.jpg")'>
      <li>link</li>
      <li>link</li>
    </ul>
    <img src="menu1noactive2.jpg" id="d2" width=20 alt="">
    <ul id="menu1" onmouseover='javascript:change(this.id,"d2","menu1active2.jpg")'
     onmouseout='javascript:change(this.id,"d2","menu1noactive2.jpg")'>
      <li >link</li>
      <li>link</li>
    </ul>
    </body>
    </html>

  • Users who have thanked antonioatt for this post:

    conware (09-25-2011)

  • #4
    Regular Coder
    Join Date
    Mar 2010
    Posts
    198
    Thanks
    78
    Thanked 5 Times in 5 Posts
    Thanks antonioatt, works great!
    Is it possible to put the onmouseover/onmouseout events in some sort of function?
    To seperate the javascript from the html?
    and call it in the bottom of the page somewhere?


  •  

    Posting Permissions

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