Apparaitre image sur texte en y posant souris
Fermé
benhayounix
Messages postés
17
Date d'inscription
mardi 31 août 2010
Statut
Membre
Dernière intervention
18 septembre 2010
-
2 sept. 2010 à 16:08
Groarh Messages postés 682 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 28 juin 2015 - 2 sept. 2010 à 17:04
Groarh Messages postés 682 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 28 juin 2015 - 2 sept. 2010 à 17:04
A voir également:
- Apparaitre image sur texte en y posant souris
- Apparaitre hors ligne instagram - Guide
- Apparaitre hors ligne whatsapp - Guide
- Image iso - Guide
- Mettre un texte en majuscule - Guide
- Quelle touche pour débloquer la souris ? - Guide
1 réponse
Groarh
Messages postés
682
Date d'inscription
vendredi 1 août 2008
Statut
Membre
Dernière intervention
28 juin 2015
185
2 sept. 2010 à 17:04
2 sept. 2010 à 17:04
Hello !
P'tit coup de JavaScript. Il faut surveiller l'évènement mouseover de la balise HTML qui contient le nom de ton jeu (et mouseout pour retirer l'image quand la souris repart).
Comme d'habitude quand je commence à parler d'évènements JavaScript, j'aime bien dire qu'il y a une mauvaise et une bonne méthode. Cependant, j'imagine que tu es débutant en JavaScript alors je commence par te conseiller la mauvaise méthode car elle est plus facile ;)
Il faut rajouter les attributs onmouseover et onmouseout à la balise HTML de ton texte. Ces attributs doivent contenir du code JS qui va afficher ou masquer l'image.
Voilà un exemple complet assez simple :
Le reste n'est qu'affaire de CSS.
C'est une « mauvaise méthode » car elle oblige à écrire du code JavaScript dans les attributs HTML, ce qui ne permet pas de bien séparer les aspects contenu et comportement de la page. Ça rend la maitenance plus difficle...
;)
P'tit coup de JavaScript. Il faut surveiller l'évènement mouseover de la balise HTML qui contient le nom de ton jeu (et mouseout pour retirer l'image quand la souris repart).
Comme d'habitude quand je commence à parler d'évènements JavaScript, j'aime bien dire qu'il y a une mauvaise et une bonne méthode. Cependant, j'imagine que tu es débutant en JavaScript alors je commence par te conseiller la mauvaise méthode car elle est plus facile ;)
Il faut rajouter les attributs onmouseover et onmouseout à la balise HTML de ton texte. Ces attributs doivent contenir du code JS qui va afficher ou masquer l'image.
Voilà un exemple complet assez simple :
<h1 onmouseover="afficheImage()"
onmouseout="masqueImage()">Truc bidule</h1>
<img id="truc-bidule"
alt="truc bidule" src="url_bidon/image.jpg"
width="100" height="100"
style="display: none" />
<script>
var trucBidule = document.getElementById('truc-bidule');
function afficheImage() {
trucBidule.style.display = 'block'; // ou 'inline'
};
function masqueImage() {
trucBidule.style.display = 'none';
};
</script>
Le reste n'est qu'affaire de CSS.
C'est une « mauvaise méthode » car elle oblige à écrire du code JavaScript dans les attributs HTML, ce qui ne permet pas de bien séparer les aspects contenu et comportement de la page. Ça rend la maitenance plus difficle...
;)
