Une infobulle à partir des coordonnées sur une image

par **dark_vidor** » 28 janv. 2006, 22:09

Alors voila je souhaite sur une carte mettre une infobulle au passage de la souris sur des coordonnées prédifinis& particuliers

Voici ma source html :

Code : Tout sélectionner

<html>
<head>
<title>gni</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<link href="inc/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
#coordonnees {
	font-weight:bold;
	background-color:#510000;
	font-family: "Trebuchet MS";
	font-size: 12px;
	color: #999999;
}
#description {
	font-weight:bold;
	background-color:#510000;
	font-family: "Trebuchet MS";
	font-size: 12px;
	color: #999999;
}
.infobulle{
	font-family: "Trebuchet MS";
	font-size: 10px;
	font-weight: bold;
	color: #999999;
	background-color: #FFFF99;
	margin: 2px;
	border: 1px solid #000000;
}
</style>
<script language="JavaScript" type="text/javascript">
document.write('<div style="position:absolute;display:none" id="bulle"></div>');
function coordonnees(evt)
{
	var coord_x, coord_y;
	var donnees=new Array();
	donnees[1]=new Array();
	donnees[1].push("Bakura ", "176", "492", "0");
	donnees[2]=new Array();
	donnees[2].push("Endor ", "203", "539", "0");
	donnees[3]=new Array();
	donnees[3].push("Firrerre ", "195", "527", "0");
	donnees[4]=new Array();
	donnees[4].push("Cerea ", "226", "465", "0");
	donnees[5]=new Array();
	donnees[5].push("Riflor ", "248", "488", "0");

	evt = (evt) ? evt : ((window.event) ? window.event : "");
	if (evt)
	{
		// Détection du navigateur
		ie = (document.all)? true:false;
		ff = (typeof(window.controllers) != 'undefined' && typeof(window.locationbar) != 'undefined')? true:false;
	
		// Création d'un raccourci pour manipuler l'infobulle
		if (ie) var calque = bulle.style;
		if (ff) var calque = document.getElementById('bulle').style;

		if (ie)
		{
			coord_x = evt.offsetX;
			coord_y = evt.offsetY;
		}
		else if (ff)
		{
			var table_left=document.getElementById("table").offsetLeft;
			var cell_left=document.getElementById("cell").offsetLeft;
			
			var table_top=document.getElementById("table").offsetTop;
			var cell_top=document.getElementById("cell").offsetTop;
			
			coord_x = evt.pageX - (table_left+cell_left);
			coord_y = evt.pageY - (table_top+cell_top);
			
			calque.style.left= coord_x+10+"px";
			calque.style.top= coord_y-10+"px";
		}
		
		
		//Fonction On
		function On(infobulle)
		{
			// Instructions pour Internet Explorer
			if (ie)
			{
				document.all("bulle").innerHTML = infobulle;
				calque.visibility = "visible";
			}

			//Instructions pour FireFox
			if (ff)
			{
				document.getElementById("bulle").innerHTML = infobulle;
				calque.visibility = "visible";
			}

		}
		//Fonction Off
		function Off()
		{
			// Instructions pour Internet Explorer
			if (ie)
			{
				document.all("bulle").innerHTML = '';
				calque.visibility = "hidden";
			}
			//Instructions pour FireFox
			if (nc6)
			{
				document.getElementById("bulle").innerHTML = '';
				calque.visibility = "hidden";
			}
		}
		
	document.getElementById("coordonnees").innerHTML = "X:"+coord_x+" - Y:"+coord_y;

	var i=1, out = 0;
	while (i < donnees.length && out != 1)
	{
		if((coord_x-1 == donnees[i][1] && coord_y-1 == donnees[i][2]) || (coord_x-1 == donnees[i][1] && coord_y == donnees[i][2]) || (coord_x-1 == donnees[i][1] && coord_y+1 == donnees[i][2]) || (coord_x == donnees[i][1] && coord_y-1 == donnees[i][2]) || (coord_x == donnees[i][1] && coord_y == donnees[i][2]) || (coord_x == donnees[i][1] && coord_y+1 == donnees[i][2]) || (coord_x+1 == donnees[i][1] && coord_y-1 == donnees[i][2]) || (coord_x+1 == donnees[i][1] && coord_y == donnees[i][2]) || (coord_x+1 == donnees[i][1] && coord_y+1 == donnees[i][2]))
		{
			document.getElementById("description").innerHTML = donnees[i][0]+"<br>["+donnees[i][3]+"]";
			var contenu = "<table width=200 border=0 cellspacing=0 cellpadding=0 class=infobulle><tr><td>Planète : "+donnees[i][0]+"<br>Joueur"+donnees[i][3]+"</td></tr></table>";
			On(contenu);
			out = 1;
		}
		else
			document.getElementById("description").innerHTML = "";
	i++;
	}
	}
}

function coordonnees_ini()
{
	var o_img = document.getElementById("carte_galaxie");
	if (o_img)
	{
		o_img.style.cursor = "crosshair";
		o_img.onmousemove = coordonnees;
	}
}
</script>
</head>
<body bgcolor="#333333" onLoad="coordonnees_ini();">
<table id="table" width="930" border="0" align="center" cellpadding="0" cellspacing="0" style="border: 1px solid #000000;">
  <tr bgcolor="#510000"> 
    <td width="165" height="620" align="center" style="padding-top : 10px; padding-bottom : 10px;">&nbsp;</td>
    <td width="600" align="center" id="cell"><img src="http://test.derniere-bataille.net/game_v2.0/galaxie.jpg" width="600" height="600" id="carte_galaxie"></td>
    <td width="165" valign="top" style="padding-top : 50px; padding-left : 10px;"> 
      <p align="center"><span id="coordonnees"></span></p>
      <p align="center"><span id="description"></span></p></td>
  </tr>
</table>
</body>
</html>

Lorsque je lance la page sous IE il ne m'indique pas qu'elle comporte des erreurs de syntaxe.
Mais lorsque j'utilise la fonction On(); mon info bulle ne s'affiche pas sur ma page

Qu'es ce que je n'ai pas fait ou mal fait ?

Une infobulle à partir des coordonnées sur une image

Répondre

Étendre la vue Revue du sujet : Une infobulle à partir des coordonnées sur une image

Une infobulle à partir des coordonnées sur une image