how to change images when hovering

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

David T-G - 30 Sep 2003 17:06 GMT

Hi!

Please be gentle; I'm new to ciwas and CSS in general, and know little
to no javascript (but that might win me points here ;-)

I have nine 'tab' images, with corresponding high-background versions
for display under hover, which I would like to control via CSS. When
on a page, the tab should be just an image rather than a link with
hover sensing, so that is probably easy to just use <img> rather than
<div> there.

My code looks like
#news
{
background-image : url("/images/news_off.gif") ;
width : 181 ; height : 20 ;
}
#news:hover
{
background-image : url("/images/news_on.gif") ;
width : 101 ; height : 20 ;
}
...
<div id='news'>&nbsp</div>
and that works for the moment. There's a lot I don't know, though.

1) What is the difference between .news and #news (and however else
I might define an element)?

2) I had to specify the sizes or the image was squished. Meanwhile,
this looks an awful lot like a table cell definition. Should I be
doing this as for an image (or a link)?

3) Do I have to repeat this (or whatever) code for all nine tabs or
is there a way to set up a generic style for the images and still
switch between _off and _on?

I would love to learn about CSS and so I would love pointers to good
tutorials. I'm in the middle of a project, though, and so meanwhile I
have a deadline and beg for your help :-)

Oh, yeah -- is there an email gateway for this newsgroup, not unlike
the perl-beginners list?

TIA & HAND

:-D

Signature

David T-G

Reply to this Message

David Dorward - 30 Sep 2003 17:23 GMT

> I have nine 'tab' images, with corresponding high-background versions
> for display under hover, which I would like to control via CSS. When
> on a page, the tab should be just an image rather than a link with
> hover sensing, so that is probably easy to just use <img> rather than
> <div> there.

> My code looks like
> #news
[quoted text clipped - 7 lines]
> width : 101 ; height : 20 ;
> }

This is invalid. Your lengths require units. You should also note that MSIE
doesn't support :hover except on <a> elements.

> ...
> <div id='news'>&nbsp</div>
> and that works for the moment. There's a lot I don't know, though.

It won't work very well if the browser doesn't support, or has turned off,
images OR CSS.

You'd be better off using real text, with some image as the background. As
its a menu you should also consider not presenting it as a series of divs.
A menu is a list of links, so that's how you should present it.

http://www.maxdesign.com.au/presentation/listamatic/horizontal07.htm would
probably be worth a look.

> 1) What is the difference between .news and #news (and however else
> I might define an element)?

http://www.w3.org/TR/CSS2/selector.html#class-html
http://www.w3.org/TR/CSS2/selector.html#id-selectors

http://www.w3.org/TR/html4/struct/global.html#adef-class
http://www.w3.org/TR/html4/struct/global.html#adef-id

> 2) I had to specify the sizes or the image was squished.

I doubt it. More likely the image was masked. (The term squished suggests
scaling).

> 3) Do I have to repeat this (or whatever) code for all nine tabs or
> is there a way to set up a generic style for the images and still
> switch between _off and _on?

You would need JavaScript to avoid seperate definitions for each image.
Using real text with a common background image would work better IMO.

> I would love to learn about CSS and so I would love pointers to good
> tutorials.

http://dorward.me.uk/www/css/#tutorials

Signature

David Dorward http://dorward.me.uk/

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / September 2003

how to change images when hovering