How to put a box around a picture on a mouseover

resetreset · 04-02-2010, 01:08 PM

I have a set of images on my webpage,and when the mouse goes over them, I'd like a thin box around each image to tell the viewer that it's been selected (when clicked, it'll open a new window). How do I do this?

Thanks.

smeezekitty · 04-02-2010, 01:22 PM

AFAIK it might swap the image out with one with a border using onmouseover and onmouseout.

pixellany · 04-02-2010, 01:35 PM

The rust on my html and CSS skills is pretty thick, BUT: I think you want to define a <div> that contains a picture. Then define (in CSS) how that <div> is rendered when the mouse is over it. I do not think you need to be swapping images.

resetreset · 04-03-2010, 01:11 AM

Quote:

Originally Posted by pixellany

Then define (in CSS) how that <div> is rendered when the mouse is over it.

How do I do that?

pixellany · 04-03-2010, 07:09 AM

Quote:

Originally Posted by resetreset

How do I do that?

Assuming that I am right, then it is in the CSS syntax rules----what book are you using?

If you are new to CSS, then I strongly recommend getting this book:
http://www.amazon.com/Spring-Into-HT.../dp/0131855867

And---to be completely inundated with information, go here:
http://www.w3.org/Style/CSS/

phunkymunky · 04-03-2010, 09:24 AM

Assuming the image is a link you can use the a:hover property in css.

see http://www.w3schools.com/CSS/css_pseudo_classes.asp