Show small image when hover text link?

[pkng]

Hi!

I have seen web pages with text and a blue link i the text and when you click or hover above the link with the mouse pointer a small picture appears. And wonder how that is done? I guess it would be quite easy with some CSS or is javascript also needed?

Thanks!

[Andyram2k]

Hi pkng,
Do you mean that the cursor changes to another image?

Try this: http://www.echoecho.com/csscursors.htm

Hope this helps.

[1DayTutoring]

Or maybe you are talking about a small image appearing besides the linked text.
You can use CSS and defined that small text as a background image of the pseudo-selector a:hover .
No javascript needed for that.

[pkng]

Thanks! No, I don't whant to change the cursor Andyram2k

Let's say I have a travel site with a text that describes things to see in the city with blue links. And when the visitor hovers with the mouse on a link an image of the place should appear above the rest of the text. Perhaps a layer with an image that is hidden from the beginning and get visible when it's activated the visitor click or hovering the link.

I hope this helps?!

[pkng]

Thanks for the reply 1DayTutoring, that might be what I'm looking for, but could you help me with some code or tell me what I'm going to search for?

Thanks!

[1DayTutoring]

Let assume a link has a class name "test". If you would like the background image to appears has when the the mouse hover, you would create a style

a.test:hover{
background-image:url(/images/mybg.gif) no-repeat left center;
padding-left: 20px;
}

Assuming your "small picture" is named mybg.gif and saved in the "images" folder.
The path "/images/mybg.gif" can also be relative (i.e. ../images/mybg.gif) to the external CSS file or the embedded CSS style.

The "no-repeat" prevent that image from tiling.
The "left center" align the image to the left (horizontally) and center (ventically)

Off course you will certainly need a left padding so the text of your link would not seat right on to of that image. The amount of left padding depend on the with of the image.
I set it to 20px assuming your small image is less than 20px (say 15px to 18px) to leave about 2 to 5 pixels between the letters and the image.

I hope this give you enough pointers.

[pkng]

Thanks! Looks interesting! I try this tomorrow!

[pkng]

Hi againg! I couldn't whait I had to try! But it didn't work!

a.test {
font-family: verdana;
font-size: 14px;
text-decoration: none;
}

a.test:hover{
background-image:url(bilder/bilder_mini/0001_1s.jpg) no-repeat left center;
padding-left: 20px;
}

<a class="test" href="#">text</a>

I want a small image above the link "text", but will that realy be done with that code I got? Thanks!