...

View Full Version : [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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum