rollover

[birgi]

hello,
i need to know how to make a list of regular text links that have a small image appear beside them when the mouse is over them. The image will be the same for each. Ive seen this before but i cant find any tutorials.
Thanks

 

[vbkris]

can u give me a site name? i think i can help u...

Known is handfull, Unknown is worldfull

 

[organicg]

CSS to the rescue.

a:hover
{
list-style-image: url(yourimage.gif)
}

http://www.w3schools.com/css/pr_list-style-image.asp

explains this. You may need the 'ol' element in the declaration...maybe:
ol a:hover
{
list-style-image: url(yourimage.gif)
}

Or if you feel like making things hard on yourself, in the onmouseover event you could set a visible.true property to the HTML element that contains the image, and set it to false when onmouseout. Set them to false by default. CSS is the way to go, though.

 

[petey]

Good tips organicglenn. You can also use CSS hover styles similar to those to swap a background image positioned to the left of the text. Padding can be used to make some room for the image to show through on the side.

ol a:hover
{
padding-left: 15px;
background: url(img.gif) no-repeat 0% 50%;
}

http://www.drpeterjones.com/

News and views of some obscure guy

 

[birgi]

thanks!!!!