Image en couleur au survol

2 participants

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

Résolu Image en couleur au survol

Message par silvia2 Mer 04 Aoû 2010, 14:47

Bonjour !

Je voudrais savoir si il était possible de trouver un code qui ferait que, lorsque l'on survole sur image, elle change. Par exemple un code où on pourrait mettre deux liens d'images. Le premier pour l'image au naturel, et le second lorsqu'elle est survolée. Si je demande ça c'est parce que je souhaiterais qu'au survol mes images passent du noir et blanc à la couleur.

Je vous remercie par avance I love you
silvia2

silvia2
****

Féminin
Messages : 248
Inscrit(e) le : 03/06/2007

http://www.throwndice.com/
silvia2 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Image en couleur au survol

Message par Lixyr Mer 04 Aoû 2010, 14:53

Un truc de ce genre la ??

(tu places ce code dans ta feuille css
affichage>>couleur>>feuille de style css)

Code:
.imgopa {
opacity: 0.3 ;
}

.imgopa:hover {
opacity: 1;
}


(tu peux évidemment changer les valeurs qui correspondent à "opacity", c'est le niveau d'opacité de l'image avant et après le passage de la souris, à toi de toucher à ça après, test y a que comme ça qu'on apprend)

Puis à l'endroit où tu mets ton image, tu places ce code :

Code:
 <span class="imgopa"><img src="TON IMAGE" border="0" alt="" /></span>


Ça te va ???
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image en couleur au survol

Message par silvia2 Mer 04 Aoû 2010, 21:31

C'est super I love you ça rend super bien, j'aime beaucoup !
Toutefois ce que je cherchais exactement serait un code à placer dans un message, où on pourrait mettre 2 images. L'une serait celle avant le passage de la souris, et la seconde pour après passage de la souris.
silvia2

silvia2
****

Féminin
Messages : 248
Inscrit(e) le : 03/06/2007

http://www.throwndice.com/
silvia2 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image en couleur au survol

Message par Lixyr Mer 04 Aoû 2010, 23:12

C'est plus la même chose et tu dois encore utiliser du css ! x)

Alors là j'avais réussi un semblant de css, mais on ne voyait que la moitié de l'image (va savoir pourquoi).
Il est tard, j'abandonne, j'essaierai plus tard Mad

Tente ta chance avec ce code :

Code:
.lock  {
  position: relative;
  cursor: pointer;
}
.lock .lock-hidden {
  /* center */
  display: none;
  position: absolute;
  top: 1px;
  right: 0.4px;
  padding-left : 6px;
  padding-right : 6px;
  padding-top  : 5px;
  padding-bottom : 5px;
 
  /* style du bloc qui apparait */
  border: 2px solid #51738C;
  border-radius: 5px;
  background-color: transparent;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  text-align: center;
}
.lock:hover .lock-hidden {
  display: block;
}
que tu places dans ta feuille css
Tu dois modifier les valeurs :

Code:
  top: 1px;
  right: 0.4px;
de px (1 et 0.4) jusqu'à ce que ta deuxième image, celle qui apparait au survol de la première image, tombe sur la première.

et le code à mettre dans ta page :

Code:
<table>
<tr>
<td><div class="lock">[img]Ta première Image[/img]<div class="lock-hidden">[img]Ta deuxième image[/img]</div></div>
</td>
</tr>
</table>

C'est tout ce que je peux faire pour le moment. Mad J'essaierai de trouver un code plus simple plus tard.

Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image en couleur au survol

Message par silvia2 Mer 04 Aoû 2010, 23:39

C'est super !! I love you Merci beaucoup c'est exactement ce que je voulais !
silvia2

silvia2
****

Féminin
Messages : 248
Inscrit(e) le : 03/06/2007

http://www.throwndice.com/
silvia2 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image en couleur au survol

Message par Lixyr Ven 06 Aoû 2010, 10:01

De rien ! x )
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr 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