CSS Forum

**Firebat** · 02-27-2006, 03:38 PM

My code contains Html, Css, and Javascript, so this isn't just a css specific question

.

First off, heres the code for one table cell:
<tr>
<TD width="152" height="27" align="middle"
vAlign=center style="CURSOR: hand" onmouseover="
this.style.backgroundColor='silver'" onmouseout="
this.style.backgroundColor='red'">
<div align="center" class="style6">
<span class="style6">
<A style="COLOR: #6699cc; TEXT-DECORATION: none" href="page276.html">
<FONT color="white"> <FONT FACE="Century Gothic"> Home
</font>
</font>
</div>
</td> What i need to do is replace The onmouseover color (silver) to a picture, I also need to do the same for the onmouseout color (red).

Sorry if this question seems a bit noobish, but i can't seem to figure it out.

**funkdaddu** · 01:16 AM

get rid of the JS and just use CSS: Just use the :hover selector, in this case I just did it for the a element, but you can use if for a specific class like .aclassname:hover or a.classname:hover

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<meta name="generator" content="Adobe GoLive">
		<title>Untitled Page</title>
		<style type="text/css" media="screen"><!--
td {
	font-family: "Century Gothic";
	color: white;
	align: center;
	padding: 0;
}

td a {
	color: #6699cc;
	text-decoration: none;
	display: block;
}

td a:hover {
	color: black;
	background-image: url("http://www.photoshop101.com/uploads/396.jpg");
}
--></style>
	</head>

	<body bgcolor="#00000">
		<table>
			<tr>
				<td width="152" height="27" align="middle"> 
					<a href="page276.html">Home</a>
				</div>
				</td>
			</tr>
		</table>
	</body>

</html>

But you want the color of the background to be different than the non-mouseover state? You can use this.style.backgroundImage='url(image.gif)' to set it via JS. Remove the - to use the JS attribute i.e. background-image becomes backgroundImage.