Rollovers in CSS?

[WebGodinTraining]

Is it possible to have in CSS, when defining a style with a background image, to include text and a rollover script that exchanges the background image and does not affect the text? Or, for that matter, the rollover state of the text changes along with the rollover state of the background image?

[jscheuer1]

Yes, using the :hover pseudo class will do that except in elements in IE versions before 7 that are not linked anchors or their children:

.someclass {
background-image:url('some.gif');
font-weight:normal;
}
.someclass:hover {
background-image:url('some_other.gif');
font-weight:bold;
}

To get these type of effects in pre number 7 versions of IE, the element must be a linked anchor tag. If the tag is given a display property of 'block' it will act like a division as well, making its appearance acceptable in other browsers. Or a child element can be used. If a child element is block level though, technically this is invalid. However, with the advent of IE 7, it is unnecessary to go to these lengths for effects that are not mission critical.

[mwinter]

Please define "the rollover state of the text". Your question isn't entirely clear.

Mike

[WebGodinTraining]

Please define "the rollover state of the text". Your question isn't entirely clear.

Mike

I thought that might be an issue... I have a rollover script for images that I would like to implement. I have a nice CSS I would like to use. I am trying to plan ahead to use this page as a template for several projects. So, instead of the time consuming process of of creating double sets of images for every web site ( as well as the poor quality of text as an image...) I'm looking to keep the text separate from the rollover image(s) - there would be possibly four elements: two images, two states of text. The text would be tuped in the HTML and defined in the stylesheet, the background images in either javascript or external javascript. Any suggestions would be welcomed, and I hope this is clearer...

[jscheuer1]

Did you see my post?

http://www.dynamicdrive.com/forums/s...48&postcount=2

[BLiZZaRD]

Not to step on toes... and my "version" isn't exactly "complete" as I have a few quarks to work out... BUTTTT

I have an image rollover CSS menu where the image changes as you roll over, but the buttons do the same.

In my example my images have the text on them, so my anchor tags look like:

<a href=site.com></a>

All you need to do is to add the text between the anchor tags and it will appear over the buttons.

Have a look and see if you can use some of that.

I will leave now

[jscheuer1]

BLiZZaRD, you're not stepping on toes, and neither was mwinter. It is not either of your faults if the OP didn't read any but the most recent reply to his/her post. This is a common error of omission on the part of new participants to forums and, no one's fault. It would be nice if a way to prevent it could be found but, I'm not sure how that would be done.

That said, I had a look at your menu in the 'submit' section and had a thought about preloading the images. Javascript can do this but, that would be a last resort in an all css menu. The images that are used onload, the rolled over ones, do not need preloading. The ones that appear only on roll over do. One way to preload images would be to have a division with display:none; or with both visibility:hidden; and positioned absolutely off of the page, and have the images in there, that should 'preload' them.

Getting back to my solution, if the idea in the first place is to have links, the solution is easy:

a.roll_link {
display:block;
width:75px;
height:25px;
background-image:url('1st.gif');
}
a.roll_link:hover {
background-image:url('2nd.gif');
font-weight:bold;
}

The width and height should be that of the background image. Any text property/value pairs desired can be used with either selector. Text will appear over the image. This will work as well in a compliant browser as it will with earlier versions of IE.

[BLiZZaRD]

Thanks for that! I was actually going to get back to fixing/working on version 2 later this week (so busy around the holidays, computers don't take Christmas off)

I was playing around with the preloading in different ways, and some have worked almost well enough and others not at all. I didn't think about the "off the screen" method.

I will play around with that and see what I can get.

Thanks again!