Help with jQuery navigation menu to show an image

JavaScript
1

Hello,

I’m trying to include a navigation menu where the viewer hovers over the link such as Main or Home and somewhere else in the page it display an image.

Similar to this : http://tutorialzine.com/2010/01/halftone-navigation-menu-jquery-css/

But instead of pixels, I would just like images to be displayed.

2

Why use jquery when you can do it with less code using just plain javascript.?

In any case, post the code you have so far and we can try to help you get it working.

3

Ok well, I’m trying javascript to do this and I’m able to get the image showing. But since this is involving images…I would like the link text to change colors. Of course if this wasn’t an image I’ll use CSS to change the font color. But because I want to keep this certain font that isn’t common, I’m sticking to an image of the word (in this case “main”). Is it possible to swap the word image (from black to blue) while using this show command at the same time?

my current code is this:

<script language="Javascript">
<!--
function ShowPicture(id,Source) {
if (Source=="1"){
if (document.layers) document.layers[''+id+''].visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
}
else
if (Source=="0"){
if (document.layers) document.layers[''+id+''].visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
}
}
//-->
</script>

<a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)"><img src="main.png"></a>
<div id="Style"><img src="house.png"></div>