[Résolu] Problème avec les images-maps :'(

bonjour à tous !

Voilà j'ai un soucis avec le tuto sur les images-maps ..(http://css.alsacreations.com/xmedia/exemples/maps/maps.htm#)

je n'arrive pas à faire plus d'une image-map sur mon image..

voici le code de mes fichiers :
index.php

<div id="image">
<a id="zone1" href="roche.php" title="parcour de La Roche au Diable"></a>
<a id="zone2" href="rousson.php" title="parcour de Rousson"></a>
<a id="zone3" href="" title="test"></a>
</div>

fichier.css

#image {    /* bloc image en arrière-plan */
width : 956px;
height: 694px;
background: url(/plan/plan_yonne.jpg) top left no-repeat;
}
#zone1 {    /* les bordes: roche au diable */
float: left;
width : 14px;
height: 14px;
margin-left: 336px;
margin-top: 152px;
}
#zone2 { /* rousson: zone TT cross */
float: left;
width: 14px;
height: 14px;
margin-left: 0px;
margin-top: 0px; 
}
#zone3 { /* test */
float: left;
width: 50px;
height: 50px;
margin-left: 150px;
margin-top: 150px;
}

Merci de votre aide car je comprend pas tout..j'ai pourtant bien suivi le tuto.
Modifié par niko89 (25 May 2006 - 19:39)

un petit up

Il se passe quoi ?

As-tu pensé à définir un contour pour tes zone (comme sur le tuto) afin de visualiser leur position ?
Modifié par Netrunner (24 May 2006 - 19:52)

Le soucis en fait est que la seule zone cliquable n'est que la 1ère.
J'ai également testé avec le contour mais je ne vois que la zone1 entourée..
Modifié par niko89 (24 May 2006 - 20:42)

je re up..je ne comprend toujours pas mon soucis là ..

Aidez moi svp :'(

Bon, je viens de tester ton code, mais sans l'image de base ce n'est pas évident de tester l'effet voulu...

Pour ce que je peux observer dans mon test, je vois bien les trois zones. Tu dois donc avoir un pb avec les éléments qui précèdent la déclaration de #image.
Ensuite, tu ne pourras pas avoir deux zones de 14*14 car la taille de la police par défaut fait que tu as des zones de 14*20 (forcément puisque #zone contient du texte virtuelllement). Pour avoir du 14*14, il faut donc définir un font-size petit dans #image.

Sinon à part ça, ça fonctionne typiquement comme définit dans ton code sous IE et sous Moz :op
Modifié par Netrunner (25 May 2006 - 12:24)

Merci beaucoup de ton aide..

En fait j'ai compris.. il faut que je règle la position en "absolute" pour chaque zone..Le soucis était en fait que les zones se placaient en fonction de la 1ere zone définie..
rohhh la honte ..enfin bon en meme temps pour un débutant

Merci encore !

#image {    /* bloc image en arrière-plan */
width : 956px;
height: 694px;
background: url(/plan/plan_yonne.jpg) top left no-repeat;
}
#zone1 {    /* les bordes: roche au diable */
[b]position: absolute;[/b]
float: left;
width : 14px;
height: 14px;
margin-left: 336px;
margin-top: 152px;
border: 1px dotted black;
}
#zone2 { /* rousson: zone TT cross */
[b]position: absolute;[/b]
float: left;
width: 14px;
height: 14px;
margin-left: 78px;
margin-top: 232px;
border: 1px dotted black;
}
#zone3 { /* test */
[b]position: absolute;[/b]
float: left;
width: 50px;
height: 50px;
margin-left: 0px;
margin-top: 0px;
border: 1px dotted black;
}

mon "début" de site : ICI
Modifié par niko89 (25 May 2006 - 19:42)

Humm... es-tu bien sûr de ça ?
Si tu places tes éléments en absolute, il faut leur définir des coordonnées en règle générale. Un top et un left, c'est tout l'interêt du placement en absolute.
Le fait de placer des éléments en absolute fait qu'ils quittent le flux normal pour prendre place aux coordonnées définies par top et left.
Du coup ça rejoindrait ce que je t'ai dit plus haut : "tu dois avoir un élément placé au dessus de #image qui agit sur tes zones".

Pour un code propre je dirais qu'il faudrait soit placer tes éléments en absolute avec un top et un left, soit les laisser dans le flux mais voir qui agit sur eux (margin-left et margin-top).

Qu'en penses les autres ?