Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

Mettre un lien dans une image

Dans cette section de tutos Dreamweaver, nous verrons comment mettre un lien ou plusieurs liens sur une seule image avec Dreamweaver ou avec du code JavaScript.

Une image avec un seul lien

Qu'il s'agisse d'une image photo ou d'un bouton, mettre un lien sur un graphique passe d'abord par l'insertion du bouton dans l'endroit voulu puis aller à l'inspecteur des propriétés pour y renseigner le lien et sa cible.

Bouton

Lien sur bouton

 

Et comme il s'agit d'une image, la configuration des paramètres comporte aussi la largeur, l'hauteur, la bordure, l'alignement...

Renseignez donc le lien dans Lien: une page de votre site que vous pouvez parcourir en cliquant sur l'icône Dossier à droite ou écrire manuellement l'adresse du lien. s'il s'agit d'une page d'un autre site, n'oubliez pas de mettre: http:// au début.

Pour la cible, renseignez si vous voulez que la page qui va s'ouvrir en cliquant sur l'image s'ouvre dans la même fenêtre "_self" ou dans une nouvelle fenêtre "_blank".

Une image avec plusieurs liens

Cette technique est valable aussi bien sûr pour les liens texte.

Il s'agit d'ouvrir plusieurs fenêtres du navigateur quand l'utilisateur clique sur un lien. Cette démarche repose sur du code Javascript.

 

Le code à insérer pour ouvrir deux fenêtres du navigateur quand on clique sur un lien:

<script language="javascript" type="text/javascript"> var url; function openURLs(){ for(i=0 ; i<url.length ; i++){ window.open("http://"+url[i]); } } </script> <button onclick="javascript:url=new Array(2);url[0]='www.dreamer.weboptime.com/optimiser-images-avec-fireworks.html';url[1]='www.dreamer.weboptime.com/optimiser-images-avec-photofiltre.html';openURLs()"> Ouvrir deux fenêtres</button>

Remplacez: www.dreamer.weboptime.com/optimiser-images-avec-fireworks.html et www.dreamer.weboptime.com/optimiser-images-avec-photofiltre.html

par les adresses des pages que vous voulez qu'elles s'ouvrent sans mettre de http:// au début et "Ouvrir deux fenêtres par le texte que vous voulez afficher sur le bouton.

Une zone réactive sur image

Il s'agit de mettre plusieurs liens sur une seule image avec Dreamweaver en utilisant la technique Map ou zone réactive.

Pour ce faire, insérer une image dans l'endroit voulu de votre page de site puis dans l'inspecteur des propriétés en bas choisissez la forme de la zone.

Zone réactive Map avec Dreamweaver

Dessinez votre forme sur l'image puis allez à Lien dans Propriétés et insérez le lien. Faites de même pour les autres zones et voilà!

Ajouter lien à zone réactive

Le résultat: quand on place le pointeur de la souris sur une zone (où est écrit un mot) on découvre un lien:

Image réactive

 

 

Dreamweaver® est une marque déposée d'Adobe® Systems Incorporated. Les logos et les noms de marques cités dans ce site sont les propriétés respectives de leurs développeurs.

 

Création de sites web

hit counter