5 replies to this topic

[Xav]

OK, guys.

Welcome to Stav Cinemas

See that "Book Ticket" button? Right, roll over it with the mouse. It should turn red and the text should enlarge. Like from this:



... into this:



The code I use to make the transition is this:

#badge

{

	margin: 0 auto;

	width: 128px;

	height: 128px;

	background: url('book.gif') no-repeat 50% 0%;

	text-align: center;

}

#badge:hover

{

	background-image: url('book2.gif');

}

You can probably guess that "badge" is the ID of the div that contains the image.

The HTML is simple:

<div id="badge"><a href="?page=book"><img src="badgelink.gif" style="height: 128px; width: 128px;border:none;" alt="Book a Ticket" /></a></div>

The only thing is - nothing happens in IE6. Any ideas why?

[Xav]

Ditching IE6 isn't really an option, because our school uses it and it's a school project. It never occured to me that the CSS hover was the problem, as I've used a:hover before without any problems. Thanks for the link, I'll try it.

[Xav]

Update: Jordan, your solution uses the Prototype JS Framework. Is it really worth an extra 40Kb worth of library just for this? Got anything... smaller?

[Xav]

Great, I'll try it. And yes, I just found out now that it's only anchors that IE6 supports with pseudo-classes.