[Javascript] - onMouseOver links change image

conware

09-25-2011, 02:59 PM

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:

<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.

// 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.

conware

09-25-2011, 03:39 PM

The best I can come up with is something like this:

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;
}
}

<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>

antonioatt

09-25-2011, 04:57 PM

Hi there ,
If you have menus like this:

<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)

<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>

conware

09-25-2011, 05:07 PM

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?