i searched on google and all the tutorials and samples that came up aren't exactly what i'm looking for.

i've been using javascript to have rollover images for buttons but i know its well over due to be using CSS instead and its a lot cleaner/faster.

if someone can point me in the right direction i'd greatly appreciate it....thx

9/25/2006 6:09:20 PM

what specifically are you trying to do, since none of the tutorials help?

9/25/2006 6:16:35 PM

most of the stuff i found uses class handler for sorted/unsorted lists and then creates a sub class using a and a:hover

example....

menulist a
menulist a:hover


What i'm trying to do is have an image for a button/link and when you rollover it with the mouse it changes the image to another image.

similar to the a and a:hover with basic text but using images instead

[Edited on September 25, 2006 at 6:18 PM. Reason : asdf]

9/25/2006 6:16:52 PM

<style type="text/css">
#menulist a {
background-image:url("image1.jpg");
width:200px;
height:40px;
text-decoration:none;
}
#menulist a:hover {
background-image:url("image2.jpg");
width:200px;
height:40px;
text-decoration:none;
}
</style>
<span id="menulist"><a href="#">test</a></div>

9/25/2006 7:04:50 PM

^does that work for multiple buttons? lets say if i change menulist to button01 and then rewrite it for button02 etc?

then each span would be

span id=button01

span id=button02

9/25/2006 7:06:52 PM

Yes, sir.

9/25/2006 7:47:32 PM

here it is a bit shorter, and for multiple items:

<style type="text/css">
#menulist01 a {
background-image:url("image01.jpg");
width:200px;
height:40px;
text-decoration:none;
display:block;
text-indent:20px;
line-height:40px;
}
#menulist01 a:hover {
background-image:url("image01-hover.jpg");
}
#menulist02 a {
background-image:url("image02.jpg");
width:200px;
height:40px;
text-decoration:none;
display:block;
text-indent:20px;
line-height:40px;
}
#menulist02 a:hover {
background-image:url("image02-hover.jpg");
}
</style>
<span id="menulist01"><a href="#">Test</a></span>
<span id="menulist02"><a href="#">Test2</a></span>


you'll need to add the display:block, i missed it by mistake the first time, also changed </div> to </span>, also added indent and line-height

[Edited on September 25, 2006 at 8:13 PM. Reason : code]

9/25/2006 8:06:12 PM

bump

8/17/2009 9:32:13 PM

you can make it a bit cleaner with a menu item class and put the global styles in there... but you should have what you need already ITT

8/17/2009 9:33:51 PM

Quote :

"9/25/2006"

8/17/2009 9:34:53 PM

This...isn't working for me.

I have this embedded in another <div> which is a header image for the site logo. The non-hovered background image shows up in the spot I intend for it to show up but the link itself shows up well below here.

When I hover over the text (which I don't actually want there, the image itself is the "text") the hovered background appears like I expect. I'm just a bit stumped on how to get these to line up together and work properly.

If I pull the span outside of the header div, they show up on top of each other but the text is there and the rolled over image is only as large as the space the text takes up.

I have this in the css

#services {
   width: 119px;
   height: 28px;
   display:block;
   background: url(images/services_button_normal.png) no-repeat center;  
}

#services a:hover {
   width: 119px;
   height: 28px;
   background: url(images/services_hover.png) no-repeat center;
}

8/17/2009 9:49:02 PM

1. I'm pretty sure you're just trying to troll us
2. In light of #1, I only glanced at your problem, I'll suggest the following which may help out.
3. Why are you using a span (an inline element) as a block element? Just use a div.
4. Better yet, don't wrap your anchor in anything, just give it the services ID.
5. If this isn't actually troll bait, I'll look back over it.

[Edited on August 17, 2009 at 10:03 PM. Reason : OK, I actually read it this time. I don't get what you're trying to do. Give us more HTML.]

8/17/2009 10:00:52 PM

I'm trying to do exactly what Golovko wanted to do years ago. And I was using the code Prospero suggested where he is using a span.

I'll admit, I've never taken the time to really understand the DOM and the concepts of web programming, so I have no idea what span as an inline element versus a div block element means. I've hacked around with it enough to make it do things that I want sometimes, sometimes not.

I had it as a div originally and I get the same behavior. I'm pretty sure in the googling and reading I did I found something where the link part of what I am trying to do doesn't behave like you'd expect, which seems to be part of the problem. And I've been chatting with agentlion and he suggest something I thought of but was too pissed off to try.

So, currently I have this in the css for the site logo (ignore the "hover part of the filename, I'm not trying to do anything with this for hovering)

#header {
	width: 800px;
	height: 280px;
	margin: 0 auto;
	background: url(images/header_no_hover.png) no-repeat  center;  
}

