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
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
A voir également:
- Modification image au passage de la souris
- Frédéric cherche à faire le buzz sur les réseaux sociaux. il a ajouté une image de manchots sur une image de plage. retrouvez l'image originale de la plage. que cachent les manchots ? ✓ - Forum Windows
- Recherche par image - Guide
- Image iso - Guide
- Faststone image viewer - Télécharger - Visionnage & Diaporama
- Passage qwerty azerty - Guide
2 réponses
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
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)
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...
27 mai 2008 à 16:32