Sujet Précédent Sujet Suivant

Problème avec onmouseout.

Résolu/Fermé
Frans24 - 29 déc. 2009 à 19:59
 Frans24 - 29 déc. 2009 à 21:00
Bonjour,
Je fais une page web dans laquelle il y a une image. Sur cette image avec Gimp, j'ai pu déclarer plusieurs zone que je souhaite utliser.
En fouillant sur le net j'ai pu trouver un script me permettant de faire apparaitre un texte en survolant un point.
J'ai deux petits soucis :
1) lorsque la souris quitte ce point le texte reste affiché.
2) Ce texte apparait en bas a gauche de l'image. Je souhaiterais qu'il s'ouvre dans une petite fenêtre prêt du pointeur de la souris ou du moins sur l'image et qu'il s'efface des que la souris quitte le point.

Mon code 
<html>
<head>
<script type="text/javascript">
function hub(n) {
div=document.getElementById("mondiv");
function effacer(n) {
 document.getElementById("mondiv").innerHTML="";
}

switch(n){
   case 1:
      div.innerHTML = "<b>HUB PARIS</b><br>Paris Charles de Gaulle";
   break;
   case 2:
      div.innerHTML = "";
   break;
   case 3:
      div.innerHTML = "";
   break;
   case 4:
      div.innerHTML = "";
   break;
   case 5:
      div.innerHTML = "";
   break;
   case 6:
      div.innerHTML = "";
   break;
   case 7:
      div.innerHTML = "";
   break;
   case 8:
      div.innerHTML = "";
   break;
   case 9:
      div.innerHTML = "";
   break;
   case 10:
      div.innerHTML = "";
   break;
   case 11:
      div.innerHTML = "";
   break;
   case 12:
      div.innerHTML = "";
   break;
   case 13:
      div.innerHTML = "";
   break;
   case 14:
      div.innerHTML = "HUB AFRIQUE DU SUD";
   break;
   case 15:
      div.innerHTML = "";
   break;
    default:
      div.innerHTML = "";
   break;
}
}
</script>
</head>
<body>

<img src="planisphere.png" width="626" height="320" border="0" usemap="#map" />

<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:xx -->
<area shape="rect" coords="314,63,319,67" onmouseover="hub(1)"; onmouseout="effacer()"; href="cdg" />
<area shape="rect" coords="309,71,314,75" onmouseover="hub(2)" href="bod" />
<area shape="rect" coords="317,59,322,63" onmouseover="hub(3);"href="liege" />
<area shape="rect" coords="325,61,330,65" onmouseover="hub(4);"href="allemagne" />
<area shape="rect" coords="321,66,325,70" onmouseover="hub(5);"href="Suisse" />
<area shape="rect" coords="308,56,313,60" onmouseover="hub(6);"href="angleterre" />
<area shape="rect" coords="114,89,119,93" onmouseover="hub(7);"href="los angeles" />
<area shape="rect" coords="170,75,175,79" onmouseover="hub(8);"href="Chicago" />
<area shape="rect" coords="172,89,178,94" onmouseover="hub(9);"href="Atlanta" />
<area shape="rect" coords="189,65,194,70" onmouseover="hub(10);"href="montréal" />
<area shape="rect" coords="536,88,542,92" onmouseover="hub(11);"href="tokyo" />
<area shape="rect" coords="501,109,506,114" onmouseover="hub(12);"href="chine" />
<area shape="rect" coords="502,114,507,118" onmouseover="hub(13);"href="macau" />
<area shape="rect" coords="356,210,362,214" onmouseout="default"; onmouseover="hub(14)";  href="afsud" />
<area shape="rect" coords="" onmouseover="hub(15);"nohref="kiev" />
</map>

<div id="mondiv"></div>
</body>
</html>

2 réponses

Réponse 1 / 2
Frans24
29 déc. 2009 à 20:54
Problème résolu. 
function effacer(n) {
 document.getElementById("mondiv").innerHTML="";
}

devait se placer juste avant </script>
0
Frans24
29 déc. 2009 à 20:59
En fait il n'y a qu'une partie du soucis qui est résolue.
Reste le petit 2 faire apparaitre le texte sur l'image a coté du pointeur de souris.
Si quelqu'un à une idée?
0
Réponse 2 / 2
Frans24
29 déc. 2009 à 21:00
Problème résolu en parti. 
function effacer(n) {
 document.getElementById("mondiv").innerHTML="";
}

devait se placer juste avant </script>
Reste le 2, le texte dans un petite fenêtre sur l'image.
0