Thu, 2009-10-29 13:28
Hi,
I currently have a H1 tag that has a background image sitting on top of the text, which is clickable as a link
<h1 title="Fresh Flames"><a href="http://www.freshflames.com">Fresh Flames - Designer Clothing<span></span></a></h1>
Website is here:
My CSS looks like this:
#branding h1 { width:144px; float:left; margin:4px 0 -3px 14px; padding:0; text-indent:-9999px; height:47px; position: relative; } #branding h1 a { display: block; text-decoration: none; cursor: pointer; } #branding h1 span { height:47px; position: absolute; top: 0; left: 0; background:url("fresh-flames-branding.png") no-repeat top left; width:144px; }
My client now wants to make the image change when the user hovers over the logo.
I was wondering what approach someone could suggest I could take, which is fully supported by most browsers, and is code light. (As I've used CSS Sprite method and it can be quite code heavy, so I'm looking for the most supported and easy solution)
Can anyone advise?
Thu, 2009-10-29 15:45
#1
Have you tried Pseudo-classes
Have you tried Pseudo-classes yet? Try something like this...and dont forget to validate your code first.
#branding h1 span:hover { height:47px; position: absolute; top: 0; left: 0; background:url("hover.png") no-repeat top left; width:144px; }
Thu, 2009-10-29 19:14
#2
Yeah I had, but I thought
Yeah I had, but I thought there's not full support for IE6?
Thu, 2009-10-29 20:14
#3
mediamole wrote: Yeah I had,
Yeah I had, but I thought there's not full support for IE6?
Then put the background image in the anchor tag and use a:hover which IE fully supports.
Thu, 2009-10-29 21:17
#4
That would be fine. But the
That would be fine. But the link has to solely be the image, and not text. I planned to use text-indent to hide the text. If I do your suggestion, IE6 wouldn't wouldn't see the link as clickable without text
Thu, 2009-10-29 21:54
#5
you might be looking for some
you might be looking for some image replacement techniques.