Salut,
 
J'ai une image(un avatar) et je voudrais faire quelque chose pour que quand on passe la souris sur l'image, et bien, il  y ait une couleur ou une image, en transparence qui aparait au premier plan.
 
Merci de m'aider, j'ai chercher des réponses mais je n'ai rien trouver...

N'y a-t-il personne pour m'aider?
En fait au passage de la souris, l'image devient noir transparent, et le message apparait: "Modifier", au lieu d'un message ça peut etre une image...

translucide plutot que transparent non ?

Oui, mais je ne sais pas comment m'y prendre, merci de m'aider...

une solution consiste à avoir deux images.
Dans onmouseover,l'image translucide remplace l'image de base
et dans onmouseout, l'image de base est remise en place.
Pour une bonne fluidité, il est recommandée de précharger les images en mémoire dés le début du chargement de la page.

Ca je peux pas, car les membre changent d'avatar, et dans l'image qu'on remplace, si je fait un gif ou pjng transparent, ça ne sera pas transparent dans l'image...

ca oblige d avoir deux images donc pas top (hits, poids de page...)
opacity marche tres bien
le probleme etant juste la petite bidouille pour ie6 qui, evidemment, ne gere pas l opacité par defaut et utilise donc un filtre de MS
filter:Alpha(opacity:50)
et pour les autres
opacity:0.5
 
par contre j ai jamais ajouté de filtre via js mais ca devrait pas etre plus compliqué que ca  

Y'a le PNG32 aussi (faussement appelé PNG24, mais c'est les 8 de plus qui gèrent l'alpha)
 
C'est supporté par IE7 et Moz depuis de nombreuses versions, donc aucun scrupule à envoyer au diables les crétins qui utilisent des copies pirates de Windows, et les nuxiens n'ont rien à dire sur le sujet puisque tous les navigateurs de moins de 10 ans sur cet OS supportent aussi
 
L'intérêt du PNG32, c'est que ça évite de bidouiller avec des filtres en JS et des propriétés CSS non reconnues d'une version à l'autre des différents navigateurs.
 
A noter enfin que sous IE6 il existe un hack JS qui permet de faire fonctionner le PNG32 (en chargeant le PNG dans une texture DirectX plutôt qu'une image directement, et vu que DX supporte l'alpha du PNG32...)

le png32 change pas d alpha au mouseover  
et je crois qu ie7 est passé en mise a jour critique et peut donc etre telechargé meme avec une copie pirate

ben non
 
mais au départ, y'a pas de message "modifier" sous l'image, et lorsque tu passes la souris, il s'affiche dessous, et zou
 
m'enfin pour moi c'est même plutôt l'inverse : on fait apparaître "modifier" en semi-transparence par dessus l'avatar, c'est plus simple à faire.

Je pensais à un truc du genre quoi...
 
http://www.bci-logs.fr/divers/avatar/test.htm
 
L'intérêt c'est qu'il n'y a pasz de script, et que le <a> utilisé est libre pour l'action à effectuer quand on clique

(bon, ok, vous avez le droit de râler à cause du A en mode block et de la multiplication des background, m'enfin ça marche )

Un peu lent ton truc
 
Pourquoi ne pas superposer les 2 images et changer le display du masque ?  
 
Genre :
 

 
L'inconvénient c'est qu'il est préférable que le masque fasse la même taille que l'avatar.

La lenteur, ça vient de ce crétin de IE qui sait pas mettre en cache les images utilisée par les CSS Il la re-télécharge à chaque fois cet empaffé (en local, ct super rapide )
 
Sinon, juste comme ça...
 
Tu peux cliquer sur ton avatar pour le modifier ? Parceque là, ton image vient se mettre par dessus ton lien, je suis pas certain que tu puisses encore cliquer du coup.
 
PS : Et t'aura le même problème de lenteur que moi, il faudrait utiliser une usine à gaz JS pour mettre en cache l'image.