Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Ici, nous apprendrons à créer une image qui contiendra plusieurs liens suivant où l'on clique dessus.
Ce qui peut être très utile dans une bannière.
Tout d'abord nous devons déjà avoir une image déjà prête:
Pour ce tutorial je vais prendre la mienne:
J'aimerai que si quelqu'un clique sur actu, on le renvoie vers la page actu, et si il clique sur Forums, il aille sur le forum, etc.
Pour cela, rien de plus simple
Lancer Macromedia Fireworks, et ouvrer votre image (fichier / ouvrir ...)
On arrive donc a ceci:
Il faut maintenant s'intéresser à la partie web :
Cliquez sur Outil de référencement rectangulaire (celui entouré en vert)
Puis créer vos rectangles comme si vous vouliez créer un simple rectangle:
Puis il va falloir lui donner un lien, ça ce passe juste en dessous:
N'oubliez pas de mettre le http://... (Ça jouera un peu mieux)
Vous pouvez bien sûr répéter cette manipulation plusieurs fois, mais en changeant l'url, car sinon ça n'aurait pas de sens de faire plusieurs cadres.
Voila le résultat :
Pour pouvoir rendre notre image accessible avec tous les liens que nous lui avons incorporés, il ne suffit pas de l'enregistrer sous forme de GIF, il faut aussi lui ajouter un script qui nous donnera les coordonnées des différents liens.
Pour cela, pas besoin d'aller chercher très loin: Fireworks le fait tout seul.
Voyons comment faire:
Aller sous fichier et cliquer sur "Assistant exportation ..." puis cliquer sur "continuer", puis choisissez l'option qui vous convient, je suppose que c'est pour votre site web, alors cliquer sur Web.
Ensuite apparait un menu pour régler la qualité: Vous pouvez mettre ce que bon vous semble, pour ma part j'utilise du GIF 256 couleurs, à vous de voir.
Puis cliquer sur exporter:
Fireworks vas alors créer votre image (suivant le format présélectionné, pour ma part : ".GIF")
ainsi qu'un fichier ".html" .
Pratique non ???
Reprenons le fichier html que nous allons ouvrir avec Notepad++ ou autre,
Nous allons juste sélectionner le code qui nous intéresse, celui de l'image même.
On peut laisser tomber le "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" etc."
Voila donc notre magnifique code:
Code : HTML1
2
3
4
5
6 | <img name="sdfd" src="sdfd.gif" width="590" height="110" border="0" id="sdfd" usemap="#m_sdfd" alt="" /><map name="m_sdfd" id="m_sdfd">
<area shape="rect" coords="367,71,579,110" href="javascript:;" alt="" />
<area shape="rect" coords="362,43,585,65" href="javascript:;" alt="" />
<area shape="rect" coords="364,5,588,41" href="actu.html" alt="" />
<area shape="rect" coords="3,5,360,105" href="index.html" alt="" />
</map>
|
Celui ci est à insérer à la place de votre ancienne image ringarde!!!
Vous n'avez plus quà uploader tout ça et le tour est joué !!
C'était facile !! Non ?? ;)
Bien que ceci soit fantastique, il y a un moyen de l'améliorer en introduisant un effet au survol de la zone, mais cela est du domaine du css et je n'entrerai pas dans ces détails.
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
550 Zéros connectés |
8 requêtes |
0.0647s (0.0407s)
