Commande onmouseover et onmouseout en HTML
Résolu
Profil bloqué
-
GrifOli Messages postés 2111 Date d'inscription Statut Membre Dernière intervention -
GrifOli Messages postés 2111 Date d'inscription Statut Membre Dernière intervention -
Bonjour je recherche des conseils pour utiliser ces commandes (onmouseover et onmouseout) en code Purement HTML sachant que les images utiliser ne sont pas hébergées dans mon serveur mais rediriger par Liens d'un site hébergeur en ligne.
Voici le code que j'utilise actuellement sans Les fameuse commande Hover:
Voici le code que j'utilise actuellement sans Les fameuse commande Hover:
<img src="http://img11.hostingpics.net/pics/381520NAV.png" alt="" usemap="#map1384090203669">Pour plus de précisions n'hésitez pas
<map id="map1384090203669" name="map1384090203669">
<area shape="rect" coords="184,23,270,39" title="Products" alt="Products" href="https://outlawuniversity.bigcartel.com/products" target="_blank">
<area shape="rect" coords="294,23,446,39" title="Outlaw University" alt="Outlaw University" href="https://outlawuniversity.bigcartel.com/outlaw-university" target="_blank">
<area shape="rect" coords="469,23,543,38" title="Contact" alt="Contact" href="https://outlawuniversity.bigcartel.com/contact" target="_blank">
<area shape="rect" coords="567,25,613,35" title="Cart" alt="Cart" href="https://outlawuniversity.bigcartel.com/cart" target="_blank">
<area shape="rect" coords="798,89,799,90" alt="HTML Map" title="HTML Map" href="https://www.html-map.com/" target="_self">
</map>
A voir également:
- Onmouseover and onmouseout in html
- Editeur html - Télécharger - HTML
- Navigation in private - Guide
- Spybot search and destroy - Télécharger - Antivirus & Antimalwares
- Aux in ✓ - Forum Enceintes / HiFi
- Peut-on brancher un casque sur une prise auxiliaire ? - Forum Casque et écouteurs
3 réponses
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.
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.
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>
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.
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);
}