Commande onmouseover et onmouseout en HTML
Résolu/Fermé
Profil bloqué
-
Modifié par Makaveli90 le 10/11/2013 à 18:13
GrifOli Messages postés 2111 Date d'inscription samedi 28 juin 2008 Statut Membre Dernière intervention 26 mars 2020 - 11 nov. 2013 à 21:03
GrifOli Messages postés 2111 Date d'inscription samedi 28 juin 2008 Statut Membre Dernière intervention 26 mars 2020 - 11 nov. 2013 à 21:03
A voir également:
- Onmouseover and onmouseout in html
- Editeur html - Télécharger - HTML
- In da place - Forum Mail
- Light in the box problème ✓ - Forum Consommation & Internet
- Fast and furious torrent magnet ✓ - Forum Téléchargement
- Av in - Forum Audio
3 réponses
telliak
Messages postés
3655
Date d'inscription
mercredi 20 septembre 2006
Statut
Membre
Dernière intervention
27 mars 2024
875
10 nov. 2013 à 22:13
10 nov. 2013 à 22:13
Salut,
des conseils pour utiliser ces commandes (onmouseover et onmouseout) en code Purement HTML
Pour faire quoi ? Sachant que, sauf erreur de ma part, l'on part vers du javascript.
des conseils pour utiliser ces commandes (onmouseover et onmouseout) en code Purement HTML
Pour faire quoi ? Sachant que, sauf erreur de ma part, l'on part vers du javascript.
GrifOli
Messages postés
2111
Date d'inscription
samedi 28 juin 2008
Statut
Membre
Dernière intervention
26 mars 2020
591
10 nov. 2013 à 22:23
10 nov. 2013 à 22:23
Le problème dans ton cas, c'est que tu utilises une seule image pour tous tes liens...
Tu devrais les séparer en des images différentes pour ne modifier que l'image au-dessus de laquelle la souris pointe.
Tu devrais les séparer en des images différentes pour ne modifier que l'image au-dessus de laquelle la souris pointe.
GrifOli
Messages postés
2111
Date d'inscription
samedi 28 juin 2008
Statut
Membre
Dernière intervention
26 mars 2020
591
Modifié par GrifOli le 11/11/2013 à 21:03
Modifié par GrifOli le 11/11/2013 à 21:03
Oui tu peux mettre côte à côte des images en html, tu n'as qu'à mettre une succession de balises <img /> comme j'ai écrit dans ton sujet.
Pour y mettre un lien, tu rajoutes la balise <a href="lien.html"> </a>.
Exemple:
Pour y mettre un lien, tu rajoutes la balise <a href="lien.html"> </a>.
Exemple:
<a href="lien1.html"><img src="image1.png" border="0" alt="Image" onmouseover="this.src='image1-out.png';" onmouseout="this.src='image1.png';" /></a>etc...
<a href="lien2.html"><img src="image2.png" border="0" alt="Image" onmouseover="this.src='image2-out.png';" onmouseout="this.src='image2.png';" /></a>
GrifOli
Messages postés
2111
Date d'inscription
samedi 28 juin 2008
Statut
Membre
Dernière intervention
26 mars 2020
591
Modifié par GrifOli le 10/11/2013 à 22:46
Modifié par GrifOli le 10/11/2013 à 22:46
Bonjour,
Voici comment utiliser le onmouseover et onmouseout:
Tu remplaces image1.png par l'image affichée quand la souris n'est pas au-dessus de l'image, et tu remplaces image2.png par l'image affichée quand la sourée est au-dessus de l'image.
Voici comment utiliser le onmouseover et onmouseout:
<img src="image1.png" border="0" alt="Image" onmouseover="this.src='image2.png';" onmouseout="this.src='image1.png';" />
Tu remplaces image1.png par l'image affichée quand la souris n'est pas au-dessus de l'image, et tu remplaces image2.png par l'image affichée quand la sourée est au-dessus de l'image.
telliak
Messages postés
3655
Date d'inscription
mercredi 20 septembre 2006
Statut
Membre
Dernière intervention
27 mars 2024
875
10 nov. 2013 à 22:39
10 nov. 2013 à 22:39
pas besoin de javascript Ah ?
this.src='image2.png' est du HTML pur ?
Pourquoi les commandes ne sont -elles plus opérantes si Javascript est désactivé ?
this.src='image2.png' est du HTML pur ?
Pourquoi les commandes ne sont -elles plus opérantes si Javascript est désactivé ?
GrifOli
Messages postés
2111
Date d'inscription
samedi 28 juin 2008
Statut
Membre
Dernière intervention
26 mars 2020
591
10 nov. 2013 à 22:39
10 nov. 2013 à 22:39
Plaisir! Mets le sujet en résolu.
GrifOli
Messages postés
2111
Date d'inscription
samedi 28 juin 2008
Statut
Membre
Dernière intervention
26 mars 2020
591
10 nov. 2013 à 22:48
10 nov. 2013 à 22:48
Désolé, j'ignorais que cette ligne de commande faisait intervenir du javascript... mais bon, je crois que ce que cette personne voulait en bout de ligne, c'était de faire fonctionner cette commande à partir de son code HTML...
10 nov. 2013 à 22:40
Donc:
Voici comment utiliser le onmouseover et onmouseout (pas besoin de javascript):
<img src="image1.png" border="0" alt="Image" onmouseover="this.src='image2.png';" onmouseout="this.src='image1.png';" />
C'est bien du javascrript sinon comment voulez vous utiliser "this"(éminente notion de programmation) ainsi que les onmouseXXX ?
Cela fait bien longtemps que CSS )à remplacé cela, depuis que son apparition, que la fonction (javascript)connue sous le nom de swapImage(ou remplace l'image) n'est plus faite en javascript mais en CSS par le biais des pseudo classes.
Cela à plusieurs avantages dont se débarrasser de la programmation pour quelque chose qui ne concerne que l'affichage. L'avantage aussi de ne pas avoir de javascript est que le site fonctionneras si javascript n'est pas activé et bien sûr c'est beaucoup plus simple en utilisant CSS.
#imagechangeausurvol{
background-image:url(imageinitiale.png);
}
#imagechangeausurvol:hover{
background-image:url(imagesurvol.png);
}
Modifié par Makaveli90 le 10/11/2013 à 22:48
Modifié par telliak le 10/11/2013 à 23:00