Image en couleur au survol

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

Résolu Image en couleur au survol

Message par silvia2 le Mer 4 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
****

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

silvia2 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Image en couleur au survol

Message par Lixyr le Mer 4 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
Aidactive
Aidactive

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

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image en couleur au survol

Message par silvia2 le Mer 4 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
****

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

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

Résolu Re: Image en couleur au survol

Message par Lixyr le Mer 4 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
Aidactive
Aidactive

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

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image en couleur au survol

Message par silvia2 le Mer 4 Aoû 2010 - 23:39

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

silvia2
****

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

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

Résolu Re: Image en couleur au survol

Message par Lixyr le Ven 6 Aoû 2010 - 10:01

De rien ! x )

Lixyr
Aidactive
Aidactive

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

http://forum-test-in-lixyr.rpg-dynasty.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


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