Changement d'image au passage de la souris

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Changement d'image au passage de la souris

Message par Chertograd Dim 12 Fév 2012, 23:52

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.


Dernière édition par Chertograd le Mar 14 Fév 2012, 12:45, édité 1 fois
Chertograd

Chertograd
**

Messages : 59
Inscrit(e) le : 08/02/2012

http://vampires-kingdom.jdrforum.com/
Chertograd a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement d'image au passage de la souris

Message par Dr. Karlos Lun 13 Fév 2012, 00:46

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.
Dr. Karlos

Dr. Karlos
Membre actif

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

Dr. Karlos a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement d'image au passage de la souris

Message par Chertograd Lun 13 Fév 2012, 11:30

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%;}


     
Chertograd

Chertograd
**

Messages : 59
Inscrit(e) le : 08/02/2012

http://vampires-kingdom.jdrforum.com/
Chertograd a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement d'image au passage de la souris

Message par Dr. Karlos Mar 14 Fév 2012, 05:10

Bonsoir,

Vous placez ce code où vous désirez sur le forum, non dans une page Javascript. Wink 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.
Dr. Karlos

Dr. Karlos
Membre actif

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

Dr. Karlos a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement d'image au passage de la souris

Message par Chertograd Mar 14 Fév 2012, 12:41

Merci pour les précisions. Smile

Ç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.
Chertograd

Chertograd
**

Messages : 59
Inscrit(e) le : 08/02/2012

http://vampires-kingdom.jdrforum.com/
Chertograd a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum