Discussion :

[Guiiil]

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 :

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

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 :

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

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 !

[SpaceFrog]

Plusieurs remarques quand au code ...


les attributs doivent être entre quotes.

Code :

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

id="Map_blind" class="blind_area"

les propriétés de css en minuscules

Code :

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

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

et une balise map se ferme ...

Code :

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

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 :

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

 usemap="#Map"

et

Code :

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

 name="map"

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

[Guiiil]

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 :

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

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 :

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

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

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

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û !

[SpaceFrog]

oui mais si le name du map n'est pas correct ...

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