javascript et image

Version imprimable

04/10/2009, 22h51
knice

javascript et image
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:

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 ?
05/10/2009, 01h03
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... :D

ERE
05/10/2009, 01h10
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)
05/10/2009, 01h24
emmanuel.remy

Re,

Citation:

Envoyé par 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)

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
05/10/2009, 12h01
knice

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

Merci beaucoup :)
05/10/2009, 12h18
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...
06/10/2009, 00h24
emmanuel.remy

Citation:

Envoyé par 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...

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

ERE
06/10/2009, 13h03
gwyohm

Citation:

Envoyé par emmanuel.remy

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...
06/10/2009, 23h51
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 ^^

Bon, ben voilà la bête ^^

côté HTML :

Code:

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:

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

Et enfin, le javascript (pfiou) :

Code:

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 ^^