Sujet Précédent Sujet Suivant

OnMouseOver : plusieurs textes,un emplacement

Fermé
HTMLdébutant - 17 janv. 2009 à 18:21
 francky - 1 mars 2012 à 17:29
Bonjour,
Je débute en programmation HTML et je cherche a faire mon propre site internet...
Mon problème concerne l'instruction onMouseOver.
J'ai un menu de navigation que j'a créer en image (5 bouton = 5 liens vers une page différente).
Je voudrais faire apparaitre un texte quand le pointeur de la souris passe sur un bouton (le bouton sert de lien). Et je voudrais en même temps que pour chaque bouton il n'y ai qu'une seule zone d'affchage du texte.
J'ai déja essayé la fonction Textarea, mais dès que je dépasse un certain nombre de caractère, c'est comme si il n'y avais pas de texte du tout.
Merci d'avance de vos réponses.

2 réponses

Réponse 1 / 2
Azer_Ty Messages postés 104 Date d'inscription vendredi 31 octobre 2008 Statut Membre Dernière intervention 4 juillet 2011 60
17 janv. 2009 à 21:42
Salut,
Je ne sais pas si c'est ce que tu veux, mais essaye : 
<html>
<head>
<script type="text/javascript">
function afficher(element){
	document.getElementById(element).style.display = "block";
}

function cacher(element){
	document.getElementById(element).style.display = "none";
}
</script>
</head>
<body>
	<a href="Mapage1.html" onMouseOver="javascript:afficher('message1');" onMouseOut="javascript:cacher('message1');" >
		<input type="button" value="aller sur Mapage1.html" />
	</a>
	<br />
	<a href="Mapage2.html" onMouseOver="javascript:afficher('message2');" onMouseOut="javascript:cacher('message2');" >
		<input type="button" value="aller sur Mapage2.html" />
	</a>
	<br />
	<a href="Mapage3.html" onMouseOver="javascript:afficher('message3');" onMouseOut="javascript:cacher('message3');" >
		<input type="button" value="aller sur Mapage3.html" />
		</a>
	<br />
	<a href="Mapage4.html" onMouseOver="javascript:afficher('message4');" onMouseOut="javascript:cacher('message4');" >
		<input type="button" value="aller sur Mapage4.html" />
		</a>
	<br />
	<div>
		zone de message<br />
		**************<br />
		<div id="message2" style="display: none;" >Message caché 2</div>
		<div id="message1" style="display: none;" >Message caché 1</div>
		<div id="message3" style="display: none;" >Message caché 3</div>
		<div id="message4" style="display: none;" >Message caché 4</div>
		**************
	</div>
</body>
</html>


En cachant les messages puis :
- OnMouseOver pour afficher
- OnMouseOut pour cacher

6
HTMLdébutant
18 janv. 2009 à 16:55
Merci pour tout Azer_ty... c'est parfaitement ce que je recherchait.
Tu es un génie.
Problème résolu.
0
Pascal
23 sept. 2009 à 19:03
Superbe cette solution.

Quelqu'un pourrait-il la compléter...

1- Je souhaiterais que les liens soient dans des cellules d'un tableau.

2- Que la couleur de font de cellule change au passage de la souris.

Merci d'avance.
0
francky
1 mars 2012 à 17:29
vraiment très bon code, je l'ai un peu retravaillé mais sinon c'est super.
Un grand merci
0
Réponse 2 / 2
Azer_Ty Messages postés 104 Date d'inscription vendredi 31 octobre 2008 Statut Membre Dernière intervention 4 juillet 2011 60
18 janv. 2009 à 20:30
Au plaisir.
0