hover background image

[ndeniche]

i designed some images to put in the navbar... the idea was putting them so that when they're hovered, there is an image change to another image with bthe same design but different colors...

when i pretended to do this i found a serious problem... if i insert the image in the html, there's no way i can change it unless i use javascript (and i'm trying to avoid the excess of javascript)... if i put it as a table background, specifying the cell's width and height, nothing happens, it doesn't even place the image... if i use it as a hyperlink background, the image will be resized to the space needed by the text in the hyperlink...

so, as you can see, i'm in a bit of a problem... i hope you get the idea of what i want to do...

anyone knows how to solve it?

[katarey]

Hi there,

Try This Code this May Help you ;)
CSS:

<style type="text/css">
.links {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	display:block; /*This Cover Full TD */
	background:url(link.png) center top no-repeat; /*This Will Set the Link background */
	height:25px; /*This Will Make Fixes Size Link (Use Image height)*/
	width:100px; /*This Will Make Fixes Size Link (Use Image width)*/
	line-height:25px;
	text-align:center;
	font-size:10pt;
	text-decoration:none;
}
.links:hover {
	background:url(hover-link.png) center top no-repeat;
}
</style>

HMTL:

<table width="100" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a href="#" class="links">Link</a></td>
  </tr>
</table>

Regards,
Rahul Dev Katarey

[Ira_Gaines]

Rahul, you sir are a CSS god amongst men.

Ive been looking around for this exact bit of code for so long, the ability to change my background image when i mouseover a menu bar, and this hits the spot nicely.

I felt compelled to join this site so I could thank you personally. Thanks!

Take care,
Lee

[wickedsunny]

katarey have solved ur problem through css nicely!!! u can avoid to much javascript by using simple roll over option in the dreamweaver i guess. do give it a try to :)

[bpanks]

Thanks a lot for such a wonderful and easy to use CSS trick.
keep it up!!!

-Pankaj
Mumbai

[KadajXII]

GOD! please accept my thanks! ORZ

[riyanm]

check this

css

.imgBox{
    width: 191px;
    height: 191px;
    background: url(img/duck.png) no-repeat;
}
.imgBox:hover {
    background: url(img/peng.png) no-repeat;
}

HTML

<div class="imgBox">

full source code:...Image change on hover

riyan

[almostbob]

I know, replying to long dead posts, this is for Ryanm

current best practice & the google search term for that best practice would be CSS SPRITES
every image carries an overhead of http to control the transfer, it is silly to use 512bytes of http transfer to send two images to be used as background, when most of those images are smaller than the transfer protocol.
imagine a cartoon strip or film,
stitch all your small images together as a sprite and display the chosen part for each purpose. 1 image instead of example 20, is 10k smaller for a page load, the total size of the image is the same, but it is only transferred once

.mainlogo {width:66px;height:74px;background:url('./pics/logosprite.png') -68px 0;}
.mainlogo:hover {background:url('.pics/logosprite.png') 0 0;}