Ændre billede på mouseover
Jeg har en ret simpel testside, hvor jeg henter en tabel frem når markøren er over et billede. Og det virker fint, men hvordan ændre jeg billedet, således at menu_produkter2.jpg er synligt så længe brugeren holder markøren over billedet eller DIV'et?Jeg kan godt sætte en simple onmouseover på selve billedet, men i det øjeblik man bevæger markøren ned i tabellen (DIV'et), så reagere den jo på onmouseout, og ruller tilbage til det oprindelige billede.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
<!--
body{margin:0; background-color:transparent; }
li{ list-style:none;}
.mega{ position:relative; none; padding:0; float:left;}
.mega div{
position: absolute; z-index:4; top:60px; background:#00ff00; no-repeat; width:298px; height:276px; visibility:hidden; padding:0; margin-top:0;
}
.mega:hover div{
visibility: visible;left: 0px;
}
.mega ul{ float:left; margin-top:50px; width:100px;}
.mega_link a{ color:#36F; line-height:35px; text-decoration:none;font-family: Arial, Helvetica, sans-serif; font-size:12px; padding-bottom:0px; padding-top:0px; outline: none; font-style:normal; }
.mega_link a:hover{ color: #fff; line-height:35px; text-decoration:none;font-family:Arial, Helvetica, sans-serif; font-size:12px; padding-bottom:0px; outline: none; font-style:normal; padding-top:0px; border-bottom:dotted 2px #36F; }
-->
</style></head>
<body>
<p> </p>
<p> </p>
<table width="871" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="320"> </td>
<td width="376"> </td>
<td width="175"> </td>
</tr>
<tr>
<td> </td>
<td><div class="mega">
<a href="#"><img src="menu_produkter1.jpg" name="Image1" width="83" height="61" border="0" id="Image1" /></a>
<div class="mega_link">
<table width="500" border="1" cellpadding="0" cellspacing="0" bgcolor="#FF0000">
<tr>
<td><a href="#">1</a></td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</div>
</div></td>
<td></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<p> </p>
</body>
</html>
