de l'utilisation de Mapper.js avec tous les navigateurs

Version imprimable

Bonsoir à vous !

Je suis actuellement en train de réaliser une carte et les area qui vont avec. Je voulais utiliser la bibliothèque mapper, facile d'utilisation, puisqu'il suffit de rajouter la classse "mapper" dans l'image.

Ceci se déroule parfaitement sous ie :

Code:

1
2
<DIV style="POSITION: absolute; WIDTH: 810px; HEIGHT: 335px; TOP: 0px; LEFT: 0px" id=Map_blind class=blind_area left="0" top="0"></DIV><IMG style="POSITION: absolute; FILTER: Alpha(opacity=0); WIDTH: 810px; HEIGHT: 335px; TOP: 0px; LEFT: 0px; MozUserSelect: none; KhtmlUserSelect: none" id=gmipam_0 border=0 src="http://localhost/barzi/assets/images/Carte_Monde/Carte_Monde.png" width=810 height=335 useMap=#Map unselectable="on" left="0" top="0"> 
<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:Anne-Marie --><AREA id=Map_0 href="http://Carte_monde.png" shape=poly alt="Continent Europe" target=Continent_Europe coords="442,121,424,121,401,117,389,110,371,110,355,114,341,116,328,141,305,139,279" shape="poly">

ce que me retourne ie

Mais n'a aucun effet sur Firefox ou Opera... Et je ne sais pas quoi retoucher, ou vérifier, pour pouvoir obtenir le résultat voulu...

Code:

1
2
3
4
5
6
7
8
<div style="position: relative; height: 335px; width: 810px; padding: 0px; -moz-user-select: none;">
<img id="gmipam_0_image" src="http://localhost/barzi/assets/images/Carte_Monde/Carte_Monde.png" style="position: absolute; height: 335px; width: 810px; left: 0px; top: 0px;">
<canvas id="gmipam_0_canvas" style="height: 335px; width: 810px; position: absolute; left: 0px; top: 0px;" height="335" width="810"></canvas>
<div id="Map_blind" class="blind_area" style="position: absolute; height: 335px; width: 810px; left: 0px; top: 0px;"> </div>
<img id="gmipam_0" class="" height="335" width="810" border="0" alt="tralalala" title="tralala" usemap="#Map" src="http://localhost/barzi/assets/images/Carte_Monde/Carte_Monde.png" style="position: absolute; height: 335px; width: 810px; left: 0px; top: 0px; -moz-user-select: none; opacity: 0;">
</div>
<map name="map">
<area href="http://Carte_monde.png" target="Continent_Europe" alt="Continent Europe" coords="442,121,424,121,401,117,389,110,371,110,355,114,341,116,328,141,305" shape="poly">

ce que me retourne firebug

Je vous remercie pour votre lecture et votre potentielle aide !

Plusieurs remarques quand au code ...

les attributs doivent être entre quotes.

Code:

id="Map_blind" class="blind_area"

les propriétés de css en minuscules

Code:

style="position: absolute; width: 810px; height: 335px; top: 0px; left: 0px"

et une balise map se ferme ...
Code:

1 2 3 <map name="map"> <area href="http://Carte_monde.png" target="Continent_Europe" alt="Continent Europe" coords="442,121,424,121,401,117,389,110,371,110,355,114,341,116,328,141,305" shape="poly"> </map>
de plus

Code:

usemap="#Map"

et

Code:

name="map"

mis cote à cote ... tu ne vois pas comme un souci ?
les id sont case sensitive

Désolé, j'ai posté ce message avant de partir, j'aurais dû d'avantage préciser et mettre en gras.

Le code de tous les périls ayant incité toutes tes repproches est ce que me retourne IE8 lorsque je regarde le code source de la page (et je n'en ai pris qu'un extrait) !

Le code que j'ai créé est tout simple, c'est celui ci (j'ai épuré les coords) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<div><img src="<?php echo base_url(); ?>assets/images/Carte_Monde/Carte_Monde.png" class="mapper" width="810" height="335" border="0" usemap="#Map" alt="Carte du monde" /></div>
 
<map name="map">
	<area shape="poly" coords="442,121,84,441,94,426,102,418,105,424,114,441,114,440,113" alt="Continent Europe" target="Continent_Europe" href="http://Carte_monde.png" />
	<area shape="poly" coords="27,70,25,67" alt="Amérique du Nord" target="Amerique_Nord" href="http://Carte_monde.png" />
	<area shape="poly" coords="149,161,151,164,147,165,146,170" alt="Amérique Centrale" target="Amerique_centre" href="http://Carte_monde.png" />
	<area shape="poly" coords="26,274,30,273,43" alt="Groenland, Islande en Europe" target="Groenland_Europe" href="http://Carte_monde.png" />
	<area shape="poly" coords="323,226,337,231,341" alt="Amérique du Sud" target="Amerique_Sud" href="http://Carte_monde.png" />
	<area shape="poly" coords="395,275,402,287,403,292" alt="Afrique" target="Afrique" href="http://Carte_monde.png" />
	<area shape="poly" coords="464,139,452,147" alt="Asie" target="Asie" href="http://Carte_monde.png" />
	<area shape="poly" coords="275,621,284,623,287,622,292" alt="Océanie" target="Oceanie" href="http://Carte_monde.png" />
</map>

mapper.js nécessite jusqu'au rajoute la classe "mapper" dans la balise img. Ensuite il se charge du reste. Sur Firefox,

Code:

<div><img src="<?php echo base_url(); ?>assets/images/Carte_Monde/Carte_Monde.png" class="mapper" width="810" height="335" border="0" usemap="#Map" alt="Carte du monde" /></div>

devient

Code:

1
2
3
4
5
6
<div style="position: relative; height: 335px; width: 810px; padding: 0px; -moz-user-select: none;">
<img id="gmipam_0_image" src="http://localhost/barzi/assets/images/Carte_Monde/Carte_Monde.png" style="position: absolute; height: 335px; width: 810px; left: 0px; top: 0px;">
<canvas id="gmipam_0_canvas" style="height: 335px; width: 810px; position: absolute; left: 0px; top: 0px;" height="335" width="810"></canvas>
<div id="Map_blind" class="blind_area" style="position: absolute; height: 335px; width: 810px; left: 0px; top: 0px;"> </div>
<img id="gmipam_0" class="" height="335" width="810" border="0" alt="tralalala" title="tralala" usemap="#Map" src="http://localhost/barzi/assets/images/Carte_Monde/Carte_Monde.png" style="position: absolute; height: 335px; width: 810px; left: 0px; top: 0px; -moz-user-select: none; opacity: 0;">
</div>

Et l'effet voulu (l'area devient transparent) fonctionne sur IE, mais pas sur les autres navigateurs... Et je n'arrive pas à savoir à quoi ceci est dû !

16/12/2011, 10h30
SpaceFrog

oui mais si le name du map n'est pas correct ...
16/12/2011, 10h54
Guiiil

Tu me donnes la réponse et je passe à coté V_v...

Merci en effet c'était ça ! J'ignorais que les id respectaient la casse, je n'avais jamais eu de problème avant, et étant donné que ça marchait sous ie... Jour après jour j'apprend ;-p.

Merci à toi, et encore désolé, mon cerveau doit encore dormir dans mon lit ! ^^