Affichage d'un calque avec lien

10 mai 2007, 16:43

Bonjour, j'ai créé il y a quelques temps un script permettant de lier un zone d'une carte et un calque, qui s'affichait quand on la survolait. Jusque la, pas de problème.

Seulement, je fait des retouches sur le script et aimerai ajouter un lien dans le calque. Le seul problème, c'est que le calque redevient invisible des que la souri sort de la zone...

Voici mon code actuelle :

Code : Tout sélectionner

<style>
#id{position:absolute; left:$xf px; top:$yd px; visibility:hidden; background-color:#ffffce; border: 1px solid black;} 
</style>
<map name="map">
<area shape="rect" onmouseover="document.getElementById('id').style.visibility='visible';" onmouseout="document.getElementById('id').style.visibility='hidden';" href="lien" coords="'$xd,$yd,$xf,$yf" />
</map>
<img scr="image" usemap="#map">
<div id="id">UN text</div>

J'ai essayé de mettre des evenement Onmouseover et onmouseout sur le calque, mais ca ne marche pas, j'ai essayer dans la feuille de style de mettre #id:hover, ca ne marche pas...

Pouvez vous m'aider ?

10 mai 2007, 17:27

Et si tu virais juste le

Code : Tout sélectionner

onmouseout="document.getElementById('id').style.visibility='hidden';"

pour pas que ton calque redevienne invisible quand tu sors de la zone ?

Sinon en un peu plus compliqué, tu peux aussi définir une durée pendant lequel le calque sera visible, genre une ou deux secondes avant de le faire disparaitre (avec setTimeout()) et si jamais l'utilisateur passe la souris sur le calque pendant ce temps, tu interromps le timeout avec un clearTimeout() pour l'empêcher de disparaitre...

10 mai 2007, 18:33

OUi, mais le problème, c'est comment le refaire devenir invisible.

Vu que ma page final contient à peu près 400 calque, ca devient vite le basar si les calques restes visibles...

Sinon, je me renseigne sur la fonction setTimeout et je revien si j'ai des question...

10 mai 2007, 18:49

BOn, me revoila, j'ai fait deux foncitons javascript qui me permette de faire s'afficher le calque pendant deux secondes

Code : Tout sélectionner

function affiche('id')
	{document.getElementById(id).style.visibility='visible';
	window.setTimeout(masque(id),2000);}
function masque('id')
	{document.getElementById(id).style.visibility='hidden';}

Le problème, c'est que ca marche pas... Le calque ne veut pas s'afficher.

12 mai 2007, 17:56

J'ai trouvé une erreur, il fallait mettre la fonction entre guillement.

ce qui donne :

Code : Tout sélectionner

function affiche(id)
	{document.getElementById(id).style.visibility='visible';
	window.setTimeout('masque('+id+')',2000);}
function masque(id)
	{document.getElementById(id).style.visibility='hidden';}

Donc la calque s'affiche correctement, mais il ne veut pas s'en aller. J'obtient comme erreur :

Code : Tout sélectionner

ligne : 9
caractere : 3
Erreur : objet requit
Code : 0

La ligne neuf est la ligne qui masque le calque.

13 mai 2007, 05:04

Bonjour,
je ne sais pas si cela va résoudre ton problème mais les parametre de getElementById sont normalement des chaines de caracteres il me semble, il faudrait plutot faire:

Code : Tout sélectionner

function affiche(id) 
   {document.getElementById(''+id).style.visibility='visible'; 
   window.setTimeout('masque('+id+')',2000);} 
function masque(id) 
   {document.getElementById(''+id).style.visibility='hidden';}

13 mai 2007, 09:18

Non, ca ne fonctionne pas...

Affichage d'un calque avec lien

Qui est en ligne