Changement d'image au passage de la souris
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Changement d'image au passage de la souris
Bonjour,
La question a déjà été posée. J'ai essayé le code :
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.
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'">
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
Re: Changement d'image au passage de la souris
Bonsoir,
Essayez plutôt avec ce code:
Peu importe la taille, ça fonctionne.
Cordialement.
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- Membre actif
-
Messages : 2623
Inscrit(e) le : 03/01/2012
Re: Changement d'image au passage de la souris
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 {
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');
}
- 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%;}
Re: Changement d'image au passage de la souris
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.
Vous placez ce code où vous désirez sur le forum, non dans une page Javascript.

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- Membre actif
-
Messages : 2623
Inscrit(e) le : 03/01/2012
Re: Changement d'image au passage de la souris
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.
Merci beaucoup de l'attention portée à cette question !
Problème résolu.

Ç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">
Merci beaucoup de l'attention portée à cette question !
Problème résolu.

» Barre navigation personnalisé, changement au passage de la souris
» Changement d'image au passage de la souris
» Changement d'image au passage de la souris sur la barre de navigation
» .profile-icon changement au passage de la souris
» Au passage de la souris
» Changement d'image au passage de la souris
» Changement d'image au passage de la souris sur la barre de navigation
» .profile-icon changement au passage de la souris
» Au passage de la souris
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum