Programming Forums > Web Development and Design > HTML / XHTML / CSS

thechristelegacy · Sep 30th, 2004, 6:26 PM

Alright alright, to understand my probllem, you need to first see my example page.

http://www.bigtonyc.com/info.htm (the three links don't go anywhere). Anyway, notice how when you mouse over the buttons the background changes color (won't work in netscape). What I want to do is use an image as the background when moused over. The only catch is I want each button to be a differnt image. Here is the CSS I already use.

(Toggle Plain Text)

<body>
<style>
body{background-color:#260973;}
A.menulink {
background-color:#1e04b2;
display: block;
width: 198px;
text-align: left;
text-decoration: none;
font-family:arial;
font-size:12px;
color: #11e1ff;
BORDER: none;
padding:5px;
border: solid 1px #000000;
}

A.menulink:hover {
border: solid 1px #6100C1;
/*background-image: url('bgdesert.jpg');*/
background-color: #11e1ff;
color: #1e04b2
}

</style>
<script>
var ns4class=''
</script>
<center>
<table border="0" width=198>
 <tr>
  <td width="100%" bgcolor="#260973"><font color="##11e1ff"><center>
 <b>-Index-</b></center></font><br /></td>

 <tr>
  <td width="100%"><a href="am.htm" class="menulink" class=&{ns4class};> - About Me</a></td>
 </tr>
 <tr>
  <td width="100%"><a href="contact.htm" class="menulink" class=&{ns4class};> - Contact</a></td>
 </tr>
 <tr>
  <td width="100%"><a href="thoughts.htm" class="menulink" class=&{ns4class};> - Random Thoughts</a></td>
 </tr>
</table>
</center>

Ok the line commented out works, but only for one image. What I want to do is have a seperate image for each mouseover.

Is there a way to do this without writing a whole new CSS block for each button.

Maybe with an ID link or something? I'm sorry, it's harder than it seams to explain a programming problem, lol, but if you have any questions please ask so I can clariffy it better.

Black.Cat · Oct 1st, 2004, 12:14 AM

I'm kinda a newbie here so sorry if I mislead you... I don't know if you can do that with CSS honestly, atleast I don't know how. If you know a little Javascript I think you could do something like this:

function swap(td_name, image)
{
document.getElementById(td_name).style.background=image;
}

some junk later:

<td onMouseOver="swap('td_1','url(src)')" id="td_1">&nbsp</td>

<td onMouseOver="swap('td_2','url(src)')" id="td_2">&nbsp</td>

Sorry if you already know this, and sorry if its not helpfull. Hopefully somebody else can give a better response.

Black.Cat · Oct 1st, 2004, 12:45 AM

I just made this... I think it doesn't something like what you want... hope it helps

<html>
<head>
<style>
a
{
text-decoration: none;
border: solid 1px red;
background-image:;
color: blue;
}

a:hover
{
border: solid 1px blue;
text-decoration: none;
color: red;
}

</style>
<script language="javascript">

function bgswap(name, src)
{
document.getElementById(name).style.background = src;
}

function bgoff(name)
{
document.getElementById(name).style.background = "";
}

</script>
</head>
<body>

<table>
<tr>
<td>Hello. My name is Erik.</td>
</tr>
<tr>
<td>Hello. My name is Erik.</td>
</tr>
</table>
</body>
</html>

thechristelegacy · Oct 1st, 2004, 3:29 PM

I'l take those into consideration, although I'm trying to stay away from Javascript as much as possible. Any other ideas?

Ooble · Oct 1st, 2004, 4:06 PM

If you want the table background colour to change, you need to use JavaScript.

thechristelegacy · Oct 1st, 2004, 10:54 PM

I already have the background color changing, but instead of colors, I want to use differnt images.

EdSalamander · Dec 15th, 2004, 2:33 AM

It'll work just fine the way your doing it. And your right, the trick is to give each link a unique ID, like this...

(Toggle Plain Text)

<style type="text/css">
body{background-color:#260973;}
a.menulink {
	background-color:#1e04b2;
	display: block;
	width: 198px;
	text-align: left;
	text-decoration: none;
	font-family:arial;
	font-size:12px;
	color: #11e1ff;
	BORDER: none;
	padding:5px;
	border: solid 1px #000000;
}

a.menulink:hover{
	border: solid 1px #6100C1;
	background-color: #11e1ff;
	color: #1e04b2
}

a#desert:hover {
	background-image: url('bgdesert.jpg');
}

a#forest:hover {
	background-image: url('bgforest.jpg');
}

a#swamp:hover {
	background-image: url('bgswamp.jpg');
}

td {width:100%}

</style>

<table border="0" width=198 align="center">
 <tr>
  <td bgcolor="#260973" align="center" style="color:#11e1ff; font-weight:bold">
  -Index-
  <br />
	</td>
 </tr>
 <tr>
  <td><a href="am.htm" class="menulink" id="desert"> - About Me</a></td>
 </tr>
 <tr>
  <td><a href="contact.htm" class="menulink" id="forest"> - Contact</a></td>
 </tr>
 <tr>
  <td><a href="thoughts.htm" class="menulink" id="swamp"> - Random Thoughts</a></td>
 </tr>
