image appear upon hovering over a link?

[dms]

Is there a way to have an image appear upon hovering over a link?

 

e.g.

check out this picture.

 

I thought I had read on the forum that you can place and image off screen using margins and then bring it back into play using a link and a:hover { ???}.

[Wickham]

Use a hover popup, see this page:-

http://www.wickham43.net/hoverpopups.php

[dms]

Thanks Wickman. I read the info, but it's just not registering. Can this be done with just html/css?

 

New code: (index.html is the page the this code is from)

 

 

check out this picture.

 

 

Is this correct, if so, how would I code the css? Sould this work, it didn't for me?

 

.popup1 a:hover {

position: absolute;

top: 2px;

right:888px;

border: 1px solid #000;

}

[PicnicTutorials]

Is this correct, if so, how would I code the css?

 

Sort of... Like this though...

 

{ visibility: inherit; } Testing
<br /><!--<br />.popup { <br />position:relative;<br />} <br />.popup img { <br />position:absolute;<br />left:-999em; <br />} <br />.popup:hover img, .popup:focus img {<br />left:105px;<br />padding:5px 10px;  <br />border:2px solid #000;<br />background:#999;<br />}<br />a:hover{visibility:visible;} /* IE6 */<br />--><br />



Hover

 

Thats only one way to do it - there are 4 other ways as well.

Edited April 1, 2009 by Eric

[LSW]

http://meyerweb.com/eric/css/edge/popups/demo2.html

[dms]

I have it working with text, but not with an image, yet. Thanks!

[jlhaslip]

Second paragraph.

 

http://jlhaslip.com/samples/tooltips/index.html

[Wickham]

Thanks Wickman. I read the info, but it's just not registering. Can this be done with just html/css?

 

New code: (index.html is the page the this code is from)

 

 

check out this picture.

 

 

Is this correct, if so, how would I code the css? Sould this work, it didn't for me?

 

 

I think you missed this sentence in my link:-

All the complications are in the stylesheet. See the /*HOVER POPUP LINKS*/ sections here

 

and the html markup only needs to be:-

picture

 

However, you have lots of alternatives now from the other posts.

[dms]

I've read and tried them all with little success. Tried them with and without . I've tried to keep it simple; just move a picture in without a border or text.

 

The closest I've been able to get is to have a small box pop up - which I can position. When I add... alt="image" the box will contain (image). I've checked my link and it seems fine. I'm missing something simple and just can not figure it out.

[PicnicTutorials]

OK - here is what you do! Pick up your mouse >> left click, hold, and copy all of the code below >> open up your editing program >> right click and click "PASTE".

 

Walla! Now you have a working copy. You can only move up from there.

 

{ visibility: inherit; } Testing
<br /><!--<br />.popup { <br />position:relative;<br />} <br />.popup img { <br />position:absolute;<br />left:-999em; <br />} <br />.popup:hover img, .popup:focus img {<br />left:105px;<br />padding:5px 10px;  <br />border:2px solid #000;<br />background:#999;<br />}<br />a:hover{visibility:visible;} /* IE6 */<br />--><br />



Hover