dms Posted April 1, 2009 Report Share Posted April 1, 2009 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 { ???}. Quote Link to comment Share on other sites More sharing options...
Wickham Posted April 1, 2009 Report Share Posted April 1, 2009 Use a hover popup, see this page:- http://www.wickham43.net/hoverpopups.php Quote Link to comment Share on other sites More sharing options...
dms Posted April 1, 2009 Author Report Share Posted April 1, 2009 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; } Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted April 1, 2009 Report Share Posted April 1, 2009 (edited) 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 Quote Link to comment Share on other sites More sharing options...
LSW Posted April 1, 2009 Report Share Posted April 1, 2009 http://meyerweb.com/eric/css/edge/popups/demo2.html Quote Link to comment Share on other sites More sharing options...
dms Posted April 2, 2009 Author Report Share Posted April 2, 2009 I have it working with text, but not with an image, yet. Thanks! Quote Link to comment Share on other sites More sharing options...
jlhaslip Posted April 2, 2009 Report Share Posted April 2, 2009 Second paragraph. http://jlhaslip.com/samples/tooltips/index.html Quote Link to comment Share on other sites More sharing options...
Wickham Posted April 2, 2009 Report Share Posted April 2, 2009 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. Quote Link to comment Share on other sites More sharing options...
dms Posted April 2, 2009 Author Report Share Posted April 2, 2009 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. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted April 2, 2009 Report Share Posted April 2, 2009 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.