Grande image cliquable
CARADOC
-
CARADOCK -
CARADOCK -
Bonjour ,
J'ai fait une image cliquable de tres grande taille http://www.guildekameloth.com/MAP-ARCHLORD-TP-h11.htm et j'aimerai savoir si je pouvait afficher une image au passage de la souris sur les rond.
pour l'instant je peux juste ouvrir une fenetre sur l'image en cliquant dans le rond mais en plus sa n'ouvre pas une nouvelle page se qui me gêne un peux,je suit pas tres fort dans se genre de truc donc si vous avez une solution sa m'arangerai merci.^^
J'ai fait une image cliquable de tres grande taille http://www.guildekameloth.com/MAP-ARCHLORD-TP-h11.htm et j'aimerai savoir si je pouvait afficher une image au passage de la souris sur les rond.
pour l'instant je peux juste ouvrir une fenetre sur l'image en cliquant dans le rond mais en plus sa n'ouvre pas une nouvelle page se qui me gêne un peux,je suit pas tres fort dans se genre de truc donc si vous avez une solution sa m'arangerai merci.^^
A voir également:
- Grande image cliquable
- Image iso - Guide
- Reduire taille image - Guide
- Légende image word - Guide
- Acronis true image gratuit - Télécharger - Sauvegarde
- Recherche image - Guide
2 réponses
Alors oui c'est assez simple mais vraiment lourd à coder dans le sens ou tu dois déterminer les coordonné de chacuns de tes cercles le code ressemble à ça :
<map name="testmap">
<area shape="circle" coords="104,18,14" href="#map">
</map>
Dans le href"#map" tu dois pouvoir ajouter une fonction javascript t'affichant un div ou tu pourras mettres les information sur la zone survolée par la souris.
Je te conseille d'utiliser un logiciel comme dreamweaver pour définir des diverses zones car trouver les coordonnées à la mains me parraît un peu difficile. Dreamweaver te permet de sélectionner ces zones de façon graphiques.
<map name="testmap">
<area shape="circle" coords="104,18,14" href="#map">
</map>
Dans le href"#map" tu dois pouvoir ajouter une fonction javascript t'affichant un div ou tu pourras mettres les information sur la zone survolée par la souris.
Je te conseille d'utiliser un logiciel comme dreamweaver pour définir des diverses zones car trouver les coordonnées à la mains me parraît un peu difficile. Dreamweaver te permet de sélectionner ces zones de façon graphiques.
en fait mon code resemble a sa pour l'instant.
<img src="archlord_map_TP.jpg" width="4864" height="3072" border="0" usemap="#map" />
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:PLACET -->
<area shape="circle" coords="607,653,53" href="http://img158.imageshack.us/img158/5014/tpscoutersite.jpg" />
<area shape="circle" coords="881,583,57" href="http://img5.imageshack.us/img5/5944/tpanchorvillevillage.jpg" />
<area shape="circle" coords="682,863,57" href="http://img158.imageshack.us/img158/7708/tpjamushisseal.jpg" />
<area shape="circle" coords="414,914,61" href="http://img5.imageshack.us/img5/6308/tpdelfarascity.jpg" />
<area shape="circle" coords="912,871,56" href="http://img5.imageshack.us/img5/8439/tpvengefullbassinentran.jpg" />
<area shape="circle" coords="742,1212,59" href="http://img5.imageshack.us/img5/8808/tprabinileriver.jpg" />
<area shape="circle" coords="1016,1028,53" href="http://img8.imageshack.us/img8/848/tpkingsbridge.jpg" />
<area shape="circle" coords="1265,1129,52" href="http://img5.imageshack.us/img5/2714/tptullan.jpg" />
<area shape="circle" coords="1011,1527,55" href="http://img158.imageshack.us/img158/5066/tpellhoamwatchover.jpg" />
<area shape="circle" coords="1299,1418,59" href="http://img5.imageshack.us/img5/549/tpsouthofshumpvillage.jpg" />
<area shape="circle" coords="1681,1048,58" href="http://img5.imageshack.us/img5/7006/tpreddhood.jpg" />
<area shape="circle" coords="1382,1637,60" href="http://img8.imageshack.us/img8/1702/tpsalamarisgarden.jpg" />
<area shape="circle" coords="1647,1658,57" href="http://img8.imageshack.us/img8/2343/tpellor.jpg" />
<area shape="circle" coords="1680,1489,60" href="http://img5.imageshack.us/img5/1522/tpthegreatofstump.jpg" />
<area shape="circle" coords="1854,1798,60" href="http://img5.imageshack.us/img5/9291/tpboundarybridge.jpg" />
</map>
<img src="archlord_map_TP.jpg" width="4864" height="3072" border="0" usemap="#map" />
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:PLACET -->
<area shape="circle" coords="607,653,53" href="http://img158.imageshack.us/img158/5014/tpscoutersite.jpg" />
<area shape="circle" coords="881,583,57" href="http://img5.imageshack.us/img5/5944/tpanchorvillevillage.jpg" />
<area shape="circle" coords="682,863,57" href="http://img158.imageshack.us/img158/7708/tpjamushisseal.jpg" />
<area shape="circle" coords="414,914,61" href="http://img5.imageshack.us/img5/6308/tpdelfarascity.jpg" />
<area shape="circle" coords="912,871,56" href="http://img5.imageshack.us/img5/8439/tpvengefullbassinentran.jpg" />
<area shape="circle" coords="742,1212,59" href="http://img5.imageshack.us/img5/8808/tprabinileriver.jpg" />
<area shape="circle" coords="1016,1028,53" href="http://img8.imageshack.us/img8/848/tpkingsbridge.jpg" />
<area shape="circle" coords="1265,1129,52" href="http://img5.imageshack.us/img5/2714/tptullan.jpg" />
<area shape="circle" coords="1011,1527,55" href="http://img158.imageshack.us/img158/5066/tpellhoamwatchover.jpg" />
<area shape="circle" coords="1299,1418,59" href="http://img5.imageshack.us/img5/549/tpsouthofshumpvillage.jpg" />
<area shape="circle" coords="1681,1048,58" href="http://img5.imageshack.us/img5/7006/tpreddhood.jpg" />
<area shape="circle" coords="1382,1637,60" href="http://img8.imageshack.us/img8/1702/tpsalamarisgarden.jpg" />
<area shape="circle" coords="1647,1658,57" href="http://img8.imageshack.us/img8/2343/tpellor.jpg" />
<area shape="circle" coords="1680,1489,60" href="http://img5.imageshack.us/img5/1522/tpthegreatofstump.jpg" />
<area shape="circle" coords="1854,1798,60" href="http://img5.imageshack.us/img5/9291/tpboundarybridge.jpg" />
</map>
