HTML and CSS

hover background image

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Mar 2007

Posts: 1,429

Reputation: Nichito is an unknown quantity at this point

Solved Threads: 30

Nichito

Offline

Nearly a Posting Virtuoso

hover background image

Feb 19th, 2008

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?

-->sometimes i wanna take my toaster in a bath<--

•

Join Date: Jul 2005

Posts: 154

Reputation: katarey is an unknown quantity at this point

Solved Threads: 20

katarey

Offline

Junior Poster

Re: hover background image

Feb 20th, 2008

Hi there,

Try This Code this May Help you

CSS:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<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>
<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:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<table width="100" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a href="#" class="links">Link</a></td>
  </tr>
</table>
<table width="100" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a href="#" class="links">Link</a></td>
  </tr>
</table>

Regards,
Rahul Dev Katarey

Freelance Web Designer & Developer
Http//www.Katarey.com

•

Join Date: Nov 2008

Posts: 1

Reputation: Ira_Gaines is an unknown quantity at this point

Solved Threads: 1

Ira_Gaines Ira_Gaines is offline

Offline

Newbie Poster

Re: hover background image

Nov 23rd, 2008

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

•

Join Date: Oct 2008

Posts: 89

Reputation: wickedsunny is an unknown quantity at this point

Solved Threads: 4

wickedsunny wickedsunny is offline

Offline

Junior Poster in Training

Re: hover background image

Nov 29th, 2008

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