11499 sujets

JavaScript, DOM et API Web HTML5

Plan interactif (mappage) pour (très) grande débutante

Bonjour à tous.
Je m'adresse à vous car malgré toute ma bonne volonté, je suis complètement larguée.
Je voudrais mettre en place un plan interactif sur un site pour avoir accès aux diverses zones de l'appartement vue de dessus.
J'ai construit mon mappage en HTML. J'ai créé autant d'images annexes que de zones distinctes pour qu'au survol la zone soit isolée - images de taille identique car ce n'set pas la zone qui apparait mais le reste qui s'efface, j'ai donc en fait 1 image source et 8 autres images... Et donc là, c'est le drame, car j'ai bien compris qu'il fallait appeler Jquery (j'ai parcouru là et là (mais pas pareil car lui n'appelle pas des images différentes à chaque fois mais la même avec des coordonnées différentes) mais c'est absolument obscur pour moi ! ... je ne sais pas bien ni comment l'appeler, ni où insérer le script, ni quoi faire de ce fichier une fois qu'il sera terminé...
Pouvez-vous m'aider ?
Voilà mon image source :
http://sport-travail-biologie.com/wp-content/uploads/mappage.jpg

Voilà un exemple d'image que j'aimerais avoir au survol (la zone est mappée dans l'espace restant en couleurs normales) :
http://sport-travail-biologie.com/wp-content/uploads/salon.jpg

Voilà mon mappage html :
<html>
<head>
<title>mappage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<img src="mappage.jpg" width="998" height="681" border="0" alt="" usemap="#mappage_Map">
<map name="mappage_Map">
<area shape="poly" alt="" coords="680,270, 756,226, 832,181, 889,238, 947,294, 827,370, 766,302, 739,318, 695,289, 680,270" href="ch2" id="ch2" title="Chambre 2">
<area shape="poly" alt="" coords="670,102, 788,38, 841,88, 894,138, 772,209, 721,156, 670,102" href="#ch1" id="ch1" title="Chambre 1">
<area shape="poly" alt="" coords="581,148, 666,103, 740,180, 673,218, 657,199, 636,210, 581,148" href="ch3" id="ch3" title="Chambre 3">
<area shape="poly" alt="" coords="649,231, 579,150, 523,180, 538,198, 506,217, 552,273, 584,254, 593,265, 649,231" href="#sdb" id="sdb" title="Salle de bain et WC">
<area shape="poly" alt="" coords="494,370, 514,357, 483,315, 584,259, 615,303, 589,376, 506,386, 494,370" href="#entree" id="entree" title="Entrée">
<area shape="poly" alt="" coords="398,246, 488,198, 548,274, 456,326, 398,246" href="#cuisine" id="cuisine" title="Cuisine">
<area shape="poly" alt="" coords="138,385, 224,339, 309,294, 395,248, 454,331, 479,318, 509,357, 483,370, 487,376, 398,428, 309,480, 220,532, 179,459, 138,385" href="#salon" id="salon" title="Salon et Salle à manger">
<area shape="poly" alt="" coords="92,478, 159,441, 213,536, 141,577, 92,478" href="#terrasse" id="terrasse" title="terrasse">
</map>

Merci énormément d'avance pour toute l'aide (même la plus petite) que vous pourrez m'apporter!
Modifié par mymakao (14 Jun 2013 - 15:09)
Effectivement j'ai l'impression que cela pourrait correspondre sauf que .... je ne sais pas ce que je dois faire! Est-ce un plugin à télécharger dans wordpress (comme une extension?), est-ce que c'set un code à insérer, si oui où? et une fois insérer et enregistré (.html / .css / .php ????) je met ce fichier où?
Salut,
Je peux te conseiller d'utiliser un path en svg a la forme de ta pièce, avec un événement javascript "onmouseover".
Bonne chance @+
regardes le code source de la page exemple

sinon donnes le lien vers ta page si tu as déjà mis quelque chose en ligne, sans connaitre la structure de ton site on ne peut pas te conseiller correctement
J'ai essayé mais ça ne fonctionne pas.. j'ai collé le code 
<head>
	<meta charset="utf-8">
	<title>jQuery maphilight documentation</title>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
	<script type="text/javascript" src="http://davidlynch.org/projects/maphilight/jquery.maphilight.min.js"></script>
	<script type="text/javascript">$(function() {
		$('.map').maphilight();
	});</script>
</head>

à l'ouverture de mon post, mais ça n'a rien changé.
voilà le lien : http://sport-travail-biologie.com/stages/prapoutel/
il faut rajouter la classe map à l'image, comme dans l'exemple
<img class="map" alt="" src="http://sport-travail-biologie.com/wp-content/uploads/mappage.jpg" usemap="#mappage_Map" width="998" height="681" border="0" class="maphilighted" style="opacity: 0; position: absolute; left: 0px; top: 0px; padding: 0px; border: 0px;">
Smiley cligne

et personnellement je remplacerais
<script type="text/javascript">$(function() {
		$('.map').maphilight();
});</script>

par
<script type="text/javascript">$(document).ready(function() {
		$('.map').maphilight();
});</script>


du coup la fonction n'est lancée qu'au moment ou la page est prête.
Modifié par Zebrou (19 Jun 2013 - 21:30)
RHA, MERCI !!!!
Je m'en vais faire les liens vers les pages correspondantes tout à l'heure !
J'ai parcouru les spécifications particulières (mais c'est en anglais, je doute un peu de moi) car je voudrais (chiante chiante) que le cadre soit bleu (comme le reste du site #00bfff) et peut-être que je changerais l'ombre (intensité ou couleur, à voir) :

1 - je dois rajouter l'option voulue dans chaque ligne <area> ?
2 - "The defaults for all uses of maphilight can be set here. If you manually replace this, you have to specify all options." Je dois, pour chaque ligne, spécifier toutes les options ????
Modifié par mymakao (20 Jun 2013 - 18:15)
Alors j'ai lié mes zones, je n'ai pas encore regardé pour changer la couleur.
Est-il possible de rajouter une image au survol ? J'ai cherché côté tooltips, soit en CSS soit en javascript, mais je n'ai rien trouvé qui s'intégrait correctement avec tout ça...
Re-bonjour.
Je déterre le sujet car depuis quelques temps le code ne fonctionne plus (plus rien ne s'affiche). Je n'ai eu l'info que tard, car je ne m'occupe du site où j'ai eu besoin de mettre en place cette carte que de façon ponctuelle. Bref, plus rien ne s'affiche et je ne sais absolument pas pourquoi !!!!
J'ai constaté que mon code avait "sauté" (remplacement de certaie ligne de code par des caractères autres) dans wordpress, mais j'ai rétablis la version source qui fonctionnait (que j'avais pris soin d'enregistrer à part) et ça ne fonctionne pas plus...
Je ne sais pas quoi faire !! Où est-ce que ça merdoie ??? Merci d'avance !
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
 <script type="text/javascript" src="http://davidlynch.org/projects/maphilight/jquery.maphilight.min.js"></script>
 <script type="text/javascript">$(document).ready(function() {
 $(function() {
 $('.map').maphilight();
 $('#squidheadlink').mouseover(function(e) {
 $('#squidhead').mouseover();
 }).mouseout(function(e) {
 $('#squidhead').mouseout();
 }).click(function(e) { e.preventDefault(); });
 });
});</script>
<map name="mappage_Map">
<area id="ch1" title="Chambre 1" alt="" coords="670,102, 788,38, 841,88, 894,138, 772,209, 721,156, 670,102" shape="poly" href="http://sport-travail-biologie.com/appartement/?album=1&gallery=2" data-maphilight='{"strokeColor":"00bfff","strokeWidth":2,"fillColor":"00bfff","fillOpacity":0.2}' />
<area id="ch2" title="Chambre 2" alt="" coords="680,270, 756,226, 832,181, 889,238, 947,294, 827,370, 766,302, 739,318, 695,289, 680,270" shape="poly" href="http://sport-travail-biologie.com/appartement/?album=1&gallery=1" data-maphilight='{"strokeColor":"00bfff","strokeWidth":2,"fillColor":"00bfff","fillOpacity":0.2}' />
<area id="ch3" title="Chambre 3" alt="" coords="581,148, 666,103, 740,180, 673,218, 657,199, 636,210, 581,148" shape="poly" href="http://sport-travail-biologie.com/appartement/?album=1&gallery=3" data-maphilight='{"strokeColor":"00bfff","strokeWidth":2,"fillColor":"00bfff","fillOpacity":0.2}' />
<area id="sdb" title="Salle de bain et WC" alt="" coords="649,231, 579,150, 523,180, 538,198, 506,217, 552,273, 584,254, 593,265, 649,231" shape="poly" href="http://sport-travail-biologie.com/appartement/?album=1&gallery=4" data-maphilight='{"strokeColor":"00bfff","strokeWidth":2,"fillColor":"00bfff","fillOpacity":0.2}' />
<area id="entree" title="Entrée" alt="" coords="494,370, 514,357, 483,315, 584,259, 615,303, 589,376, 506,386, 494,370" shape="poly" href="http://sport-travail-biologie.com/appartement/?album=1&gallery=8" data-maphilight='{"strokeColor":"00bfff","strokeWidth":2,"fillColor":"00bfff","fillOpacity":0.2}' />
<area id="cuisine" title="Cuisine" alt="" coords="398,246, 488,198, 548,274, 456,326, 398,246" shape="poly" href="http://sport-travail-biologie.com/appartement/?album=1&gallery=6" data-maphilight='{"strokeColor":"00bfff","strokeWidth":2,"fillColor":"00bfff","fillOpacity":0.2}' />
<area id="salon" title="Salon et Salle à manger" alt="" coords="138,385, 224,339, 309,294, 395,248, 454,331, 479,318, 509,357, 483,370, 487,376, 398,428, 309,480, 220,532, 179,459, 138,385" shape="poly" href="http://sport-travail-biologie.com/appartement/?album=1&gallery=5" data-maphilight='{"strokeColor":"00bfff","strokeWidth":2,"fillColor":"00bfff","fillOpacity":0.2}' />
<area id="terrasse" title="terrasse" alt="" coords="92,478, 159,441, 213,536, 141,577, 92,478" shape="poly" href="http://sport-travail-biologie.com/appartement/?album=1&gallery=7" data-maphilight='{"strokeColor":"00bfff","strokeWidth":2,"fillColor":"00bfff","fillOpacity":0.2}' /> </map>
Sujet clos
Aller à