Link images

How to do Hover with different image

[4css]

A site I am doing right now the client insists on using the font that is in their header/logo, which is one that isn't on everyone's machine.

I informed them that they would need images to do this. They then decided that they want different colors, so the a:hover would be a different image from the link image.

If anyone can provide links to information regarding this I would appreciate it greatly!

Thanks in advance!
4~css

[coopersita]

#header a:link, #header a:visited {background: url(back1.jpg)}

#header a:hover, #header a:active {background: url(back2.jpg)}

Hope this helps...

[doodlebee]

So they just want two images - one is a "hover" state? Do you not want to use javascript, and instead, rely solely on CSS? ("cause I have an excellent, simplejavascript that would work perfectly for this - if someone has javascript turned off when visiting, they just won't see the "rollover" state)

But for CSS purposes, for purposes of example, I'll use "image1.gif" for the "off" state, and "image2.gif" for the "on" or "hovered" state.

<div class="rollover">
<a href="#"><img src="image1.gif"></a>
</div>

CSS:

.rollover {
height: 100px;
width: 100px;
margin:0;
padding:0;
background-image:url("image2.gif");
}
.rollover a {
display:block;
}
.rollover img {
width:100px;
height:100px;
border: 0;
}
.rollover a:hover img {
visibility:hidden}

So, basically, you're creating a div that's the size of the image in question - no borders, no padding - and the background set to whatever the "on" or "hover" state of the image would be. When the page is loaded, it will display the image in the "off" state, but when hovered over, the image would "disappear", leaving the viewer to see the background image - which is the image in the "on" state.

Of course, mess with the widths/height, margins/padding, floats/display:blocks to your liking. :) Otherwise, you get the idea!

HTH!

[doodlebee]

coopersita -

I've used your method before, but in my experience, you had to place a transparent image within the <a> tags and overlay the background to get it to function - as there's no real text or anything in there to trigger a "hover" state.

Like I said, that's been my experience - but if you found a way to make something that simple work with no text or images between the <a></a> tags, I'd love to know! :)

[coopersita]

I use the method I showed in combination with text, so in the link there is text, but the background changes. It's a simple effect, but I like quite a lot.

I also have used it in combination with image replacement, so it's more like:

#menu a
{
display: block;
/*to remove text*/
text-indent: -9000px;
/*the height of the images*/
height: 20px;
}

#about
{
background: url(about.gif) no-repeat;
width: 49px;
}

#home
{
background: url(home.gif) no-repeat;
width: 47px;
}

#contact
{
background: url(contact.gif) no-repeat;
width: 66px;
}

#gallery
{
background: url(gallery.gif) no-repeat;
width: 64px;
}

#about:hover
{
background: url(aboutover.gif) no-repeat;
}

#home:hover
{
background: url(homeover.gif) no-repeat;
}

#contact:hover
{
background: url(contactover.gif) no-repeat;
}

#gallery:hover
{
background: url(galleryover.gif) no-repeat;
}

The HTML:

<div id="menu">
<ul>
<li><a href="#" id="about">About</a></li>
<li><a href="#" id="gallery">Gallery</a></li>
<li><a href="#" id="contact">Contact</a></li>
<li><a href="#" id="home">Home</a></li>
</ul>
</div>

If flickering is evident when doing the hover, then I combine both states (normal and hover) into one image and then do background position when in hover state.

PS: if support for IE 5 is a concern, then you may need an extra span to apply the text indent to:
<li><a href="#" id="about"><span>About</span></a></li>
#menu a span {display: block; text-indent: -9000px;}

[4css]

Thanks for the replies. I would prefer not to use Javascript if I don't have to, just my preferences.

There are 6 links, giving me 12 images. Each image has the name in normal and in hover color.

Looks like the one will work ok, and you can still use the UL to do this without a problem? Just a matter of a ton of id's?

[coopersita]

Yes, you need the ids, since each link has its own background image...

Being on a list doesn't really have any effect on this. It doesn't need to be on a list at all. I just usually put my menus on lists...

[4css]

I also use the list for the menu, which is why I had questioned it. Thanks, appreciate your help greatly.

Have a great day!