css rollover techniques [Archive]

Click to See Complete Forum and Search --> : css rollover techniques

GJPG5

05-12-2005, 08:32 PM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">

</style>
<title>CSS Rollover
</title>
</head>
<body>
<p>Hover your mouse over the W3C image to see it change; you also need a Transparent *.gif called: dotclear.gif</a>
<div>
<p>
<a href="#"><img src="dotclear.gif" width="88" height="31"
border="0" /></a>
</p>
</div>
</body>
</html>

I found this off of an old thread and am wondering if this is something that is still used to deal with CSS rollovers, also, if you have an good links to articles that discuss using css to create a rollover effect, please share.

graphic below shows a bit of what I am trying to accomplish. the main div is a holding space for a graphic, which basically is an image and then text aligned around it in that pattern, so to speak. I would like that "pinwheel" image to appear each time the cursor is moved over it, and am wondering if I can use that above block of code to achieve that.

My assumption of how to approach it is this, please tell me if my thinking is correct:

A> I need to create 4 classes attributed to selectors, ie a:/hover.1, a:/hover.2, etc.. so that it knows which layer to reveal when hovered over.

B>I need to create 9 separate DIV classes, 1 for the nest, 4 for the hidden pinwheels and the other 4 for the areas over the "buttons" that are actually part of the background graphic.

is this the correct way to think about it? also, am I using the terms right? is this even possible with CSS?
it seems mildly complex, but that is why I am a certified web newbie.

BonRouge

05-12-2005, 10:55 PM

Hi.

Here's a (temporary) link (http://bonrouge.com/test/rollover4.htm) to one way of doing it. Here's the code :
<!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=UTF-8" />
<title>rollover...</title>
<style type="text/css">
ul, li {
margin:0;
padding:0;
list-style:none;
position:relative;
}
a {
font-weight:bold;
color: #6600FF;
text-decoration:none;
}
a:hover {
color:red;
}
#menu {
width:150px;
position:relative;
margin:auto;
}
#menu li.odd a {
padding-left:20px;
}
#menu li.even a {
padding-right:20px;
}
#menu a:hover {
background-image:url(wine20.jpg);
background-position:left;
background-repeat: no-repeat;
}
#menu li.even {
text-align:right;
}
#menu li.even a:hover{
background-position:right;
}
img {
height:1px;
width:auto;
border:0;
margin-top:-1px;
}
</style>
</head>
<body>
<ul id="menu">
<li class="odd"><a href="#">ONE</a><img src="wine.jpg" alt="wine" /></li>
<li class="even"><a href="#">TWO</a><img src="wine.jpg" alt="wine" /></li>
<li class="odd"><a href="#">THREE</a><img src="wine.jpg" alt="wine" /></li>
</ul>
</body>
</html>

I found this off of an old thread and am wondering if this is something that is still used to deal with CSS rollovers, also, if you have an good links to articles that discuss using css to create a rollover effect, please share.
I don't really discuss it, but here are a couple more examples :
http://bonrouge.com/br.php?page=rollover
http://bonrouge.com/br.php?page=rollover2

A> I need to create 4 classes attributed to selectors, ie a:/hover.1, a:/hover.2, etc.. so that it knows which layer to reveal when hovered over.
Not exactly... for that, you just need two classses - for the left and the right.
It's a menu, which is a list, so you use an unordered list. the li's have classes - not the hover.

B>I need to create 9 separate DIV classes, 1 for the nest, 4 for the hidden pinwheels and the other 4 for the areas over the "buttons" that are actually part of the background graphic.
erm... no. See above and the code in my example.

it seems mildly complex, but that is why I am a certified web newbie.
Nothing wrong with being a newbie - certified or not. We're all here to learn.

I hope this helps.

GJPG5

05-12-2005, 11:29 PM

this is helpful,

i am going to try some things out the first will be to approach this a slightly different way (using dreamweaver), cause they make it easy to do a rollover that way, so i'll tackle it that way right now, then perhaps i can clean things up...

BonRouge

05-12-2005, 11:40 PM

i am going to try some things out the first will be to approach this a slightly different way (using dreamweaver), cause they make it easy to do a rollover that way, so i'll tackle it that way right now, then perhaps i can clean things up...
Not a good idea. Don't let Dreamweaver write your code for you - it's not very good at it. You'll probably find you end up with lots of javascript which isn't really what you want, is it?

GJPG5

05-13-2005, 09:03 AM

well, I understand that alot of people turn javascript off. The audience I am targetting will most likely have all up to date browsers as well as javascript enabled, but I will try to do it in CSS first.