Help Please! - HTML Forums

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....

Code:

<!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>