Discussion :

[knice]

Salut,
j'aimerais faire un truc [un peu] technique, mais je ne vois pas comment m'y prendre.

L'idée étant que j'ai le plan d'une ville sur une image. Cette ville y est décomposée en zones non régulières. Je les ai faites avec un :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<img src="img/plan.png" width="148" height="200" usemap="#Map" />
<map name="Map" id="Map">
   <area shape="poly" coords="8,97,43,97,56,46,50,19,31,1,2,1,2,34,5,44" href="#" />
</map>

Ce que j'aimerais faire : au moment où l'on clique sur une zone, elle se grise (ou s'éclaire) pour montrer qu'elle est (dé)sélectionnée.

Est-ce que vous sauriez comment je peux m'y prendre ?

[emmanuel.remy]

Salut,

Suis peut-être pas la meilleur des conseils pour faire ce type de chose, mais si j'avais le couteau sous la gorge avec ta contrainte de map d'image je créerais autant d'images gif ou png qu'il y a de zones, avec un fond transparent et ne laissant apparaitre que le fond gris de la zone concernée.
Ensuite je superposerais l'ensemble des images au plan de la ville et je gèrerais le click et mouseover pour montrer uniquement l'image relative à la zone concernée.

Mais si je devais concevoir ce type de plan, je partirais sur une solution plutôt orientée SVG, car alors on peut manipuler chaque polygone en le remplissant etc...

ERE

[knice]

Lol, ouai, violent ^^
J'y avais pensé, mais je me suis dit qu'il devait y avoir mieux.

L'histoire des SVG, je peux le faire sur mon site ? (sachant que je ne code pas en XHTML)

[emmanuel.remy]

Re,

Lol, ouai, violent ^^
J'y avais pensé, mais je me suis dit qu'il devait y avoir mieux.

L'histoire des SVG, je peux le faire sur mon site ? (sachant que je ne code pas en XHTML)

A voir, mais regarde ce lien c'est un truc du même style qu'il te faut.
http://www.orvinfait.fr/svg/carte/france.html

Et aussi ce post: http://www.developpez.net/forums/d70...-carte-france/


ERE

[knice]

Ca me semble parfait tout ça.
J'essaie d'implémenter ça et je passe en résolu.

Merci beaucoup

[knice]

Ce que je vais dire va sembler totalement fou, mais Internet Explorer ne gère pas ce format.

Donc c'est foutu :'(

Je risque de devoir passer à la méthode bourine du début...

[emmanuel.remy]

Ce que je vais dire va sembler totalement fou, mais Internet Explorer ne gère pas ce format.

Donc c'est foutu :'(

Je risque de devoir passer à la méthode bourine du début...

C'est vrai qu'il faut installer le plugin SVG d'adobe dans le cas de IE.

ERE

[gwyohm]

C'est vrai qu'il faut installer le plugin SVG d'adobe dans le cas de IE.

ERE

Et en passant par un canvas et la librairie excanvas de google (pour IE) ?
J'ai déjà joué avec, c'est assez puissant...

[knice]

Ben en fait j'ai fait le truc des images supersposées à la bourrin.
Ca marche bien ^^

Le seul problème, c'est pour placer les images. Internet Explorer et Firefox ne semblent pas se fixer sur le même point pour placer l'image (par ex: ie place par rapport à son coin supérieur gauche, et firefox par rapport au centre de l'image).

Donc je cherche, et dès que j'aurai trouvé je balance le code ^^

[knice]

Bon, ben voilà la bête ^^

côté HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<td rowspan="2" style="border:1px red solid;" id="tdMap">
   <div style="width: 180px; height: 200px;"></div>
   <img id="map0" class="planville" style="z-index: 20;" src="img/ville-plan/ville-centre-ville.png" alt="Plan de ville" title="Rechercher dans une zone de ville" width="163" height="200" usemap="#Map_ville" />
   <img id="map1" class="planville" style="z-index: 1;"  src="img/ville-plan/ville-studios-clair.png" alt="studios sur ville" title="a définir"></img>
   <img id="map2" class="planville" style="z-index: 2;"  src="img/ville-plan/ville-studio-clair.png" alt="studio sur ville" title="a définir"></img>
   <img id="map3" class="planville" style="z-index: 3;"  src="img/ville-plan/ville-appartements-clair.png" alt="appartements sur ville" title="à définir"></img>
   <img id="map4" class="planville" style="z-index: 4;"  src="img/ville-plan/ville-appartement-clair.png" alt="appartement sur ville" title="à définir"></img>
 
   <map name="Map_ville" id="Map_ville">
      <area shape="poly" coords="22,16,22,43,27,54,29,98,59,100,68,54,61,35,43,18" href="javascript:alert('rouge');"> <!-- rouge -->
      <area shape="poly" coords="28,106,28,176,41,176,58,105" href="javascript:alert('orange');"> <!-- orange -->
      <area shape="poly" coords="58,125,46,177,91,173,91,138" href="javascript:alert('jaune');"> <!-- jaune -->
      <area shape="poly" coords="69,74,84,72,96,80,122,66,121,55,123,40,112,25,102,28,92,48,74,59,69,63" href="javascript:alert('vert');"> <!-- vert -->
      <area shape="poly" coords="68,76,60,120,98,134,116,129,99,94,84,76" href="javascript:alert('bleu');"> <!-- bleu -->
      <area shape="poly" coords="103,84,127,144,132,133,142,138,147,113,143,97,135,76,139,69,124,68" href="javascript:alert('rose');"> <!-- rose -->
      <area shape="poly" coords="96,144,97,179,105,186,114,185,117,170,124,154,116,136" href="javascript:alert('violet');"> <!-- violet -->
      <!-- les alentours de ville -->
      <area shape="poly" coords="0,0,0,101,22,102,22,57,17,48,17,9,48,10,70,38,70,0" href="javascript:alert('nord-ouest');"> <!-- nord-ouest -->
      <area shape="poly" coords="0,108,0,199,92,199,91,179,22,182,22,108" href="javascript:alert('sud-ouest');"> <!-- sud-ouest -->
      <area shape="poly" coords="95,190,94,199,162,199,162,114,152,116,146,147,135,143,128,156,120,189" href="javascript:alert('sud-est');"> <!-- sud-est -->
      <area shape="poly" coords="162,0,73,1,72,38,110,19,128,34,130,62,153,59,142,81,152,112,162,113" href="javascript:alert('nourd-est');"> <!-- nord-est -->
   </map>
</td>

côté css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.planville
{
   position: absolute;
   top: 0%;
   left: 0%;
}

Et enfin, le javascript (pfiou) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
function findPosX(obj) {
  var curleft = 0;
  obj = document.getElementById(obj);
  if (document.getElementById || document.all) {
    while (obj.offsetParent) {
      curleft += obj.offsetLeft
      obj = obj.offsetParent;
    }
  } else if (document.layers)
    curleft += obj.x;
  return curleft;
}
 
function findPosY(obj) {
  var curtop = 0;
  obj = document.getElementById(obj);
  if (document.getElementById || document.all) {
    while (obj.offsetParent) {
      curtop += obj.offsetTop
      obj = obj.offsetParent;
    }
  } else if (document.layers)
    curtop += obj.y;
  return curtop;
}
 
function placerImages() {
  var x = findPosX('tdMap');
  var y = findPosY('tdMap');
  var browser=navigator.appName
  for (var i=0; i<5; i++) {
    if (browser=="Microsoft Internet Explorer") {
      document.getElementById('map'+i).style.left = (x+100)+'px';
    } else {
      document.getElementById('map'+i).style.left = x+'px';
    }
    document.getElementById('map'+i).style.top = y+'px';
  }
}

Voilou, c'est à peu près tout ^^