Okay I've now got it to show a popup table when I hover over the coords but how do I get it to show a different table for every square? I've uploaded what I'm working on. The first three squares show the same popup table. I want a different one for each square.
http://iceblade122.awardspace.com/
Code:
<html>
<head>
<title>IkariamMap</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script type="text/javascript">
function ShowPopup(hoveritem)
{
hp = document.getElementById("hoverpopup");
// Set position of hover-over popup
hp.style.top = hoveritem.offsetTop + 18;
hp.style.left = hoveritem.offsetLeft + 20;
// Set popup to visible
hp.style.visibility = "Visible";
}
function HidePopup()
{
hp = document.getElementById("hoverpopup");
hp.style.visibility = "Hidden";
}
</script>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<img src="images/IkariamMap_01.gif" width="680" height="680"
alt="Coords" usemap="#ikimap" />
<map id ="ikimap" name="ikimap">
<area shape ="rect" coords ="20,20,40,40"
id="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"
href ="island1.htm" target ="_blank" alt="1,1" />
<area shape ="rect" coords ="40,20,60,40"
id="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"
href ="island2.htm" target ="_blank" alt="1,2" />
<area shape ="rect" coords ="60,20,80,40"
id="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"
href ="island3.htm" target ="_blank" alt="1,3" />
</map>
<div id="hoverpopup" style="visibility:hidden; position:absolute; top:0; left:0;"><table bgcolor="#0000FF">
<tr><td><font color="#FFFFFF">Island[1,1]</font></td></tr>
<tr><td bgcolor="#8888FF">No one's here!</td></tr></table></div>
<table background="IkariamMap_01.gif" id="Table_01" width="680" height="680" border="0" cellpadding="0" cellspacing="0">
</table>
</body>
</html>