Changer une image par une autre

• Dreamweaver (Comportements)
• Création de site

01/01-2004 à 00:00 :

---

De quoi avons nous besoin ?

En tout 3 images :
€ Celle qui sera survolée,
€ Celle qui sera affichée lors du chargement de la page,
€ Celle qui s'affichera lors du survol de la première image


La première image peut très bien être remplacée par un lien texte standard.

Il n'y a aucune contreindication concernant la première image. Par contre, les suivantes doivent être de la même taille. En effet l'image qui se substituera prendra la taille de l'image originale. Si elle est plus petite ou plus grande, elle sera déformée.


Procédure
€ Insérez votre image 1 qui sera celle survolée,
€ Insérez votre image qui sera remplacée, puis nommez-la.








Ensuite, sélectionnez l'image qui fera s'exécuter le changement (la première), faites apparaître la fenêtre des Comportements (Touche F8 ou icône en bas de la fenêtre), vous arrivez sur cette fenêtre :







Assurez-vous que la zone de liste Evènements pour est bien sur 4.0 and Later Browsers, puis cliquez sur pour ajouter un comportement. Celui qui nous intéresse est Intervertir une image. Sélectionnez-le, vous arrivez sur cette fenêtre







Dans la zone de liste, image "imagearemplacer" est le nom de que j'ai attribué à l'image. Si vous en avez plusieurs, sélectionnez la bonne.


Définir la source à : l'image qui remplacera lors du survol.


Précharger les images : si vous cochez cette case, les images qui s'afficheront lors du survol, seront chargées lors de l'appel de la page. Si vous ne cochez pas cette case, l'image sera chargée lors du survol uniquement.





Restaurer les images onMouseOut : cette case cochée, l'image originale sera restaurée lorsque vous quittez la zone de survol.

Voici quelques exemples qui vous aideront à mieux comprendre.

standard Sans le onMouseOut (l'image restera figée)
Pour la restaurer, cliquez sur l'image "survoler ici" Le survol remplace les 2 images

---

---

Dossiers

---