Modification image au passage de la souris
saluc42
Messages postés
5
Date d'inscription
Statut
Membre
Dernière intervention
-
macgawel Messages postés 664 Date d'inscription Statut Membre Dernière intervention -
macgawel Messages postés 664 Date d'inscription Statut Membre Dernière intervention -
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.
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.
A voir également:
- Modification image au passage de la souris
- Suivi de modification word - Guide
- Quelle touche pour débloquer la souris ? - Guide
- Passage qwerty azerty - Guide
- Image iso - Guide
- Logiciel gratuit modification pdf - Guide
2 réponses
saluc42
Messages postés
5
Date d'inscription
Statut
Membre
Dernière intervention
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.
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)
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 :
A faire pour chaque image en donnant un id différent à chaque fois...
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="#"> </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...