Cours et tutoriaux Photoshop, Flash, Fireworks, Paintshop et sur le développement de sites Web XHTML, PHP, MySQL...

Tutorial Fireworks : Comportements de survol

  • Introductions

  • Informations

  • Résultat

Apercu du tutorial comportements-de-survol

Fireworks permet d'inclure très facilement un comportement de survol à une image. Cela est très pratique pour faire un bouton ou un menu dont les dont les images doivent s'alterner au passage de la souris mais vous pouvez bien sur trouver d'autres applications à cette fonction.


Avatar de netger

Auteur : WebmasterNetger

Difficulté : Très facile
Création : 28/04/2005
Mise à jour : 05/11/2007

Nombre de visites : 1235


Aucun aperçu du résultat n'est disponible pour ce tutorial.

1. Créer un nouveau documentIcone remonter en haut de page

Commençons par créer un nouveau document possédant les propriétés suivantes :
- Largeur : 125 px
- Hauteur : 30 px
- Résolution : 72 pixels/pouce
- Contenu de l'arrière plan : Blanc

La taille définie ici est adaptée à l'exemple mais la méthode pour obtenir cet effet reste la même quelle que soit la taille.

2. Création ou importation du boutonIcone remonter en haut de page

Créez votre bouton ou importez le sur le calque

3. Outil "Découpe" et comportement de survolIcone remonter en haut de page

Avec l'outil "Découpe" sélectionnez l'ensemble du bouton (ou les différents bouton si vous faites une barre de navigation)
Maintenant cliquez sur le cercle blanc au centre de la découpe et sélectionnez "ajouter un comportement de survol simple"

4. ImportationIcone remonter en haut de page

Il ne vous reste plus qu'à cliquer sur "Fichier" et "importer".
Fireworks créera alors un fichier .html et un dossier image contenant 2 boutons identiques.
L'un de ces bouton est "l'état normal" et l'autre est "l'état de survol" (le nom du bouton "état de survol" est plus long).

Ouvrez le bouton d'état de survol dans Fireworks (ou n'importe quel autre éditeur graphique) et apportez lui les modifications que vous souhaitez.

Pour finir, enregistrez ce nouveau bouton au format .gif (qui est le format d'importation) sans le renommer.


Utilisez FireFoxW3C XHTML 1.0W3C CSS 2.1