Forum Moderators: open

Message Too Old, No Replies

Changing background Pictures in Cells

How?

         

Sanguinor

11:27 pm on Oct 26, 2004 (gmt 0)

10+ Year Member



I have searched the net and searched the net and only came up with half baked answers for this question:

How do I change the background picture of a cell on mouse over?

Also turning the cell into a link and changing the pointer to a hand would be nice!

Ps. I'm no coder, just a novice designer.

birdbrain

12:01 pm on Oct 27, 2004 (gmt 0)



Hi there Sanguinor,

and a warm welcome to these forums ;)

Here is a simple example that does not
use 'javascrip't but 'css' instead and....
comes complete with pointer :)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css rollover</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/

body {
background:#003380;
}

#container {
width:108px; /* image width plus border*/
margin:auto;
}

a#foo:link {
display: block;
width: 100px; /* image width*/
height: 100px; /* image height*/
background-image: url("image_one.gif");
border:solid 2px #000000;
}

a#foo:hover {
background-image: url("image_two.gif");
border:solid 2px #000000;
}

/* ]]> */
</style>

</head>
<body>

<div id="container">
<a href="http://www.webmasterworld.com" id="foo"></a>
</div>

</body>
</html>

birdbrain