Question about onmouseover ...

[mbl]

Dear and learned friends,

Am two days or so into Javascript but have older programming experience.

Want to have an image be replaced by other ones, depending on the mouse location and have found a good code that does what's wanted except that each selection points to a webpage, and the need is just to display the image and nothing else. In addition, would like the original image to be reset when mouse is no longer on any of the selector text.

This is the code where would like to get rid of the href= "anyPage.htm":

<a href="chris.html" onmouseover="document.pic.src=chris.src">Front View</a><br>
<a href="sam.html" onmouseover="document.pic.src=sam.src">Bottom View</a><br>
<a href="marco.html" onmouseover="document.pic.src=marco.src">Back View</a>

Don't have any chris.html nor sam.html, nor marco.html. Those are from the free web code tutorial.

Want the user to click on "Front View" "Botom View" or "Back View" and show the different views of the item firstly appearing.

The code works fine, except if user presses legend-text, a wepage anchor is gone after. Don't want that, and would like to keep the code as much as possible as is.

Just would like to have the function onmouseover change the image and that's all.

This program, also leaves the last image showing but would like the original image to be reset when mouse is not at selector text.

Have not been able to figure this out for quite a while, nor find clues elsewhere.

Thanks for any reply.

-mbl-

[mbl]

Thanks, friends.

Got the way by searching this forum. Found this:

<a onmouseover="document.image.src='button2.gif'"
onmouseout="document.image.src='button1.gif'">
<img src="button1.gif" border="0" name="image"></a>

Still don't follow why the <a (anchor) is needed.

If anyone can help, please do.

-mbl-

[subhailc]

<a onmouseover="document.image.src='button2.gif'"
onmouseout="document.image.src='button1.gif'">
<img src="button1.gif" border="0" name="image" onmouseover="document.image.src='button2.gif'"
onmouseout="document.image.src='button1.gif'"> ></a>

Still don't follow why the <a (anchor) is needed.


it's not.

<img src="button1.gif" border="0" name="image" onmouseover="document.image.src='button2.gif'"
onmouseout="document.image.src='button1.gif'">

[jamescover]

<img name="Imgs" src="images/image1.gif" border="0" width="50" height="50" onmouseover="this.src='images/image2.gif'" onmouseout="this.src='images/image1.gif'" style="cursor:pointer;" />



-james

[Roy Sinclair]

The <a> tag used to be needed because there was a large population of people using Netscape 4.x version browsers and that particular browser allowed for the onmouseover and onmouseout events on <a> tags but not on <img> tags so the easy and common solution was to wrap any <img> tag that you wanted to use the mouse events with in an <a> tag.

Those browsers are definitely now obsolete so it's fairly safe to drop that particular bit of "special coding".

[mbl]

Most dear and kind friends,

Thank you so much for sharing your expertise. All answers are very valuable, the details and the explanation on 'why' the <a anchor is there.

Spent almost a whole day trying to get rid of the <a symbol and did eventually by copying, but there's nothing like understanding.

Thanks.