[pmwiki-users] Making images light up

[Kathryn Andersen]

On Tue, Nov 21, 2006 at 08:33:55PM +0000, Hans wrote:
> Tuesday, November 21, 2006, 8:15:05 PM, The wrote:
> 
> > I'm wondering if someone could give an example of how to make images
> > light up when a mouse runs over it.  I used to use javascript
> > rollovers years ago, but understand css has made that kind of
> > obsolete.
> 
> If your images are anchor tags, like in a menu,
> you can configure the links with a background image using css, and use
> a:hover for a different background image. I've done this with the same
> image as a button image, and a second one for the hover effect.
> But it should work also for individual images. Hmmm... or not?

Using :hover is the correct thing to do in CSS.  Unfortunately, IE only
recognises the :hover when it is associated with a link.  Firefox,
Opera, Konqueror and other good-citizen browsers *do* recognise :hover
when it is associated with something other than a link, but it doesn't
really help if your viewers are using IE.

So, to get back to the original question, how do you want the images to
"light up"?  Are you replacing the image with another, brighter image,
or do you want some other effect?  Is the image part of a link, or not?
If it is part of a link, no worries, you can use the :hover CSS.  But in
order to distinguish individual images from each other, each link will
need to have a unique ID, or be inside something with a unique ID.

Here are some useful pages to check out:

http://www.alistapart.com/articles/rollovers/
http://www.designmeme.com/articles/cssrollovers/
http://sonspring.com/journal/hoverbox-image-gallery
http://www.oreillynet.com/pub/a/javascript/2001/03/23/rollovers.html

Kathryn Andersen
-- 
 _--_|\     | Kathryn Andersen	<http://www.katspace.com>
/      \    | 
\_.--.*/    | GenFicCrit mailing list <http://www.katspace.com/gen_fic_crit/>
      v     | 
------------| Melbourne -> Victoria -> Australia -> Southern Hemisphere
Maranatha!  |	-> Earth -> Sol -> Milky Way Galaxy -> Universe