PDA

View Full Version : How to remove background image from CSS rollover?



Fisher
Jan 23rd, 2009, 05:50 AM
Hello,
I realize there is probably a simple solution, but I'm stumped. Using CSS for rollovers, the hover effect works fine, but I need to remove the original background at the same time. Can I put it somehow in the hover CSS?

<style type="text/css">
#menubar {
width: 815px; height: 103px;
background: url(images/menu.png);
margin: 0; padding: 0;
position: relative;}
#menubar li {
margin: 0; padding: 0; list-style: none;
position: absolute; top: 0;}
#menubar li, #menubar a {
height: 103px; display: block;}
#button1 {left: 0; width: 205px;}
#button2 {left: 171px; width: 200px;}
#button3 {left: 320px; width: 200px;}
#button4 {left: 475px; width: 200px;}
#button5 {left: 630px; width: 200px;}

#button1 a:hover {background: url(images/menu.png)
0 -103px no-repeat;}
#button2 a:hover {background: url(images/menu.png)
-171px -206px no-repeat;}
#button3 a:hover {background: url(images/menu.png)
-320px -309px no-repeat;}
#button4 a:hover {background: url(images/menu.png)
-475px -412px no-repeat;}
#button5 a:hover {background: url(images/menu.png)
-630px -515px no-repeat;}
</style>
</head>

<body>
<ul id="menubar">
<li id="button1"><a href="#1"></a></li>
<li id="button2"><a href="#2"></a></li>
<li id="button3"><a href="#3"></a></li>
<li id="button4"><a href="#4"></a></li>
<li id="button5"><a href="#4"></a></li>
</ul>
</body>

The effect (or lack of) can be seen here: Test Site (http://computersteve.info/)

Any ideas appreciated.
Thanks.

Arbitrator
Jan 23rd, 2009, 08:26 AM
Hello,
I realize there is probably a simple solution, but I'm stumped. Using CSS for rollovers, the hover effect works fine, but I need to remove the original background at the same time. Can I put it somehow in the hover CSS?If you apply the passive background image to the *#menubar a elements instead of the *#menubar element, your existing code for the hover state should override it. Otherwise, you’ll need to use a rule like *#menubar:hover { background: transparent; }.

Other Notes:

This list would be more accessible if:

the a elements contained relevant text. The best way to add the text would be to use img elements with alt attributes for fallback text instead of CSS background properties.
if the li elements were not absolutely positioned and did not have limiting width and height properties specified. All of these things may cause problems if the font size ends up being larger than you specify.

The latter issue could be worked around by instead using the aforementioned img element‐based solution, by utilizing min-width and min-height properties, or, at the very least, specifying overflow: auto to allow for scrollbars.

Assigning background-image, background-repeat, and width properties with identical values for the li elements four to five times each is redundant when you can do so once with the rule *#menubar li { width: 200px; background: url("images/menu.png") no-repeat; } and then override it as necessary.
The IDs or names referenced in your href attributes are illegal HTML 4.01; IDs and names cannot start with a number.
You probably already know this, but your host is making your HTML code non‐conforming by inserting the following code at the end:


</object></layer></span></div></table></body></html><!-- adsok -->
<script language='javascript' src='https://a12.alphagodaddy.com/hosting_ads/gd01.js'></script>

Fisher
Jan 24th, 2009, 04:05 PM
Thanks for the help. I still haven't been able to fully achieve the effect, but I'm working on it. If I use a #menubar:hover attribute, it completely removes the entire bar instead of just removing the piece I want. This would be okay if I could replace the entire image begining from the left corner, but I'm unsure how to do that. Although reluctant to use a table, is it possible to put the menu into a single table cell and use CSS to modify the table's background? If so, then I could just replace the entire image with the another piece of the sprite.

I'll play around with the #menubar li { width: 200px; background: url("images/menu.png") no-repeat; } to see what I can come up with. The thing is that the sections all overlap because I need to account for the non-rectangular nature of the buttons which I'm replacing.

Yes, it is impossible to get anything on GoDaddy's free service to comply with XHTML because of that added code. I even tried to upload a page with missing tags in the reverse order to counteract the added </object></layer></span></div></table></body></html> tags.

Once again, thanks for the help.