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
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:

<img src="http://img11.hostingpics.net/pics/381520NAV.png" alt="" usemap="#map1384090203669">

<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>
Pour plus de précisions n'hésitez pas

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
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.
3
+ 1 là on parle d javascript, HTML ne permet pas de programmation et à juste titre de programmation événementielle comme c'est le cas pour onmouse, cad des listener (ou observateur en français) qui vont repérer un événement pour faire une action.

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);
}
0
yes et oui c'est bien du HTML non pas du Javascript, mais en fait j'utilise une application Facebook pour une page fan et l'appli n'accepte que les codes HTML ou iframe pour pouvoir reconstituer une boutique en ligne, donc obliger d'utiliser des images et liens avec des hovers pour rendre le rendu optimal
0
telliak Messages postés 3655 Date d'inscription mercredi 20 septembre 2006 Statut Membre Dernière intervention 27 mars 2024 875
Modifié par telliak le 10/11/2013 à 23:00
C'est très désobligeant ces individus qui qualifient d'un -1 une réponse, sans avoir le courage d'en expliciter la raison.
1
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
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.
0
Profil bloqué
10 nov. 2013 à 23:03
Pas bête!! Mais tu pense que je peut les mettre les uns a coter des autres sans utiliser de CSS? car l'application facebook n'autorise que du Html?
0
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
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:

<a href="lien1.html"><img src="image1.png" border="0" alt="Image" onmouseover="this.src='image1-out.png';" onmouseout="this.src='image1.png';" /></a>

<a href="lien2.html"><img src="image2.png" border="0" alt="Image" onmouseover="this.src='image2-out.png';" onmouseout="this.src='image2.png';" /></a>
etc...
0
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
Bonjour,

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.
-1
Profil bloqué
10 nov. 2013 à 22:38
Beau Goss ça marche super! Thank You!
0
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
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é ?
0
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
Plaisir! Mets le sujet en résolu.
0
Résolu ou pas vous dites ds choses fausses...
0
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
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...
0