mouseover

[wee2john]

ok so im in a bit of a predicament. I need to create a mouseover image so when i hover my mouse over an image another image appears somewhere else on the webpage I do not want it to appear above the image hovered over like most code allows, i need a separate image to appear that is normally hidden. possibly the wrong section to post this but help would be much appreciated!

[beau kang]

Seems like the right place to put this kind of question to me.

Here's what I would do:
you have 2 image elements

<img name="img1" id="img1" src="images/image1.jpg" />
<img name="img2" id="img2" src="images/image2.jpg" />

You would need to add a listener for when you hover over Image1, and then when you hover off of it. We also need to hide Image2 when the page loads. So now your code will look like this:

<img name="img1" id="img1" src="images/image1.jpg" onMouseOver="showImg();" onMouseOut="hideImg();" />
<img name="img2" id="img2" src="images/image2.jpg" style="display:none;" />

Now we can make our javascript functions, which is pretty easy to do since we are just going to change the style of Image2. Here's what it would look like:

<script type="text/javascript">
function showImg() {
   document.getElementById("img2").style.display="block";
}

function hideImg() {
   document.getElementById("img2").style.display="none";
}
</script>

Now test it out, see if that is what you are trying to do or if there is something else that you are looking for. I hope that this helps.

[wee2john]

ok so it might help if i tell you what its for and maybe u can help me more. I need to make a navigation menu that expands when i hover over some of the options. I want the expanded links to be my own images and the navigation menu is also an image with hyperlinks over it. Is there anyway so I can do this code that when i hover over an option on the menu it expands (honestly thats the only way i could see of doing it at the time)

[beau kang]

Do you have a website that already does this that you can use as an example?

[wee2john]

no sorry, have to create one for part of my exams (outside help is allowed for code). so basically i want the same navigation style as this site but using my own images

[YetiBizniz]

Seems like the right place to put this kind of question to me.

Here's what I would do:
you have 2 image elements

<img name="img1" id="img1" src="images/image1.jpg" />
<img name="img2" id="img2" src="images/image2.jpg" />

You would need to add a listener for when you hover over Image1, and then when you hover off of it. We also need to hide Image2 when the page loads. So now your code will look like this:

<img name="img1" id="img1" src="images/image1.jpg" onMouseOver="showImg();" onMouseOut="hideImg();" />
<img name="img2" id="img2" src="images/image2.jpg" style="display:none;" />

Now we can make our javascript functions, which is pretty easy to do since we are just going to change the style of Image2. Here's what it would look like:

<script type="text/javascript">
function showImg() {
   document.getElementById("img2").style.display="block";
}

function hideImg() {
   document.getElementById("img2").style.display="none";
}
</script>

Now test it out, see if that is what you are trying to do or if there is something else that you are looking for. I hope that this helps.

that was exactly what i was looking for! thank you very much.
but i do have another problem using this, I wanted to apply this multiple times one 1 page, but it doesn't seem to work. when i use it, 1 of the 4 "img2" 's appears when hovering above every "img1"

i hope you understand what i mean, can you solve this? i think by adjusting a little bit to the script orso. thanks in advance!