Modification image au passage de la souris

Fermé
saluc42 Messages postés 5 Date d'inscription lundi 26 mai 2008 Statut Membre Dernière intervention 19 février 2012 - 26 mai 2008 à 22:39
macgawel Messages postés 664 Date d'inscription mercredi 7 mai 2008 Statut Membre Dernière intervention 1 novembre 2008 - 28 mai 2008 à 09:28
Bonjour,

je suis un débutant dans la création de site internet. Jje voudrais que lorsque je passe la souris sur une photo (qui est un lien) celle-ci change. Je voudrais qu'elle passe d'une photo en niveau de gris à une photo en couleur (variation de l'opacité aussi en même temps). Est-ce que quelqu'un aurait une solution en html si possible, cela me sauverait la vie. Je sais coder dans aucun langage même pas html. Merci.

2 réponses

Tu peux faire en flash aussi ! :D
0
saluc42 Messages postés 5 Date d'inscription lundi 26 mai 2008 Statut Membre Dernière intervention 19 février 2012
27 mai 2008 à 16:32
Merci pour ta réponse, mais je ne connais pas flash non plus ! Si tu sais comment je peux faire avec, explique moi je peux essayer.
0
macgawel Messages postés 664 Date d'inscription mercredi 7 mai 2008 Statut Membre Dernière intervention 1 novembre 2008 90
28 mai 2008 à 09:28
Bonjour.

Tu peux faire une recherche sur google (mots clés : rollover image)

Tu devrais trouver pas mal de solution utilisant JavaScript, à coder ou déjà prêtes...

Ce serait bien aussi de nous dire avec quoi tu travailles pour ton site. Parce que faire un truc comme ça sans rien connaître, ce n'est pas évident...

Sinon, une solution en html + CSS, un peu lourde mais qui fonctionne sans trop de code :

1. Pour l'image :
Créer une nouvelle image, qui fait le double de hauteur de l'image d'origine.
En haut, tu mets ton image en noir et blanc.
En bas, tu mets ton image en couleur.

2. Pour ton html :
A l'endroit où tu veux mettre ton image, tu crées une balise de lien, qui ne servira qu'à afficher l'image.
id => sert à définir le type du lien, pour signaler dans ta feuille de style (CSS) comment le lien réagira.
href="#" => cliquer dessus n'a pas d'effet.
  => Espace insécable (on ne met jamais de lien vide)
<a id="rollover" href="#">&nbsp;</a>


3. Pour ton CSS :
Si tu utilises un fichier CSS, tu mets ton style dedans, sinon tu mets ta description de style dans le header de ta page...
Si tu le mets dans le header de ta page :
<head>
...
<style type="text/css">
#rollover {
	text-decoration: none;
	display:block;
	background-image:url(test.jpg);
	height:100px;
	width:100px
}
#rollover:hover {
	background-position:0 100px;
}
</style>
...
</head>

A faire pour chaque image en donnant un id différent à chaque fois...
0