Posez votre question Signaler

Commande onmouseover et onmouseout en HTML [Résolu]

Makaveli90 227Messages postés lundi 2 février 2009Date d'inscription 10 novembre 2013 Dernière intervention - Dernière réponse le 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="http://www.outlawuniversity.bigcartel.com/products" target="_blank">
<area shape="rect" coords="294,23,446,39" title="Outlaw University" alt="Outlaw University" href="http://www.outlawuniversity.bigcartel.com/outlaw-university" target="_blank">
<area shape="rect" coords="469,23,543,38" title="Contact" alt="Contact" href="http://www.outlawuniversity.bigcartel.com/contact" target="_blank">
<area shape="rect" coords="567,25,613,35" title="Cart" alt="Cart" href="http://www.outlawuniversity.bigcartel.com/cart" target="_blank">
<area shape="rect" coords="798,89,799,90" alt="HTML Map" title="HTML Map" href="http://www.html-map.com/" target="_self">
</map>
Pour plus de précisions n'hésitez pas
Lire la suite 
Réponse
+1
moins plus
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.
Radingo- 10 nov. 2013 à 22:40
+ 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);
}
Répondre
Makaveli90 227Messages postés lundi 2 février 2009Date d'inscription 10 novembre 2013 Dernière intervention - 10 nov. 2013 à 22:46
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
Répondre
telliak 2439Messages postés mercredi 20 septembre 2006Date d'inscription 16 juin 2015 Dernière intervention - 10 nov. 2013 à 22:56
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.
Répondre
Ajouter un commentaire
Réponse
+1
moins plus
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.
Makaveli90 227Messages postés lundi 2 février 2009Date d'inscription 10 novembre 2013 Dernière intervention - 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?
Répondre
GrifOli 2125Messages postés samedi 28 juin 2008Date d'inscription 1 mai 2015 Dernière intervention - 11 nov. 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...
Répondre
Ajouter un commentaire
Réponse
-1
moins plus
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.
Radingo- 10 nov. 2013 à 22:43
Résolu ou pas vous dites ds choses fausses...
Répondre
GrifOli 2125Messages postés samedi 28 juin 2008Date d'inscription 1 mai 2015 Dernière intervention - 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...
Répondre
telliak 2439Messages postés mercredi 20 septembre 2006Date d'inscription 16 juin 2015 Dernière intervention - 10 nov. 2013 à 22:58
@GrifOli
Comme quoi il vaudrait mieux parfois s'abstenir.
Ma réponse quant à elle est parfaitement correcte et c'est une erreur révélatrice d'incompétence notoire que de proposer la solution <img src="image1.png" border="0" alt="Image" onmouseover="this.src='image2.png';" onmouseout="this.src='image1.png';" /> compte-tenu de la demande formulée : code Purement HTML.
Répondre
Makaveli90 227Messages postés lundi 2 février 2009Date d'inscription 10 novembre 2013 Dernière intervention - 10 nov. 2013 à 23:00
Le Seul Problème GrifOli c'est comment accorder les attributs "Croods" ?? CAR JE LES UTILISES et j'aimerais que les hovers réagissent que lorsque je survole cette endroit pas l'image en elle même..
Répondre
telliak 2439Messages postés mercredi 20 septembre 2006Date d'inscription 16 juin 2015 Dernière intervention - 10 nov. 2013 à 23:03
... pour un sujet résolu :)
Répondre
Ajouter un commentaire
Ce document intitulé «  Commande onmouseover et onmouseout en HTML  » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.