Quote:
|
Originally Posted by lhurgoyf
Right now all of your mouseovers call the same function which makes the same div visible. If you want to change that for different calls you will have to make a distinction in ShowPopup to make a different div visible. Either add a new div to the DOM from there or add additional divs like hoverpopup which contain the different stuff you want to show for each mouseover.
|
Thanks for the reply. I found a tutorial, pretty much re-wrote everything and I think I did what you said but there's a problem. In the CSS if I have the box set to visible it will show so I know it's there but when I set it back to hidden and try to hover over the coords it doesn't popup. I've spent the last 2 hours trying to fix it but I don't know anything about Javascript.
Code:
<html>
<head>
<title>Ikariam Map - Sector 1</title>
<script language="JavaScript">
function box (boxname,menustate){
if (document.getElementById)
{document.getElementById(boxname).style.visibility = menustate;}
else {document[boxname].visibility = menustate}
</script>
<style type="text/css">
#C1C1 {
position: absolute;
top: 20px;
left: 100px;
width: 80px;
border: solid 2px #000000;
background-color: #ff9900;
color: #000000;
padding: 5px;
z-index: 2;
visibility: hidden;
}
#C2C1 {
position: absolute;
top: 20px;
left: 100px;
width: 80px;
border: solid 2px #000000;
background-color: #ff9900;
color: #000000;
padding: 5px;
z-index: 2;
visibility: hidden;
}
#C3C1 {
position: absolute;
top: 20px;
left: 100px;
width: 80px;
border: solid 2px #000000;
background-color: #ff9900;
color: #000000;
padding: 5px;
z-index: 2;
visibility: hidden;
}
</style>
</head>
<body>
<img src="IkariamMap/Diff HTML/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"
onMouseOver="box('C1C1','visible')" onMouseOut="box('C1C1','hidden')"
href ="island1.htm" target ="_blank" alt="1,1" />
<area shape ="rect" coords ="40,20,60,40"
onMouseOver="box('C2C1','visible')" onMouseOut="box('C2C1','hidden')"
href ="island2.htm" target ="_blank" alt="2,1" />
<area shape ="rect" coords ="60,20,80,40"
onMouseOver="box('C3C1','visible')" onMouseOut="box('C3C1','hidden')"
href ="island3.htm" target ="_blank" alt="3,1" />
</map>
<div id="C1C1">Island[1,1]</div>
<div id="C2C1">Island[2,1]</div>
<div id="C3C1">Island[3,1]</div>
</body>
</html>