<div id="header" >
<div id="services"><a href="http://local.testserver.com/services" >This is a test</a></span></div>
</div>

8/17/2009 10:16:00 PM

If I understand what you're trying to do, this should do it:

<html>
<head>
<style type="text/css">
	a {
		display: block;
		width: 100px;
		height: 100px;
		background: url('http://www.brentroad.com/images/site.gif') top left no-repeat;
		text-indent: -9999px;
		}
	a:hover {
		background-image: url('http://www.brentroad.com/images/logo.gif');
		}
</style>
</head>

<body>
<ul>
	<li><a href="#">Test</a></li>
</ul>
</body>
</html>

8/17/2009 10:32:55 PM

bttt

8/17/2009 11:44:37 PM

haha beat ya to it bobby

8/17/2009 11:45:11 PM

hahahhaha

as you can see, i don't bother to check these things out.

8/17/2009 11:52:03 PM

So?

8/19/2009 9:43:20 AM

The Web 2.0 thing to do is to use one image consisting of two image states, then toggle the alignment of the image relative to the element when the hover state changes.

[Edited on August 19, 2009 at 9:46 AM. Reason : Fewer HTTP requests!]

8/19/2009 9:46:02 AM

The kids call it a sprite.

8/19/2009 10:28:01 AM

[Edited on August 19, 2009 at 10:41 AM. Reason : a]

8/19/2009 10:40:11 AM

Quote :

"So?"

Were you asking if I had it working?

I have something working now with text and am able to change the color and background for hover. I couldn't get the two images to work properly with the previous CSS I had (or with what you gave) but have since found some other info and have it generally working now. I'm gonna go back and see if I can make it work entirely with images.

[Edited on August 19, 2009 at 10:54 AM. Reason : .]

8/19/2009 10:53:51 AM

What was the problem with what I posted?

8/19/2009 10:57:17 AM

Umm, I'm not sure exactly, but I was having a problem where it was putting the non rollover image in the correct place but it was putting the hover image far outside of where it should be contained. It wasn't just your code, it was various other examples I found. It works great just using text and swapping the background color or image, but when I try to use two images in the way I was using it, shit wasn't working right. In the middle of all my reading, I found some stuff that said there were issues like I was experiencing and there was a fix, but at that point I was too tired and too pissed off to really comprehend what I was reading and went to bed.

This is generally working

#navbar .navabout a, #navbar .navabout a:hover{
   height:36px;
   line-height:36px;
}
#navbar .navabout a span, #navbar .navabout a:hover span{
   color:#35FBFF;
   height:36px;
   line-height:36px; 
}
#navbar .navabout a:hover span{
   background-image: url(images/about_hover.png);
   color:#F0F;
}

<div id="navbar">
<span class="inbar">
<ul>
   <li class="navservices"><a href="services.php"><span>Services</span></a></li>
   <li class="navgallery"><a href="gallery.php"><span>Gallery</span></a></li>
   <li class="navblog"><a href="blog.php"><span>Blog</span></a></li>
   <li class="navabout"><a href="about.php"><span>About</span></a></li>
</ul>
</span>
</div>

8/19/2009 11:24:35 AM

Word

The div and spans in your markup are completely unnecessary.

[Edited on August 19, 2009 at 11:36 AM. Reason : ]

8/19/2009 11:32:29 AM

Invalid, too. Inline elements (e.g. SPAN) can't contain block-level elements (e.g. UL).

8/19/2009 11:43:46 AM

You guys mind giving me a quick tutorial on span? I see it used a fair amount, what is its purpose?

8/19/2009 12:02:33 PM

SPAN is just a generic inline element with no real inherent assumptions about how it should be formatted. You use it when you have a need for adding inline structure or meaning to a document and no suitable element type.

For instance, let's say you're compiling a document with a list of times that John Quincy Adams is mentioned in history books. You're going to include a summary of the context of the mention, a brief quote illustrating it, and a citation of the source. A typical entry in that document might look like this:

In a chapter of his memoirs, Phillip Harper recalled Adams being a "cantankerous and obtuse opponent" in the legislature (Memoirs 79).

