Femmeactuelle.fr Cuisineactuelle.fr Femme Actuelle Hellocoton Femme actuelle Beauté addict | Toutes les applis

Astuce photoshop : le rollover html

Notez 2 notes

Objectif
Nous allons voir comment créer un Rollover, ou image réactive, à l'aide de Photoshop. En quelques mots, le Rollover permet de changer l'aspect d'une image au passage du pointeur et de l'associer à une URL.

ETAPE 1
Créer un bouton sur Photoshop et l'enregister.

ETAPE 2
Ouvrir le bouton avec ImageReady.

ETAPE 3
Séléctionner le calque de lueur du bouton, le dupliquer.

ETAPE 4
Jouer avec l'opacité et faire des vignettes différentes.

ETAPE 5
Enregistrer le bouton.

ETAPE 6
Ouvrir un logiciel de codage HTML (NVU...).

ETAPE 7
Mettre les 2 images sur un serveur.

ETAPE 8
Ecrire l'adresse de l'image au repos, celle-ci va apparaître dans le logiciel.

ETAPE 9
Aller dans le code source pour modifier le code du bouton et ajouter onmouseover="this.src='mettre l'adresse du bouton survolé'".

ETAPE 10
Ecrire une ligne onmouseout="this.src='mettre l'adresse du bouton au repos'".

Ailleurs sur le web