</table>

Note the only difference is that ID's are marked with a '#' (pound sign) instead of a '.' (period) in the CSS block. Oh, and don't forget that IDs have to be unique. Some browsers throw a fit if they aren't.

B)

P.S. I took the liberty of cleaning up your code a bit, hope you don't mind.

EdSalamander · Dec 15th, 2004, 2:15 PM

I thought of a possible problem with this non-JScript method though. I don't think CSS preloads you background images for you. This means that when the client first mouses over one of you links they'll be forced to wait for the new image to download before it'll change, especially if they're using a slow connection. On the other hand, if CSS does preload, then this won't be a problem...

Oct 1st, 2004, 12:45 AM	#3
Black.Cat Newbie Join Date: Sep 2004 Posts: 12 Rep Power: 0	I just made this... I think it doesn't something like what you want... hope it helps <html> <head> <style> a { text-decoration: none; border: solid 1px red; background-image:; color: blue; } a:hover { border: solid 1px blue; text-decoration: none; color: red; } </style> <script language="javascript"> function bgswap(name, src) { document.getElementById(name).style.background = src; } function bgoff(name) { document.getElementById(name).style.background = ""; } </script> </head> <body> <table> <tr> <td>Hello. My name is Erik.</td> </tr> <tr> <td>Hello. My name is Erik.</td> </tr> </table> </body> </html> __________________ <span style='color:green'>The learned fool writes his nonsense in better languages than the unlearned; but still it is nonsense. - Benjamin Franklin</span>

Oct 1st, 2004, 4:06 PM	#5
Ooble I eat cake for breakfast. Join Date: Jul 2004 Location: In my box. Posts: 4,434 Rep Power: 9	If you want the table background colour to change, you need to use JavaScript. __________________ Me :: You :: Them

Dec 15th, 2004, 2:33 AM	#7
EdSalamander Programmer Join Date: Dec 2004 Location: Tucson, AZ, USA Posts: 80 Rep Power: 4	It'll work just fine the way your doing it. And your right, the trick is to give each link a unique ID, like this... (Toggle Plain Text) <style type="text/css"> body{background-color:#260973;} a.menulink { background-color:#1e04b2; display: block; width: 198px; text-align: left; text-decoration: none; font-family:arial; font-size:12px; color: #11e1ff; BORDER: none; padding:5px; border: solid 1px #000000; } a.menulink:hover{ border: solid 1px #6100C1; background-color: #11e1ff; color: #1e04b2 } a#desert:hover { background-image: url('bgdesert.jpg'); } a#forest:hover { background-image: url('bgforest.jpg'); } a#swamp:hover { background-image: url('bgswamp.jpg'); } td {width:100%} </style> <table border="0" width=198 align="center"> <tr> <td bgcolor="#260973" align="center" style="color:#11e1ff; font-weight:bold"> -Index- <br /> </td> </tr> <tr> <td><a href="am.htm" class="menulink" id="desert"> - About Me</a></td> </tr> <tr> <td><a href="contact.htm" class="menulink" id="forest"> - Contact</a></td> </tr> <tr> <td><a href="thoughts.htm" class="menulink" id="swamp"> - Random Thoughts</a></td> </tr> </table> <style type="text/css"> body{background-color:#260973;} a.menulink { background-color:#1e04b2; display: block; width: 198px; text-align: left; text-decoration: none; font-family:arial; font-size:12px; color: #11e1ff; BORDER: none; padding:5px; border: solid 1px #000000; } a.menulink:hover{ border: solid 1px #6100C1; background-color: #11e1ff; color: #1e04b2 } a#desert:hover { background-image: url('bgdesert.jpg'); } a#forest:hover { background-image: url('bgforest.jpg'); } a#swamp:hover { background-image: url('bgswamp.jpg'); } td {width:100%} </style> <table border="0" width=198 align="center"> <tr> <td bgcolor="#260973" align="center" style="color:#11e1ff; font-weight:bold"> -Index- <br /> </td> </tr> <tr> <td><a href="am.htm" class="menulink" id="desert"> - About Me</a></td> </tr> <tr> <td><a href="contact.htm" class="menulink" id="forest"> - Contact</a></td> </tr> <tr> <td><a href="thoughts.htm" class="menulink" id="swamp"> - Random Thoughts</a></td> </tr> </table> Note the only difference is that ID's are marked with a '#' (pound sign) instead of a '.' (period) in the CSS block. Oh, and don't forget that IDs have to be unique. Some browsers throw a fit if they aren't. B) P.S. I took the liberty of cleaning up your code a bit, hope you don't mind. __________________ I can pick my friends. And I can pick my nose. So, why can't I pick my friend's nose?

