Best method of CSS image rollovers (in boxes)?

niemie

03-13-2005, 06:45 PM

I've got a page with 2 rows of boxes, each containing a different image, and each is going to be a link to a different page. I want the images to appear somewhat dull in their "off" state and then once they are rolled over come to full color.

I have never done CSS rollovers using images, but I am guessing I would just swap out the backgrounds in a hover class to achieve what I am trying to do. This seems simple in theory but I am wondering - is there a problem with preloading images in CSS? Maybe there is a method of using only one image instead of two? Should I be thinking about hidden layers, etc or what is the easisest way to accomplish this?

Code so far:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title Goes Here</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}

body {
margin:0;
padding:0;
background-color:#cccccc;
}

a img {
border-width:0;
}

#wrapper {
width: 700px;
height: 565px;
margin-left:auto;
margin-right:auto;
margin-top:5px;
border: 1px solid #808080;
background-color:#ffffff;
}

#sidebar {
width: 123px;
height: 565px;
float: left;
background-image:url(images/sidebar.jpg);
}

#content {
margin-left: 125px;
height: auto;
width:auto;
padding: 30px;
}

h1, h2 {
font:Arial, Helvetica, sans-serif;
font-size: 24px;
font-style:oblique;
color: #444444;
}

h2 {
margin-top:100px;
}

/* Begin W Boxes */
#b1w, #b2w, #b3w {
position:relative;
float:left;
height:35px;
width:35px;
border:1px solid;
border-color: #808080;
margin-top: 5px;
margin-right: 5px;
background-color:#ffffff;
}

#b1w {
background-image:url(images/brooke.gif);
}

#b2w {
background-image:url(images/lakeo.gif);
}

#b3w {
background-image:url(images/velagio.gif);
}

/* Begin C Boxes */
#b1c, #b2c, #b3c {
position:relative;
float:left;
height:35px;
width:35px;
border:1px solid;
border-color: #808080;
margin-top: 5px;
margin-right: 5px;
background-color:#ffffff;
}

#b1c {
background-image: url(images/liveit.gif);
}

</style>
<body>
<div id="wrapper">
<div id="sidebar"></div>
<div id="content">
<h1>W Header</h1>
<div id="b1w"></div>
<div id="b2w"></div>
<div id="b3w"></div>
<h2> C Header</h2>
<div id="b1c"></div>
<div id="b2c"></div>
<div id="b3c"></div>
</div>
</div>
</body>
</html>

harbingerOTV

03-13-2005, 08:40 PM

Since your using a different image for each link try this:

http://www.dynamicdrive.com/dynamicindex4/highlightgrad.htm

ReadMe.txt

03-13-2005, 09:22 PM

I think his objective was to steer clear of pointless javascript solutions.

http://wellstyled.com/css-nopreload-rollovers.html

should be what you are after

ronaldb66

03-14-2005, 09:16 AM

Or, alternatively, the ALA version: Sliding Doors of CSS, Part II (http://www.alistapart.com/articles/slidingdoors2/) (basically the same principle).

niemie

03-14-2005, 05:23 PM

I think his objective was to steer clear of pointless javascript solutions.

http://wellstyled.com/css-nopreload-rollovers.html

should be what you are after

That is interesting.... what worries me is positioning though, seeing as how I have to create a seperate menu for each box (as they all contain different pictures). My boxes are in a row horizontally...but I guess it's just trial and error to get the images to fit in the boxes I have created? Also, I obviously need to make multiple anchor classes....

niemie

03-14-2005, 06:31 PM

Thanks for the help guys! I got it to work, I really appreciate you linking the tutorial!

Two more questions for you though: after I click on one of the images (links) it gets this dotted line around it that does not go away until you click somewhere else... I attached a picture of it. Anyone know what this is and how to get rid of it? Not that it matters, but I only have 2 states "a" and "a:hover" in my code - because the links are going to open in new windows.

I'm also randomly getting flicker on the rollovers in IE - when I check the page locally with IE there is no flicker but when I upload to the server and check the page online there is. I am not following the update section about flickering in the article (http://wellstyled.com/css-nopreload-rollovers.html) - I don't see the change.....any help is greatly appreciated.

Anyhow here is my code for reference if needed:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title Goes Here</title>
<style>
* {
margin: 0;
padding: 0;
}

body {
margin:0;
padding:0;
background-color:#cccccc;
}

a img {
border-width:0;
}

#wrapper {
width: 700px;
height: 565px;
margin-left:auto;
margin-right:auto;
margin-top:5px;
border: 1px solid #808080;
background-color:#ffffff;
}

#sidebar {
width: 123px;
height: 565px;
float: left;
background-image:url(images/sidebar.jpg);
}

#content {
margin-left: 125px;
height: auto;
width:auto;
padding: 30px;
}

h1, h2 {
font:Arial, Helvetica, sans-serif;
font-size: 24px;
font-style:oblique;
color: #555555;
}

h2 {
margin-top:90px;
}

/*** Begin web box rollovers ***/
#w1menu a {
position:relative;
float:left;
height:35px;
width:35px;
border:1px solid;
border-color: #808080;
margin-top: 5px;
margin-right: 5px;
background: url("images/brooke_whole.gif") 0 0 no-repeat;
}

#w1menu a:hover {
background-position: -35px 0;
}

#w2menu a {
position:relative;
float:left;
height:35px;
width:35px;
border:1px solid;
border-color: #808080;
margin-top: 5px;
margin-right: 5px;
background: url("images/lakeo_whole.gif") 0 0 no-repeat;
}

#w2menu a:hover {
background-position: -35px 0;
}

#w3menu a {
position:relative;
float:left;
height:35px;
width:35px;
border:1px solid;
border-color: #808080;
margin-top: 5px;
margin-right: 5px;
background: url("images/velagio_whole.gif") 0 0 no-repeat;
}

#w3menu a:hover {
background-position: -35px 0;
}

/*** Begin corporate box rollovers ***/
#c1menu a {
position:relative;
float:left;
height:35px;
width:35px;
border:1px solid;
border-color: #808080;
margin-top: 5px;
margin-right: 5px;
background: url("images/liveit_whole.gif") 0 0 no-repeat;
}

#c1menu a:hover {
background-position: -35px 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="sidebar"></div>
<div id="content">

<h1>Web Header</h1>
<div id="w1menu">
<a href="#"></a>
</div>
<div id="w2menu">
<a href="#"></a>
</div>
<div id="w3menu">
<a href="#"></a>
</div>

<h2>Corporate Header</h2>
<div id="c1menu">
<a href="#"></a>
</div>
</div>
</div>
</body>
</html>