Fallen Angels - Javascript Question

Fallen Angels (http://www.fallenangelsx.com/forums/index.php)

- Anything Goes! (http://www.fallenangelsx.com/forums/forumdisplay.php?f=20)

- - Javascript Question (http://www.fallenangelsx.com/forums/showthread.php?t=4953)

Javascript Question

Okay this is what I have so far. It's pretty simple although I know nothing about this stuff so it took me hours to get this far. Anyways. What I want to do is have the text it displays on mouseover to show up on the right of the image rather than displaying on the bottom. So when I mouseover I want the [1,1], [1,2], etc. to show up on the right of the image.. preferably vertically centered.

What would really be ideal is if I could get the text to shop up at the current mouse position like under the cursor. Is that possible? Help please?

Code:

<html>

<head>



<script type="text/javascript">

function writeText(txt)

{

document.getElementById("desc").innerHTML=txt;

}

</script>



</head>

<body>



<img src="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="writeText('[1,1]')"

href ="island1.htm" target ="_blank" alt="1,1" />



<area shape ="rect" coords ="40,20,60,40"

onMouseOver="writeText('[1,2]')"

href ="island2.htm" target ="_blank" alt="1,2" />



<area shape ="rect" coords ="60,20,80,40"

onMouseOver="writeText('[1,3]')"

href ="island3.htm" target ="_blank" alt="1,3" />

</map> 

<p id="desc"></p>







</body>

</html>

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>

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.

Ice you know that we already have a map with the whole 80 players on it right? what are you trying to make I lost you here :suic:

Quote:

Originally Posted by lhurgoyf

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>

I got it to work. Not perfectly how I wanted it but it works enough to get the idea across. Thanks for the help :)