Dec 15th, 2004, 2:15 PM	#8
EdSalamander Programmer Join Date: Dec 2004 Location: Tucson, AZ, USA Posts: 80 Rep Power: 4	I thought of a possible problem with this non-JScript method though. I don't think CSS preloads you background images for you. This means that when the client first mouses over one of you links they'll be forced to wait for the new image to download before it'll change, especially if they're using a slow connection. On the other hand, if CSS does preload, then this won't be a problem... __________________ I can pick my friends. And I can pick my nose. So, why can't I pick my friend's nose?

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Sep 30th, 2004, 6:26 PM	#1
thechristelegacy Expert Programmer Join Date: Jul 2004 Location: Somerset, Pa Posts: 707 Rep Power: 5	Alright alright, to understand my probllem, you need to first see my example page. http://www.bigtonyc.com/info.htm (the three links don't go anywhere). Anyway, notice how when you mouse over the buttons the background changes color (won't work in netscape). What I want to do is use an image as the background when moused over. The only catch is I want each button to be a differnt image. Here is the CSS I already use. (Toggle Plain Text) <body> <style> body{background-color:#260973;} A.menulink { background-color:#1e04b2; display: block; width: 198px; text-align: left; text-decoration: none; font-family:arial; font-size:12px; color: #11e1ff; BORDER: none; padding:5px; border: solid 1px #000000; } A.menulink:hover { border: solid 1px #6100C1; /background-image: url('bgdesert.jpg');/ background-color: #11e1ff; color: #1e04b2 } </style> <script> var ns4class='' </script> <center> <table border="0" width=198> <tr> <td width="100%" bgcolor="#260973"><font color="##11e1ff"><center> <b>-Index-</b></center></font><br /></td> <tr> <td width="100%"><a href="am.htm" class="menulink" class=&{ns4class};> - About Me</a></td> </tr> <tr> <td width="100%"><a href="contact.htm" class="menulink" class=&{ns4class};> - Contact</a></td> </tr> <tr> <td width="100%"><a href="thoughts.htm" class="menulink" class=&{ns4class};> - Random Thoughts</a></td> </tr> </table> </center> <body> <style> body{background-color:#260973;} A.menulink { background-color:#1e04b2; display: block; width: 198px; text-align: left; text-decoration: none; font-family:arial; font-size:12px; color: #11e1ff; BORDER: none; padding:5px; border: solid 1px #000000; } A.menulink:hover { border: solid 1px #6100C1; /background-image: url('bgdesert.jpg');/ background-color: #11e1ff; color: #1e04b2 } </style> <script> var ns4class='' </script> <center> <table border="0" width=198> <tr> <td width="100%" bgcolor="#260973"><font color="##11e1ff"><center> <b>-Index-</b></center></font><br /></td> <tr> <td width="100%"><a href="am.htm" class="menulink" class=&{ns4class};> - About Me</a></td> </tr> <tr> <td width="100%"><a href="contact.htm" class="menulink" class=&{ns4class};> - Contact</a></td> </tr> <tr> <td width="100%"><a href="thoughts.htm" class="menulink" class=&{ns4class};> - Random Thoughts</a></td> </tr> </table> </center> Ok the line commented out works, but only for one image. What I want to do is have a seperate image for each mouseover. Is there a way to do this without writing a whole new CSS block for each button. Maybe with an ID link or something? I'm sorry, it's harder than it seams to explain a programming problem, lol, but if you have any questions please ask so I can clariffy it better.

Oct 1st, 2004, 12:14 AM	#2
Black.Cat Newbie Join Date: Sep 2004 Posts: 12 Rep Power: 0	I'm kinda a newbie here so sorry if I mislead you... I don't know if you can do that with CSS honestly, atleast I don't know how. If you know a little Javascript I think you could do something like this: function swap(td_name, image) { document.getElementById(td_name).style.background=image; } some junk later: <td onMouseOver="swap('td_1','url(src)')" id="td_1">&nbsp</td> <td onMouseOver="swap('td_2','url(src)')" id="td_2">&nbsp</td> Sorry if you already know this, and sorry if its not helpfull. Hopefully somebody else can give a better response. __________________ <span style='color:green'>The learned fool writes his nonsense in better languages than the unlearned; but still it is nonsense. - Benjamin Franklin</span>

Oct 1st, 2004, 3:29 PM	#4
thechristelegacy Expert Programmer Join Date: Jul 2004 Location: Somerset, Pa Posts: 707 Rep Power: 5	I'l take those into consideration, although I'm trying to stay away from Javascript as much as possible. Any other ideas?

Oct 1st, 2004, 10:54 PM	#6
thechristelegacy Expert Programmer Join Date: Jul 2004 Location: Somerset, Pa Posts: 707 Rep Power: 5	I already have the background color changing, but instead of colors, I want to use differnt images.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Programming Forums > Web Development and Design > HTML / XHTML / CSS

Css Mouse Over Button Background Image