Display image when mouseover on anchor

[Hvid Hat]

Hi

I'd like to display an image when mouseover on an anchor. The image should be
shown where the anchor is located and I don't want a popup window. It should
also disappear once the mouse leaves the image.

<a onmouseover="">move mouse here to see image</a>

Is this possible? I've searched but I haven't found anything useful.

 

[Sherm Pendley]

I'd like to display an image when mouseover on an anchor. The image should be
shown where the anchor is located and I don't want a popup window. It should
also disappear once the mouse leaves the image.

<a onmouseover="">move mouse here to see image</a>

Is this possible?

It's easy with JavaScript, but keep in mind that not everyone will
allow that, so it's not a good idea to use it for anything that's
required for your page to work. If the image is a non-essential
convenience, like a thumbnail of the full-size image the link leads to
or some such, go for it.

sherm--

 

[Hvid Hat]

"Hvid Hat" <[email protected]> writes:

It's easy with JavaScript, but keep in mind that not everyone will
allow that, so it's not a good idea to use it for anything that's
required for your page to work. If the image is a non-essential
convenience, like a thumbnail of the full-size image the link leads to
or some such, go for it.

The image is non-essential. I've got a table of football players and as the
last column I want an anchor that shows a player image on mouseover. I've
been looking for a simple javascript solution without luck. I've been looking
at Lightbox etc. but isn't that overkill?

 

[Roy A.]

Hi

I'd like to display an image when mouseover on an anchor. The image should be
shown where the anchor is located and I don't want a popup window. It should
also disappear once the mouse leaves the image.

<a onmouseover="">move mouse here to see image</a>

The attribute onmouseover tells me that this is an javascript
question. Pleas
ask this kind of questions to a group like comp.lang.javascript or
alt.comp.lang.­javascript.

However, if JavaScript is disabled, you can use CSS.

<a onmouseover="">move mouse here to see image<img ...></a>
a img { position: absolute; visibility: hidden }
a:hover img { visibility: visible }

 

[Hvid Hat]

However, if JavaScript is disabled, you can use CSS.

<a onmouseover="">move mouse here to see image<img ...></a>
a img { position: absolute; visibility: hidden }
a:hover img { visibility: visible }

Very nice! Didn't even think of that. Thanks!