Un effet de " roll-over" sur une image
Vous souhaitez créer, sur une page web, un bouton qui change de couleur au passage de la souris?
Voici la marche à suivre:
1 - Création des images
Pour réaliser cette opération, vous avez besoin de deux images, en principe de même taille.
Ici, j'ai choisi comme image "passive" (celle qui s'affichera tant que la souris ne survolera pas le bouton) un bouton aqua.
|
|
On va créer maintenant l'image "active" (celle qui s'affichera quand la souris survolera le bouton).
Ouvrez l'image "passive" dans PSP.
Avec l'outil "Sélection" 
, tracez un rectangle autour de la zone bleue:
|
|
Eclaicissez-là:
PSP 7: Couleurs - Ajuster - Luminosité/Contraste - Luminosité: 10 et % de contraste: 21
PSP 8: Réglage - Luminosité et contraste - Luminosité et contraste - Luminosité: 10 et % de contraste: 21
Enregistrez cette nouvelle image sous un nom différent de celui choisi pour l'image "passive".
Voici votre bouton actif (celui qui s'affichera au passage de la souris):
|
|
2 - L'installation du script
On doit maintenant ajouter un peu de Javascript.
Ici, j'ai utilisé 2 boutons:
|
btnpassif.gif
|
btnactif.gif
|
Attention, la manoeuvre n'est pas simple pour les débutants :o)
Commencez par ouvrir votre page HTML
(dans un éditeur HTML ou dans le Bloc-Note de Windows)
1ère étape: copiez et collez la commande suivante entre les balises <HEAD> et </HEAD> de votre page.
2ème étape: ajoutez la commande suivante à la fin du "tag" <Body>.
Remplacez "repertoireimage" par le nom du répertoire contenant vos images.
3ème étape: insérez vos liens html sur vos boutons:
Ici encore, vous devez remplacer:
"votrelien.htm" par un lien vers la page html que vous souhaitez,
"repertoireimage" par le nom du répertoire contenant vos images.
Pour finir, enregistrez votre page HTML.
Et voilà!
Vous pouvez télécharger le script --> ici
