how to change images when hovering

[David T-G]

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
--
David T-G

[David Dorward]

David T-G wrote:

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 ;
}
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/presenta...rizontal07.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/gl...tml#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

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