Accueil Médias sociaux Comment créer des swaps avec plusieurs images dans Dreamweaver - des nuls

Comment créer des swaps avec plusieurs images dans Dreamweaver - des nuls

Table des matières:

Vidéo: Créer des zones réactives sur une image — Dreamweaver 2025

Vidéo: Créer des zones réactives sur une image — Dreamweaver 2025
Anonim

Avant de commencer à créer une page plus complexe avec le comportement de Swap Image de Dreamweaver Avec le comportement Permuter l'image, vous pouvez remplacer une ou toutes les images d'une page.

Lorsque vous utilisez le comportement Permuter l'image, il est important de faire en sorte que toutes les images soient de la même taille (hauteur et largeur) Si les images n'ont pas la même taille, toutes les images sauf la première seront étirées ou compressées pour correspondre à l'espace occupé par la première image insérée dans la page.

Si vous utilisez le comportement Permuter l'image avec une série d'images qui n'ont pas toutes la même hauteur et la même largeur, vous avez quelques options:

Recadrez les plus grandes pour que toutes les images aient la même taille.

Faites en sorte que les images horizontales et verticales occupent le même espace dans votre conception en combinant deux images verticales pour chaque image horizontale. Dans un programme tel que Photoshop, insérez deux images verticales dans le même fichier côte à côte, puis dimensionnez cette image pour que le fichier ait la même taille qu'une image horizontale.

Créez un fichier image de la taille de votre plus grande image, réglez l'arrière-plan sur une couleur neutre, comme le noir ou le blanc, puis insérez toutes les autres images sur l'arrière-plan afin de les enregistrer toutes avec la même taille de fichier.

Procédez comme suit pour utiliser le comportement Permuter l'image:

1Créez un modèle de page avec toutes les images que vous souhaitez afficher initialement.

Chacune des trois photos dans la conception de page pour le Tower Bridge à Londres a deux copies: une miniature et une version plus grande. Lorsque la page est chargée pour la première fois dans un navigateur Web, les trois vignettes sont positionnées en bas de la page, la première des grandes versions correspondantes étant affichée dans la zone principale juste au-dessus des vignettes.

2Nombrez vos images dans l'inspecteur des propriétés.

Pour cibler vos images avec JavaScript, ce qui explique le fonctionnement des comportements, attribuez d'abord un identifiant unique à chaque image. L'ID de l'image n'est pas identique au nom de fichier de l'image ou à la balise de texte, bien que vous puissiez utiliser des noms identiques ou similaires. Les ID d'image ne doivent pas contenir d'espaces ou de caractères spéciaux.

3Choisissez Fenêtre → Comportements.

Le panneau Comportements s'ouvre. Vous pouvez faire glisser le panneau Comportements ailleurs sur la page, et vous pouvez l'agrandir en déplaçant le bas ou le côté. Vous pouvez également fermer tous les autres panneaux ouverts pour gagner de la place en cliquant sur la barre gris foncé en haut de chaque panneau.

4Sélectionnez une image.

Sélectionnez l'image dans la page qui servira de déclencheur pour l'action.

5Choisissez le comportement Permuter l'image.

Une fois l'image du déclencheur sélectionnée dans l'espace de travail, cliquez sur le signe plus dans le panneau Comportements pour ouvrir la liste déroulante des actions et choisir l'action que vous souhaitez appliquer.

6Spécifiez les images à échanger dans la boîte de dialogue Permuter l'image.

Dans la liste Images, sélectionnez l'ID de l'image à remplacer. Cliquez sur le bouton Parcourir pour sélectionner l'image qui remplace l'image principale. Si l'image n'est pas déjà enregistrée dans le dossier du site local, Dreamweaver vous proposera de le copier pour vous.

7Au bas de la boîte de dialogue Permuter l'image, sélectionnez l'option Précharger les images pour indiquer au navigateur de charger toutes les images dans le cache lorsque la page est chargée.

Si vous ne sélectionnez pas cette option, un délai peut se produire lors de l'utilisation de l'échange d'image.

8Si vous le souhaitez, désélectionnez l'option Restaurer les images OnMouseOut.

L'option Restore Images OnMouseOut signifie que lorsqu'un événement est terminé (par exemple lorsque la souris est déplacée de la vignette de déclenchement), l'image d'origine est remplacée. Par défaut, Dreamweaver présélectionne cette option pour le comportement d'échange d'images. Vous pouvez désélectionner cette option si vous trouvez que le remplacement de l'image originale chaque fois que vous passez le curseur sur une autre vignette est gênant.

9Après avoir spécifié tous les paramètres du comportement, cliquez sur OK.

Le nouveau comportement apparaît dans le panneau Comportements.

10Spécifiez un événement pour le comportement.

Une fois l'action appliquée, vous pouvez revenir en arrière et spécifier l'événement qui déclenchera l'action. Par défaut, Dreamweaver applique l'événement OnMouseOver lorsque vous utilisez l'action Swap Image, mais vous pouvez changer cet événement en un événement disponible, tel que OnClick, qui nécessite que l'utilisateur clique sur l'image pour déclencher l'action Swap Image.

