Pb chevauchement popup + image fond sur onmousover + onmouseout

Question

pbourieau

21 Oct 2009 à 15:44

Hello

Ceci est mon premier post. Cela fait un moment que je tourne autour du pot sans solution. J'ai donc cherché et cherché... en vain.
Voilà j'essaye sur une image de fond comportant des zones réactives, d'afficher une photo en popup (onmouseover et onmouseout + 1 petit petit petit Javascript pour openwindow) avec un texte en complément. Suivant la position de la fenêtre de fond sur l'écran cela fonctionne ou cela provoque manifestement un chevauchement de zones se traduisant par un effet "clignotement" trés désagréable" et je vous le donne en 1000, non souhaité.
Auriez vous un workaround svp ? Je précise que je ne suis pas un expert mais un élève qui écoute les conseils des plus calés que moi...


Page d'essai


<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Image Map</title>
	<style type="text/css" title="text/css">
	
dl#SalleMap{
	margin: 0;
	padding: 0;
	background: transparent url('Plan_Salle4.jpg') top left no-repeat;
	height: 553px;
	width: 900px;	
	position: relative;
}

dt{ 
		margin: 0; 
		padding: 0; 
		position: absolute; 
		font-size: 85%; 
		display: none; 
}
dd{ 
		margin: 0; 
		padding: 0; 
		position: absolute;  
		font-size: 85%; 
}

/* ---------- D&#34988;arations des Zones R&#34851;tives ---------- */

	 /* Coordonnees X Y du debut de la zone */
	 dd#P_Troupes{ left: 138px; top: 4px;  }

	 /* Taille de la zone &#65533;&#35561;miter */
	 dd#P_Troupes a
	 { 
	 	 position: absolute; 
		 width: 100px; 
		 height: 45px; 
		 text-decoration: none; 
		 	 	background:none;
	 }
	 	 
	 dd#P_Troupes a span
	 { 
	 	display: none; 
	 }

	 dd#P_Troupes a:hover
	 { 
	 	 position: absolute; 
		 border:1px dashed white; 
		 background: transparent url(hover.png) repeat;
	 }

	 /* Bloc de description  */
	 
	 dd#P_Troupes a:hover span
	 {
	   display: block;
		 text-indent: 0;
		 vertical-align: top;
		 color: #000;
 		 background-color: #F4F4F4;
 		 font-weight: bold;
 		 position: absolute;
 		 border: 1px solid #BCBCBC;
 		 bottom: 100%;
 		 margin: 0;
 		 padding: 5px;
 		 width: 140%;
	 }

</style>

<script language="JavaScript">
/*
		Fenêtre Pop Up 
*/
<!--
function openWindow(Mon_Image, name)
{
	
myWin = window.open("","nCt", "left=800,width=400,height=400,status=no,location=no,toolbar=no,menubar=no,scrollbars=no");
myWin.document.write ("<img src="+Mon_Image+">");
myWin.document.close()
}

function closeIt(){
if (!myWin.closed)
myWin.self.close()
}
//-->
</script>
</head>

<body>
<dl id="SalleMap">
 <dd id="P_Troupes">
	<a href="javascript:void()" onmouseover="openWindow('Toto.jpg','essai')" onmouseout="closeIt()" onClick="return false">
	<span>Parking des troupes</span>		  
	</a>
 </dd>
</dl>
</body>
</html>

Et j'oubliais Merci Smiley smile

Modifié par pbourieau (22 Oct 2009 - 09:18)

Laurie-Anne

21 Oct 2009 à 15:54

Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien "Aide" qui apparaît en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

Sujet clos

CSS et mise en forme, CSS3

Pb chevauchement popup + image fond sur onmousover + onmouseout