18073 sujets

Questions générales et questions de débutants

Un menu avec commentaires au survol

Bonjour,
je suis allé voir comment créer un menu avec commentaire au survolcomment créer un menu avec commentaire au survol et le mien fontionne sous firefox mais pas sur IE.

qu'est-ce qu'il me manque?

#corps a span {
display:none;
}

#corps a:hover span {
display:block;
position: absolute;
top:0;
left:0;
width:400px;
color:white;
text-align:center;
}

	<div id="corps">
		<ul>
			<li><a href="vannerie.php"><img src="images/1/fot_vannerie.jpg" class="fot_vannerie" alt="vannerie" title="accès à la Vannerie"/><span>Cliquez pour accéder à la vannerie</span></a></li>
			<li><a href="osiericulture.php"><img src="images/1/fot_osier.jpg" class="fot_osier" alt="osiericulture" title="accès à l'osiériculture"/><span>Cliquez pour accéder à l'osiericulture</span></a></li>
			<li><a href="catalogue.php"><img src="images/1/fot_catalogue.jpg" class="fot_catalogue" alt="Catalogue" title="accès au catalogue"/><span>Cliquez pour accéder au catalogue</span></a></li>
		</ul>
	</div>
Salut.

J'ai jeté un coup d'oeil à ton problème. Et je crois/crains que ça ne fonctionne pas sous IE. en général, j'ai fait ce que tu cherches à faire avec JS du genre onmousesover... et je sais plus mais tu mets getelementbyid et id.style="display:block" (ou id est le id qui t'intéresse). Si tu veux j'ai ça en fonction je retrouve la page et je poste le code un peu plus tard.

Florian
RE

1.\ Alors pour faire "joli" (vite fait lol)
<style>
#corps div {display:inline;}
</style>


2.\ Le script (tout simple)
<script>
	function affiche(a)
		{
		document.getElementById("lnk0"+a+"").style.display = '';
		}

	function cache(b)
		{
		document.getElementById("lnk0"+b+"").style.display = 'none';
		}
</script>


3.\ Le code HTML
<div id="corps">
<ul>
<li>
<a href="vannerie.php" onmouseover="affiche('1');" onmouseout="cache('1');"><img src="images/1/fot_vannerie.jpg" class="fot_vannerie" alt="vannerie" title="accès à la Vannerie"/></a>
<div id="lnk01" style="display:none;">Cliquez pour accéder à la vannerie</div>
</li>
<li>
<a href="osiericulture.php" onmouseover="affiche('2');" onmouseout="cache('2');"><img src="images/1/fot_osier.jpg" class="fot_osier" alt="osiericulture" title="accès à l'osiériculture"/></a>
<div id="lnk02" style="display:none;">Cliquez pour accéder à l'osiericulture</div>
</li>
<li>
<a href="catalogue.php" onmouseover="affiche('3');" onmouseout="cache('3');"><img src="images/1/fot_catalogue.jpg" class="fot_catalogue" alt="Catalogue" title="accès au catalogue"/></a>
<div id="lnk03" style="display:none;">Cliquez pour accéder au catalogue</span>
</li>
</ul>
</div>


4.\ Evolutions
Maintenant il te reste plus qu'a placer la bulle ou tu veux

Florian
Administrateur
mfaraday a écrit :
J'ai jeté un coup d'oeil à ton problème. Et je crois/crains que ça ne fonctionne pas sous IE.

Salut,

Je n'ai pas le temps de regarder la version de Nombril, mais le menu du tutoriel fonctionne bien sur IE.
Salut !

Euh, je pense que j'ai du louper un cohce mais j'ai repris le code mis sur cette page et chez moi ça marche pas... ou alors j'ai pas mis ce qu'il fallait... Smiley eek

Mais je regarderais plus chez moi ce soir... peut être peut tu mettre le code complet de la page...

Florian
merci pour vos réponses.
Mais c'est ça qui est bizarre... c'est que j'ai copié sur le menu du tuto qui fontionne... mais le mien ne fontionne pas. Smiley decu
Sujet clos
Aller à