<p>In a chapter of his memoirs, Phillip Harper recalled Adams being a "cantankerous and obtuse opponent" in the legislature (<cite>Memoirs 79</cite>.</p>

<p>In a chapter of his memoirs, Phillip Harper recalled Adams being a <span class="quote">"cantankerous and obtuse opponent"</span> in the legislature (<cite>Memoirs 79</cite>.</p>

8/19/2009 12:16:52 PM

Um, so back to Ernies statement, how are the divs/spans unnecessary?

Nevermind, I see, I can move the style elements out of inbar into navbar, and make the ul id="navbar"



[Edited on August 19, 2009 at 12:43 PM. Reason : .]

err, no, that doesn't behave properly

[Edited on August 19, 2009 at 12:50 PM. Reason : .]

8/19/2009 12:39:52 PM

Why don't you show us what you have formatted the way you want it in the wild? We can adjust the mark-up from there. It's always easier with a live example.

8/19/2009 12:58:56 PM

true enough. css raised in captivity can rarely survive when released to live on its own.

[Edited on August 19, 2009 at 1:03 PM. Reason : a]

8/19/2009 1:03:38 PM

Quote :

"Um, so back to Ernies statement, how are the divs/spans unnecessary?"

Because they don't do anything.

http://csscreator.com/?q=divitis

8/19/2009 1:09:27 PM

Alright, last question. I have it all mostly working except one thing.

So I created these images that have rounded corners to display when the link is hovered. How can I get the size of each individual list item to auto adjust to the size of these images? I think I can figure out how to get the text centered in them after that, but I'm having a little bit of trouble with this piece.

It probably isn't helping that my CSS is jacked up, and that I don't know attributes and styles without having to dig through everything.

8/19/2009 3:04:33 PM

Quote :

"How can I get the size of each individual list item to auto adjust to the size of these images? I think I can figure out how to get the text centered in them after that, but I'm having a little bit of trouble with this piece."

You can't if you're using the images as backgrounds -- not without Javascript, at least.

8/19/2009 3:34:26 PM

Excellent.

8/19/2009 3:36:12 PM

what are you even trying to accomplish

8/19/2009 3:37:47 PM

this guy has amazing CSS-only menus, including some, i'm sure i've seen in his RSS feed, that have auto-adjusting widths
http://www.cssplay.co.uk/menus/

[Edited on August 19, 2009 at 3:44 PM. Reason : link]

8/19/2009 3:43:54 PM

Quote :

"The Web 2.0 thing to do is to use one image consisting of two image states, then toggle the alignment of the image relative to the element when the hover state changes."

agentlion had implemented just this on one of his sites and I did it for mine. It definitely does what I wanted and works a helluva lot better than the alternatives.

I think if you would have put that in layman terms I would have hit on it right away. Like

The Web 2.0 thing to do is have 1 .jpg, .gif, .whatever that has both your non hover and hover image in the same file, both the same size and use the css hover feature to shift which image you want to see when the link is hovered over. So if the link is 100px x 50px, you'd have a 100px x 100px single file and move the background up and down by 50px on hover

8/22/2009 1:16:58 PM

the technique is called CSS sprites

8/22/2009 3:51:58 PM

I didn't use any technical jargon beyond what anyone trying to use CSS in that fashion should know in the first place. I'm not about to double or triple the length of my sentence and sound like I don't know what the hell I'm talking about when I can be concise. :/

8/23/2009 10:35:50 AM

Quote :

"I didn't use any technical jargon beyond what anyone trying to use CSS in that fashion should know in the first place."

Obviously someone trying to use CSS in that fashion would know that jargon and wouldn't be asking questions about how to do it on a message board in the first place.

8/23/2009 11:52:24 AM

That's real good, argue with people giving you advice.

8/23/2009 3:19:09 PM

I don't know why you'd ever want feedback on your tutelage.

8/23/2009 3:54:38 PM

more like cssplagarize.co.uk

8/23/2009 8:38:23 PM

it's not like HTML/CSS menus are generally protected IP. There are hundreds of standard configurations. I figure he's collecting them into one place, cleaning them up, and probably adding his own touches.

he's just added a cool set of "fisheye" menus that expand if you mouse over them slowly. no idea if they're original, but they're really nice
http://www.cssplay.co.uk/menus/fisheye.html
http://www.cssplay.co.uk/menus/fisheye2.html
http://www.cssplay.co.uk/menus/fisheye6.html

other menus and photo galleries
http://www.cssplay.co.uk/menu/fisheye3.html
http://www.cssplay.co.uk/menus/droplist-image.html
http://www.cssplay.co.uk/menus/pro-droplistv2.html
http://www.cssplay.co.uk/menu/filmstrip-v2.html
http://www.cssplay.co.uk/menus/anywidth-dropline-all-center.html
http://www.cssplay.co.uk/menus/mini-pages-v2.html (looks similar to something Yahoo uses, but I doubt Yahoo's is all CSS)
http://www.cssplay.co.uk/menus/triple-block-hover.html

8/25/2009 6:00:01 PM

Wow. So I finally have things more or less like I like them (the website in general, not just the rollovers), looks great in firefox, looks like shit in IE6. Not even close. I'm using PNGs and floats a fair amount. Should I just start looking at what IE does/doesn't support and go from there?

9/2/2009 4:59:14 PM

since you've come this far i'm sure you know about http://www.w3schools.com/

but if not they have decent browser compatibility charts on most everything

9/2/2009 5:20:52 PM