• HTML 4 : Créer une image cliquable côté client

    Par leong dans Divers tutos le 6 Octobre 2009 à 10:13
      Idea Une image cliquable (image map) est une image dont certaines portions possèdent des liens hypertextes vers d'autres ressources. Par exemple une carte sur laquelle il est possible de cliquer en différentes zones pour obtenir des informations sur ce qui s'y trouve.

    Les images cliquables sont de 2 sortes : côté client ou côté serveur. Celles côté client sont entièrement gérées par le navigateur de l'utilisateur. Elles s'exécutent plus rapidement, ne faisant pas appel au serveur. En outre on peut les tester depuis son ordinateur....

    Mr. Green Nous n'aborderons que les images côté client, qu'on se le dise ! Mr. Green

    Arrow Pour créer une image cliquable il faut :
    1. utiliser des zones en formes de rectangle, cercle ou polygone.
    2. Il faut ensuite définir les zones actives comportant un lien en fonction de leurs coordonnées...
    Par exemple pour un rectangle 21,23;99;84 ce qui donne coordonnée haut,gauche;droit,bas...
    Pour un cercle ça donne 156,56; 35 soit coordonnées centre;rayon...
    Un polygone donnera un truc dans ce genre, -222,27;252;27;271,53;249,89;226,89;206,52...
    Simple non ? la première coordonnée sera par exemple le point de départ du premier "côté" du poly, la deuxième la     coordonnée du point de fin du premier et début du deuxième....
    Le dernier point se refermera tout seul sur le premier...
    Arrow Essayez l'exemple, ça doit vous donner un genre de diamant... Okay

    Il n'est pas nécessaire d'être ultra précis dans les coordonnées...
    Le curseur du visiteur se changera en main en passant sur la zone désirée.

    L'image peut être une image créée (par un logiciel de dessin), ou n'importe quoi, comme une photo de montagne, de train, ou même une copie d'écran de logiciel (bien pour les tutos ça, faudra que je teste un jour)...

    Il faut évidemment sauver l'image sur le site, ainsi que le code ! Okay

    Idea Et maintenant, la cerise, le code lui même !!!!

    Celui ci sert à définir l'image cliquable, c'est le plan :
     
    Code:
    <IMG src=" formes.gif" usemap="#maptest">
    <MAP name=" test">
         <AREA SHAPE=" RECT"  COORDS=" 21,23,99,84"                       <la href="../pagecarre.html">                                                              <==== le lien
    </MAP>  


    Arrow Voilà, j'ai testé, ca marche ! Okay

    Tags Tags : , , , ,

  • Commentaires

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :