PDA

View Full Version : Help Please!

Robkeevil
09-20-2005, 11:15 AM
Im currently failing trying to design a page, any help would be much appreciated!

I have a table with three cells. The top two both contain text and a "more" link, and the bottom cell is empty. Can anyone tell me a way to get a picture to appear in the bottom cell when i mouseover cell 1 (ie anywhere i cell 1, not just the link), and have it stay in place, only to be replaced with a second image if i mouse over anywhere in cell 2?

Any replies will make this javascript noob very happy!
coothead
09-20-2005, 12:15 PM
Hi there Robkeevil,

and a warm welcome to these forums. :)

Here is a working example, it may give you some ideas....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>mouseover cells</title>
<base href="http://coothead.homestead.com/files/"/>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<meta name="Content-Script-Type" content="text/javascript"/>
<meta name="Content-Style-Type" content="text/css"/>
<style type="text/css">
<!--
body {
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
color:#000;
background-color:#ccc;
}
#table1 {
border:2px solid #999;
margin:20px auto;
background-color:#fff;
color:#666;
}
#table1 td{
border:1px solid #666;
}
#table1 a {
display:block;
width:100%;
height:40px;
line-height:40px;
background-color:#fff;
color:#000;
text-align:center;
text-decoration:none;
}
#image {
width:360px;
height:280px;
}
-->
</style>
<script type="text/javascript">
<!--
var preloads=[];
function preload(){
for(var i = 0; i < arguments.length; i ++) {
preloads[preloads.length] = new Image();
preloads[preloads.length - 1].src = arguments[i];
}
}
function showPic(pic) {
document.getElementById('image').style.backgroundImage='url('+pic+')';
}
preload('apple.jpg','banana.jpg');
//-->
</script>

</head>
<body>

<table id="table1"><tr>

<td onmouseover="showPic('apple.jpg')">
<a href="http://www.htmlforums.com">more one</a>
</td>

<td onmouseover="showPic('banana.jpg')">
<a href="http://www.w3schools.com">more two</a>
</td>

</tr><tr>

<td colspan="2" id="image">&nbsp;</td>
</tr></table>

</body>
</html>