Jump to content
Stef's Coding Community
dms

image appear upon hovering over a link?

Recommended Posts

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 { ???}.

Share this post


Link to post
Share on other sites

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;

}

Share this post


Link to post
Share on other sites

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 by Eric

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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 pictureimage.

 

 

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:-

pictureimage

 

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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


Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...