5 replies [Last post]
mediamole
mediamole's picture
Offline
Regular
UK
Last seen: 8 years 9 weeks ago
UK
Timezone: GMT+1
Joined: 2007-04-11
Posts: 41
Points: 19

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:

Demo

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?

Thanks for help.

Garry
http://www.mediamole.net

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 47 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

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;
}

mediamole
mediamole's picture
Offline
Regular
UK
Last seen: 8 years 9 weeks ago
UK
Timezone: GMT+1
Joined: 2007-04-11
Posts: 41
Points: 19

Yeah I had, but I thought

Yeah I had, but I thought there's not full support for IE6?

Thanks for help.

Garry
http://www.mediamole.net

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 3 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

mediamole wrote: Yeah I had,

mediamole wrote:

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.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

mediamole
mediamole's picture
Offline
Regular
UK
Last seen: 8 years 9 weeks ago
UK
Timezone: GMT+1
Joined: 2007-04-11
Posts: 41
Points: 19

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

Thanks for help.

Garry
http://www.mediamole.net

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 47 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

you might be looking for some

you might be looking for some image replacement techniques.