OnMouseOver Events

[plasterx]

Hi all,

How does onmouseover events work? I actually have this image file, and when the user puts his mouse over it he should be able to see an enlarged image of the picture and if the mouse moves out of the picture it becomes back to the original picture. how do i go about doing it using the onmouseover event? my tag looks like this and i dont know what to put inside the onmouseover function...

<img src="imagefile.asp" onmouseover="">


Thanks again..!

[BaldEagle]

here is a simple way to do it without any javascript functions:


<img src="images/p1.jpg" onmouseover="this.src='images/p2.jpg';" onmouseout="this.src='images/p1.jpg';">


Simple explanation: Image starts out as p1.jpg, when you mouseover it becomes p2.jpg, when you mouseout it goes back to p1.jpg. Just substitute your images in place of mine and there you go.

note: the calls inside the event declarations are really javascript but you just don't need any functions to cause this to happen.

BaldEagle

[BaldEagle]

Following up. Is this resolved?

BaldEagle

[TinMan]

I was laso looking for this, and am glad to see such a simple bit of coding to make it work.

As an extension of this idea;
If i have a row of say 4 images, i could apply the above to each and things would be ok,
but
if i want the image to appear in a different table cell (so i can show it enlarged) is there just as simple an explanation?

thanks

[BaldEagle]

This is just a quick example, you can play around with it to get the desired effect.

<table width="100%">
<tr>
<td width="20%">
<img src="images/pic1.jpg" width="100" onmouseover="document.getElementById('bigpic').src='images/pic1.jpg'";>
</td>
<td width="60%">
<img id="bigpic" width="300" src="images/blank.jpg">
</td>
<td width="20%">
<img src="images/pic2.jpg" width="100" onmouseover="document.getElementById('bigpic').src='images/pic2.jpg'";>
</td>
</tr>
</table>

BaldEagle

[TinMan]

Great Thanks,

I can mod this to what I want............

[degsy]

If you want to do multiple then a function would be better.

http://www.htmlcodetutorial.com/images/images.html

[TinMan]

I have 4 maybe 5 images to rollover, but the code above seems to work fine.

What advantage is using a function? Not something I have used before........

[ealbrecht]

Any event based effect, like an onmouseout/onmouseover, should be preloaded.

You can throw some js code like so:
sunset = new Image();
sunset.src = "sunset.gif";

And then your html code like so:
<a href="..." onmouseover="this.src=sunset.src" onmouseout="sunrise.gif"><img src="sunrise.gif" /></a>

[TinMan]

ok thanks, I'll have a play around with this also...

[felgall]

here is a simple way to do it without any javascript functions:

<img src="images/p1.jpg" onmouseover="this.src='images/p2.jpg';" onmouseout="this.src='images/p1.jpg';">


The code in bold ARE Javascript functions. You can't do it without Javascript functions you just have a choice of whether you want to clutter your HTML up with Javascript or make your HTML smaller by puting the Javascript into an external file.