Changement d'image au passage de la souris

[Chertograd]

Bonjour,

La question a déjà été posée. J'ai essayé le code :

Code:

<img onMouseOver="this.src='image2.jpg'" src="image1.jpg"
onMouseOut="this.src='image1.jpg'">

Mais ça n'a pas l'air de fonctionner.

Je souhaite remplacer une image par une autre au passage de la souris, sauf que la taille n'est pas la même, car j'ai rajouté un texte. Est-ce possible comme manipulation ?



Merci d'avance pour les réponses à venir.

[Dr. Karlos]

Bonsoir,

Essayez plutôt avec ce code:

Code:

<img src="image_1" alt="Image" onmouseover="javascript:this.src='image_2';" onmouseout="javascript:this.src='image_1;" />


Peu importe la taille, ça fonctionne.


Cordialement.

[Chertograd]

Bonjour,

Ce code se met donc dans une nouvelle page Javascript ? Je mets donc les URL de chaque image, celle d'origine, et celle au survol de la souris, c'est bien ça ? Mais "Image" correspond à quelque chose ?


EDIT. J'ai remplacé "image_1" et "image_2" par les URL qu'il convenait de mettre, en créant une nouvelle page Javascript. Mais ça n'a pas l'air de fonctionner. Mais, j'ai l'impression qu'il faut enregistrer les images au sein même du forum, et non pas les héberger via un site quelconque.


Toutefois, j'ai trouvé un autre code qui fonctionne : a {

Code:

  background-image : url('url de l'image normale');
}
a:hover {
  background-image : url('url de l'image au survol');
}

A placer dans le CSS. Mais je dois avoir une balise qui n'est pas fermée, car ce code s'applique aux liens avec, en fond, l'image qui change au survol... Voici le CSS :

Code:

body {
background-repeat: no-repeat;
background-position: center top;
}



 
        .mainmenu{
              background-color: #1F1D1B;
              border: 1px solid #38322D;
              -moz-border-radius-topleft: 6px;
              -moz-border-radius-topright: 6px;
              -webkit-border-top-right-radius: 6px;
              -webkit-border-top-left-radius: 6px;
              border-top-right-radius: 6px;
              border-top-left-radius: 6px;
              padding: 3px;
            }


          .forumline {
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        }   


         
.mon_onglet{
          display: block;
          padding: 5px;
          margin: 4px;
          color: #A19789;
          background: #38322D;
          border: 1px solid #82795F;}
       
        .mon_onglet:hover{
          background: #4d4b46;} 
         
        .mon_onglet_selected{
          display: block;
          padding: 5px;
          margin: 4px;
          color: #A19789;
          background: #4d4b46;
          border: 1px solid #82795F;}
               
        .clear{
          clear: both;}
       
        .mon_contenu{
          color: #A19789;
          background: #38322D;
          border: 1px solid #82795F;
          padding: 50px;
          margin: 10 px;
          height: 200px;
          line-height: normal;
          font-size: 11px;}
       
        #mes_contenus, #mes_onglets{
          height: 100%;
          width:100%;}


     


[Dr. Karlos]

Bonsoir,

Vous placez ce code où vous désirez sur le forum, non dans une page Javascript. Sur le message d'accueil, dans un message, dans une page HTML, etc.

Vous changez "image_1" par l'image qui doit être vue lorsqu'il n'y a pas de survol et "image_2" par l'image qui doit être vue au survol. Remplacez le tout par l'url COMPLÈTE de vos images.

Par exemple: https://2img.net/u/2913/10/00/00/avatars/135529-26.png


Cordialement.

[Chertograd]

Merci pour les précisions.

Ça marche, sauf que lorsque la souris se déplace ailleurs que sur l'image, celle-ci reste comme si le curseur était toujours dessus.

EDIT. J'ai trouvé un autre code, dans un topic, qui fonctionne.

Code:

        <img src="Image_1" onmouseover=this.src="Image_2" onmouseout=this.src="Image_1">

Là, ça fonctionne.

Merci beaucoup de l'attention portée à cette question !




Problème résolu.