Change image on hover?

Hello..

In CSS I am trying to get an image on my website and have a slightly different image when the mouse hovers over it. So have the first image changed with the second image (same position) on mouse hover.

Could somebody explain how I could do this, which code shall I put in HTML and CSS for this to work? Please explain in simple way, I am very new to this, thanks..

 

<style type="text/css">
#image {
	background: url('IMAGE-NAME-HERE');
	height: 16px;
	width: 16px;
}
#image:hover {
	background: url('IMAGE-NAME-HERE');
	height: 16px;
	width: 16px;
}
</style>

<div id="image"></div>

Code (markup):

 

Barry67's technique works, but requires two separate files meaning more handshakes to the server - and doesn't 'cache' the hover state so there's a 'delay' when you first mouseover an element.

My preferred approach is to use one image where your two 'states' are one over the other. You can then just slide the background around.

Also, hover on DIV doesn't work in IE, which is why usually you set it on an ANCHOR. Oh, and Barry, there's no good reason to restate width and height on the hover state - it inherits

<a href="#"
	title="title for accessibility"
	class="hoverLink"
></a>

Code (markup):

.hoverLink {
	width:160px
	height:32px;
	background:url(images/button.png) 0 0 no-repeat;
}

.hoverLink:active,
.hoverLink:focus,
.hoverLink:hover {
	background-position:0 -32px;
}

Code (markup):

Make the image 160x64, we only show the top 32px unhovered and then just slide the background up to reveal the other half of the image! You can also put text in the anchor since

If you are ONLY going to be using the graphic, a more accessible version should use a technique like gilder-levin to put text UNDER the image for people who have images disabled. Just add a dummy span.

<a href="#"
	title="title for accessibility"
	class="hoverLink"
>Title<span></span></a>

Code (markup):

.hoverLink {
	position:relative;
	width:160px
	height:32px;
	overflow:hidden;
}

.hoverLink span {
	position:absolute;
	top:0;
	left:0;
	width:160px;
	height:64px;
	background:url(images/buttons.png) 0 0 no-repeat;
}

.hoverLink:active,
.hoverLink:focus,
.hoverLink:hover {
	color:#000; /* IE will 'stick' in one state without a color change */
}

.hoverLink:active span,
.hoverLink:focus span,
.hoverLink:hover span {
	top:-32px;
}

Code (markup):

That version allows you to change the background-position for a bunch of separate buttons - this way you can make ten, twenty or even a hundred different buttons that share this code using only one image - all you need to change is the background-position to point at the top left corner of each button as appropriate.

This rewrite I did for someone here on digital point a while back is an excellent example of that in action:

http://www.cutcodedown.com/for_others/2kungfu4u/template.html

does it all using just one image.

http://www.cutcodedown.com/for_others/2kungfu4u/images/mainMenu.png

I just slide the background to the appropriate corner, then slide the span for the hover state 'revealing' the other half of the image.

 

It's funny you mention this. Just today css-tricks released screencast tutorial showing how to do this effect with z-index and absolute positioning
http://css-tricks.com/new-screencast/

 

Because of course it SO warrants the use of Z-index.... Oh wait, no it doesn't.

I always laugh when I see the hoops some people jump through to pull off these kinds of effects. The span in their link shouldn't be nested, it would be SO much easier to implement with it as a sandbag instead of a wrap.

Much less those are content images, so they should be IMG tags in the markup NOT CSS. CSS images are for presentational images (borders, images instead of heading text or menu buttons, etc) NOT for content. That way CSS off those content images would still be shown.

But what does one expect from someone still writing Tranny without media types on their links, and inlining a 200+ byte line of useless CSS nonsense when they have a perfectly good external sheet... or even puts the same class on four anchors in a row when they have a perfectly good ID on the DIV around them... Much less it's a list of images... Don't we have TAGS for lists?

Just saying...

 

Well, as it turns out, I made a mistake as I didn't realize that the original poster just wanted a simple hover effect over the SAME image in the same position. The demo for the effect (and tutorial) I was referring to is here http://css-tricks.com/examples/CSSImageSwitcher/ Obviously, that is quite a different effect than the one the poster had in mind. Although, based on your reply I have a feeling you are familiar with css-tricks site and its creator....

 

Actually, never heard of them until you linked - my above statement being based on twenty second analysis of view-source on JUST the markup for that demo.

Said demo being broken in IE6 & 7 too.

 

Try using dreamweaver it makes these things easy and gives you the code

 

Oh yes, because their rubbish code is SO worth using. That steaming pile of crap has NO business being used for any sort of web development tasks - in particular their example code that WASTES javascript for the STUPIDEST things like rollover effects.

I those stupid malfing mm_ javascripts, I automatically know the person who wrote the page has no **** clue what they are doing.

As a recently departed friend was fond of saying, "The only thing about Dreamweaver that can be considered professional grade tools are the people promoting it's use."

 

You can put this code on html page where you want to change your bg image:
<div class="changebg"><a href="#">&nbsp;</a></div>

this code for css section:

<style type="text/css">
.changebg  {
margin:0px;
padding: if you want;
background: url (image location) no-repeat;
}

.changebg  a{
width: image width size;
height: image height;
display: block;
background: url (previous image location) no-repeat;
}

.changebg  a:hover{
background: url (second image location) no-repeat;
}

</style>

Code (markup):