11Appliquez des comportements supplémentaires.

Pour appliquer le comportement Permuter l'image à d'autres images d'une page, répétez les étapes 5 à 10, en cliquant pour sélectionner l'image que vous souhaitez utiliser comme déclencheur, puis en spécifiant l'image correspondante à permuter.

12 Testez votre travail dans un navigateur.

Vous ne pouvez pas voir les effets de comportements comme celui-ci avant de cliquer sur le bouton Vue en direct en haut à gauche de l'espace de travail dans Dreamweaver ou de prévisualiser votre page dans un navigateur Web.

Comment créer des swaps avec plusieurs images dans Dreamweaver - des nuls

Le choix des éditeurs

Pour les seniors: Comment travailler avec Windows dans Microsoft Windows - les nuls

Pour les seniors: Comment travailler avec Windows dans Microsoft Windows - les nuls

Windows, avec un W majuscule, tire son nom de sa caractéristique principale: Windows, avec un w minuscule. Se familiariser avec Windows signifie apprendre à ouvrir, fermer, redimensionner, déplacer et basculer entre les fenêtres, ce qui est la clé pour jongler avec succès avec plusieurs activités. Chaque programme que vous exécutez occupe sa propre fenêtre. Une fenêtre peut occuper une partie de ...

Comment accepter ou rejeter les cookies dans Safari - dummies

Comment accepter ou rejeter les cookies dans Safari - dummies

Un cookie est un petit fichier qu'un site Web enregistre automatiquement sur le disque dur de votre Mac. Il contient des informations, telles que vos préférences ou votre date de naissance, que le site utilisera lors de vos prochaines visites. Dans Mac OS X Snow Leopard, Safari vous permet de choisir d'accepter ou non tous les cookies ...

Le choix des éditeurs

Construire des boîtes et des lignes Bézier dans QuarkXPress - des nuls

Construire des boîtes et des lignes Bézier dans QuarkXPress - des nuls

Pour créer une boîte ou une ligne dans QuarkXPress plus complexe qu'un simple rectangle, ovale ou starburst, vous entrez dans le domaine du chemin de Bézier. Si vous avez utilisé l'outil Plume dans Adobe Illustrator ou Photoshop, vous comprenez déjà les chemins de Bézier. Il faut un peu de pratique et un esprit détendu ...

Création d'un rapport avec Crystal Reports 10 - témoins

Création d'un rapport avec Crystal Reports 10 - témoins

Lorsque vous démarrez Crystal Reports 10, généralement l'une des trois choses suivantes: créer un rapport, modifier un rapport ou exécuter un rapport sur les données de votre base de données. Les rapports prennent des données à partir d'une base de données, les traitent, les formatent et les affichent ensuite sur une imprimante, un écran d'ordinateur ou un site Web. Crystal Reports ...

Traitant des commentaires Javadoc dans Eclipse - mannequins

Traitant des commentaires Javadoc dans Eclipse - mannequins

Lorsque vous utilisez Eclipse pour écrire du code Java, n'oubliez pas de éditez les commentaires de Javadoc (les choses qui commencent par / **). Vous pouvez ajouter des informations utiles lorsque vous modifiez les commentaires Javadoc et lorsque vous les modifiez, l'aide au code d'Eclipse propose des suggestions. N'oubliez pas ces astuces lorsque vous modifiez vos commentaires Javadoc: Ajouter un commentaire Javadoc: ...

Le choix des éditeurs

Les connexions cachées sur le Nikon D5600 - les nuls

Les connexions cachées sur le Nikon D5600 - les nuls

Ouvrent les couvercles sur les côtés gauche et droit du Nikon D5600 caméra, et vous verrez plusieurs ports de connexions cachées. Les ports de connexion suivants sont indiqués sur cette image: Terminal d'accessoires: ce terminal accepte les accessoires suivants: câble déclencheur à distance Nikon MC-DC2; Télécommandes sans fil WR-1 et WR-R10; et les unités GPS GP-1 / GP-1A. I ...

Les connexions cachées sur votre Nikon D5200 - les nuls

Les connexions cachées sur votre Nikon D5200 - les nuls

ÉParpillés sur l'extérieur de votre appareil photo sont nombreuses commandes que vous utilisez pour changer d'image -prend des paramètres, revoir et modifier vos photos, et effectuer diverses autres opérations. Caché sous le couvercle sur le côté gauche de la caméra, vous trouverez les quatre ports de connexion suivants, étiquetés dans cette figure: Borne accessoire: Vous pouvez brancher le Nikon en option ...

Des boutons et autres commandes du Nikon D7500 - mannequins

Des boutons et autres commandes du Nikon D7500 - mannequins

C'est génial d'avoir une carte pour le boutons et commandes sur votre appareil photo, mais ce n'est pas beaucoup d'aide si vous ne pouvez pas vous rappeler quel bouton appuyer sur quand (et pourquoi). Alors, voici un aperçu des fonctions des contrôles les plus importants. (Certains contrôles ont des fonctions supplémentaires pendant certaines opérations, mais la table ...