28173 sujets

CSS et mise en forme, CSS3

Survol d'une zone d'image

Bonjour,

j'ai utilisé le tutoriel existant sur le site pour créer une image map. Seulement mon souci est qu'au survol des zones, le curseur ainsi que l'image s'affichant en-dessous de l'image map clignotent, impossible de les garder fixes...

voici le code :


<div id="image_map">
    <div id="image">
       <a id="zone1" href="#" title="Zoom 1"></a>
       <a id="zone2" href="#" title="Zoom 2"></a>
       <a id="zone3" href="#" title="Zoom 3"></a>
    </div>
</div>


style :

div#image_map
{
	width: 150px;
	top: 280px;
	left: 350px;
	position: absolute;
	text-align: left;
	/*border-style: dashed;*/
	padding-bottom: 30px;
	font-size: 11px;
}

#image {
position: absolute;
width : 150px;
height: 137px;
background: url('../images/situation_OT.gif') top left no-repeat;
}
#zone1 {
position: absolute;
width : 20px;
height: 20px;
left: 30px;
top: 30px;
}
#zone2 {
position: absolute;
width : 20px;
height: 20px;
left: 110px;
top: 52px;
}
#zone3 {
position: absolute;
width : 20px;
height: 20px;
left: 45px;
top: 70px;
}
#zone1:hover {
width : 150px;
height: 100px;
left: 0px;
top: 200px;
background: url('../images/Office 1.jpg') top left no-repeat;
cursor:help;
border: 0px;
}
#zone2:hover {
width : 150px;
height: 140px;
left: 0px;
top: 200px;
background: url('../images/Office 2.jpg') top left no-repeat; 
cursor:help;
border: 0px;
}
#zone3:hover {
width : 150px;
height: 140px;
left: 0px;
top: 200px;
background: url('../images/Office 3.jpg') top left no-repeat;
cursor:help;
border: 0px;
}


merci d'avance
Bonjour,

Je lance ici une piste de réflexion sur l'origine du problème, sans toutefois savoir si c'est vraiment ça...

J'ai déjà vu ce problème de vibration ailleurs (dans un contexte de menu déroulant, lors du survol et du déploiement des sous-menuis). Je vois actuellement un lien entre les deux situations : il y avait utilisation de pseudo-classes appliquées sur d'autres éléments que des liens (a:hover, a:active, etc.). Dans ton cas, tu utilises un #zone2:hover... Comme le problème est au survol, peut-être que ça viendrait de là... Les navigateurs ont parfois de la misère avec l'application des pseudo-classes autres que sur des liens.

Encore une fois, je lance une piste, mais j'en appelle à d'autres personnes plus expérimentées pour réfléchir sur le problème. Smiley biggrin
Bonjour,

Jeter le tout. Revenir avec une image-map HTML et demander de l'aide sur le javascript qui va bien pour les effets visuels.

(Il me semblait bien avoir obtenu l'euthanasie de ce tutoriel il y a quelques mois ?)
Modifié par Laurent Denis (23 Jun 2007 - 10:48)
Laurent Denis a écrit :

(Il me semblait bien avoir obtenu l'euthanasie de ce tutoriel il y a quelques mois ?)


C'est la version anglaise qui demeure Smiley rolleyes
Sujet clos
Aller à