Fonction onclick et area
gsus01
Messages postés
3
Date d'inscription
Statut
Membre
Dernière intervention
-
gsus01 -
gsus01 -
Bonjour,
Je souhaiterai sélectionner à l'aide d'une map interactive une région qui peut se choisir également dans un menu déroulant. C'est à dire que au lieu de se servir du menu déroulant pour choisir une région, j'utilise une carte interactive. Quand je click sur une région cela sélectionne automatiquement mon choix dans le menu déroulant. J'aimerai pour cela avoir des suggestions de code pour mettre en relation la carte et le menu déroulant.
Merci d'avance!!!
Gauthier
Je souhaiterai sélectionner à l'aide d'une map interactive une région qui peut se choisir également dans un menu déroulant. C'est à dire que au lieu de se servir du menu déroulant pour choisir une région, j'utilise une carte interactive. Quand je click sur une région cela sélectionne automatiquement mon choix dans le menu déroulant. J'aimerai pour cela avoir des suggestions de code pour mettre en relation la carte et le menu déroulant.
Merci d'avance!!!
Gauthier
A voir également:
- Fonction onclick et area
- Fonction si et - Guide
- Fonction miroir - Guide
- Fonction moyenne excel - Guide
- Fonction remplacer sur word - Guide
- Fonction somme excel - Guide
8 réponses
Mais encore?
voici mon code pour la carte:
<div id="map">
<div class="map"><img src="images/tokyomap.png" alt="Tokyo Map" usemap="#Map" title="Tokyo Map"/>
<map name="Map" id="Map">
<area shape="poly" coords="46,89,174,115,190,186,105,189,35,222,3,201,3,126" href="#" alt="Nerima-ku" title="Nerima-ku" />
<area shape="poly" coords="97,92,132,49,219,47,258,155,192,172,180,112" href="#" alt="Itabashi-ku" title="Itabashi-ku" />
</map>
</div>
</div>
et voici mon formulaire
<div id="formulaire">
<h3>TokyoStay trouve votre appartement sur demande à Tokyo</h3>
<form action='' method='post' name='Form'>
<table width='100%' border='0' cellspacing='1' cellpadding='1'>
<tr><td align='right' width='30%'><span class='txtform'>Quartier :</span></td><td><select style='width:200 ;' name='f_1' size='1'>
<option selected value=0>Sélectionnez</option><option value=1>Toshima-ku</option><option value=2>Arakawa-ku</option><option value=3>Bunkyo-ku</option><option value=4>Taito-ku</option><option value=5>Shinjuku-ku</option><option value=6>Chiyoda-ku</option><option value=7>Shibuya-ku</option><option value=8>Minato-ku</option><option value=9>Meguro-ku</option><option value=10>Sumida-ku</option><option value=11>Chuo-ku</option><option value=12>Koto-ku</option><option value=13>Shinagawa-ku</option></select> <span class='txtform'><a href="#" alt="appel" onClick="myPopup2()"/>Voir la carte</a></span></td></tr>
<tr><td align='right' width='30%'><span class='txtform'>Surface :</span></td><td><select style='width:200 ;' name='f_2' size='1'>
<option selected value=0>Sélectionnez</option><option value=1>20m²</option><option value=2>20m² - 40m²</option><option value=3>40m² - 60²m</option><option value=4>60m² - 80²m</option><option value=5>80m² - 120²m</option><option value=6>120m² - 200²m</option><option value=7>200m²</option></select></td></tr>
<tr><td align='right' width='30%'><span class='txtform'>Budget :</span></td><td><select style='width:200 ;' name='f_3' size='1'>
<option selected value=0>Sélectionnez</option><option value=1>100000¥ - 200000¥</option><option value=2>200000¥ - 300000¥</option><option value=3>300000¥ - 400000¥</option><option value=4>400000¥ - 500000¥</option><option value=5>500000¥ - 600000¥</option><option value=6>700000¥ - 800000¥</option><option value=7></option><option value=8></option><option value=9></option><option value=10></option><option value=11></option><option value=12></option><option value=13></option></select></td></tr>
<tr><td align='right' width='30%'><span class='txtform'>Nom :</span></td><td><input type='text' style='width:200 ;' name='f_5' value='' size='24' border='0'></td></tr>
<tr><td align='right' width='30%'><span class='txtform'>Email :</span></td><td><input type='text' style='width:200 ;' name='f_7' value='' size='24' border='0'></td></tr>
<tr><td align='right' width='30%'><span class='txtform'>Tel :</span></td><td><input type='text' style='width:200 ;' name='f_8' value='' size='24' border='0'></td></tr>
<tr><td align='right' width='30%'><span class='txtform'>Message :</span></td><td><textarea style='width:360 ;' name='f_9' rows='6' cols='40'></textarea></td></tr>
<tr><td align='right' width='30%'></td><td><input type='submit' name='submit' value='Envoyer' border='0'></td></tr>
</table>
</form>
Comment faire un lien entre les deux?
Merciiiiii :)
voici mon code pour la carte:
<div id="map">
<div class="map"><img src="images/tokyomap.png" alt="Tokyo Map" usemap="#Map" title="Tokyo Map"/>
<map name="Map" id="Map">
<area shape="poly" coords="46,89,174,115,190,186,105,189,35,222,3,201,3,126" href="#" alt="Nerima-ku" title="Nerima-ku" />
<area shape="poly" coords="97,92,132,49,219,47,258,155,192,172,180,112" href="#" alt="Itabashi-ku" title="Itabashi-ku" />
</map>
</div>
</div>
et voici mon formulaire
<div id="formulaire">
<h3>TokyoStay trouve votre appartement sur demande à Tokyo</h3>
<form action='' method='post' name='Form'>
<table width='100%' border='0' cellspacing='1' cellpadding='1'>
<tr><td align='right' width='30%'><span class='txtform'>Quartier :</span></td><td><select style='width:200 ;' name='f_1' size='1'>
<option selected value=0>Sélectionnez</option><option value=1>Toshima-ku</option><option value=2>Arakawa-ku</option><option value=3>Bunkyo-ku</option><option value=4>Taito-ku</option><option value=5>Shinjuku-ku</option><option value=6>Chiyoda-ku</option><option value=7>Shibuya-ku</option><option value=8>Minato-ku</option><option value=9>Meguro-ku</option><option value=10>Sumida-ku</option><option value=11>Chuo-ku</option><option value=12>Koto-ku</option><option value=13>Shinagawa-ku</option></select> <span class='txtform'><a href="#" alt="appel" onClick="myPopup2()"/>Voir la carte</a></span></td></tr>
<tr><td align='right' width='30%'><span class='txtform'>Surface :</span></td><td><select style='width:200 ;' name='f_2' size='1'>
<option selected value=0>Sélectionnez</option><option value=1>20m²</option><option value=2>20m² - 40m²</option><option value=3>40m² - 60²m</option><option value=4>60m² - 80²m</option><option value=5>80m² - 120²m</option><option value=6>120m² - 200²m</option><option value=7>200m²</option></select></td></tr>
<tr><td align='right' width='30%'><span class='txtform'>Budget :</span></td><td><select style='width:200 ;' name='f_3' size='1'>
<option selected value=0>Sélectionnez</option><option value=1>100000¥ - 200000¥</option><option value=2>200000¥ - 300000¥</option><option value=3>300000¥ - 400000¥</option><option value=4>400000¥ - 500000¥</option><option value=5>500000¥ - 600000¥</option><option value=6>700000¥ - 800000¥</option><option value=7></option><option value=8></option><option value=9></option><option value=10></option><option value=11></option><option value=12></option><option value=13></option></select></td></tr>
<tr><td align='right' width='30%'><span class='txtform'>Nom :</span></td><td><input type='text' style='width:200 ;' name='f_5' value='' size='24' border='0'></td></tr>
<tr><td align='right' width='30%'><span class='txtform'>Email :</span></td><td><input type='text' style='width:200 ;' name='f_7' value='' size='24' border='0'></td></tr>
<tr><td align='right' width='30%'><span class='txtform'>Tel :</span></td><td><input type='text' style='width:200 ;' name='f_8' value='' size='24' border='0'></td></tr>
<tr><td align='right' width='30%'><span class='txtform'>Message :</span></td><td><textarea style='width:360 ;' name='f_9' rows='6' cols='40'></textarea></td></tr>
<tr><td align='right' width='30%'></td><td><input type='submit' name='submit' value='Envoyer' border='0'></td></tr>
</table>
</form>
Comment faire un lien entre les deux?
Merciiiiii :)
Un truc comme ça :
<script>
function choix(quartier)
{
document.getElementById('toto').options[quartier].selected="selected";
}
</script>
<div id="map">
<div class="map"><img src="tokyo.jpg" alt="Tokyo Map" usemap="#Map" title="Tokyo Map"/>
<map name="Map" id="Map">
<area shape="poly" coords="46,89,174,115,190,186,105,189,35,222,3,201,3,126" href="#" alt="Nerima-ku" title="Nerima-ku" onclick="choix(1);"/>
<area shape="poly" coords="97,92,132,49,219,47,258,155,192,172,180,112" href="#" alt="Itabashi-ku" title="Itabashi-ku" onclick="choix(2);"/>
</map>
</div>
</div>
<div id="formulaire">
<h3>TokyoStay trouve votre appartement sur demande à Tokyo</h3>
<form action='' method='post' name='Form'>
<table width='100%' border='0' cellspacing='1' cellpadding='1'>
<tr><td align='right' width='30%'><span class='txtform'>Quartier :</span></td><td><select id="toto" style='width:200 ;' name='f_1' size='1'>
<option selected value=0>Sélectionnez</option><option value=1>Toshima-ku</option><option value=2>Arakawa-ku</option><option value=3>Bunkyo-ku</option><option value=4>Taito-ku</option><option value=5>Shinjuku-ku</option><option value=6>Chiyoda-ku</option><option value=7>Shibuya-ku</option><option value=8>Minato-ku</option><option value=9>Meguro-ku</option><option value=10>Sumida-ku</option><option value=11>Chuo-ku</option><option value=12>Koto-ku</option><option value=13>Shinagawa-ku</option></select> <span class='txtform'><a href="#" alt="appel" onClick="myPopup2()"/>Voir la carte</a></span></td></tr>
<tr><td align='right' width='30%'><span class='txtform'>Surface :</span></td><td><select style='width:200 ;' name='f_2' size='1'>
<option selected value=0>Sélectionnez</option><option value=1>20m²</option><option value=2>20m² - 40m²</option><option value=3>40m² - 60²m</option><option value=4>60m² - 80²m</option><option value=5>80m² - 120²m</option><option value=6>120m² - 200²m</option><option value=7>200m²</option></select></td></tr>
<tr><td align='right' width='30%'><span class='txtform'>Budget :</span></td><td><select style='width:200 ;' name='f_3' size='1'>
<option selected value=0>Sélectionnez</option><option value=1>100000¥ - 200000¥</option><option value=2>200000¥ - 300000¥</option><option value=3>300000¥ - 400000¥</option><option value=4>400000¥ - 500000¥</option><option value=5>500000¥ - 600000¥</option><option value=6>700000¥ - 800000¥</option><option value=7></option><option value=8></option><option value=9></option><option value=10></option><option value=11></option><option value=12></option><option value=13></option></select></td></tr>
<tr><td align='right' width='30%'><span class='txtform'>Nom :</span></td><td><input type='text' style='width:200 ;' name='f_5' value='' size='24' border='0'></td></tr>
<tr><td align='right' width='30%'><span class='txtform'>Email :</span></td><td><input type='text' style='width:200 ;' name='f_7' value='' size='24' border='0'></td></tr>
<tr><td align='right' width='30%'><span class='txtform'>Tel :</span></td><td><input type='text' style='width:200 ;' name='f_8' value='' size='24' border='0'></td></tr>
<tr><td align='right' width='30%'><span class='txtform'>Message :</span></td><td><textarea style='width:360 ;' name='f_9' rows='6' cols='40'></textarea></td></tr>
<tr><td align='right' width='30%'></td><td><input type='submit' name='submit' value='Envoyer' border='0'></td></tr>
</table>
</form>
<script>
function choix(quartier)
{
document.getElementById('toto').options[quartier].selected="selected";
}
</script>
<div id="map">
<div class="map"><img src="tokyo.jpg" alt="Tokyo Map" usemap="#Map" title="Tokyo Map"/>
<map name="Map" id="Map">
<area shape="poly" coords="46,89,174,115,190,186,105,189,35,222,3,201,3,126" href="#" alt="Nerima-ku" title="Nerima-ku" onclick="choix(1);"/>
<area shape="poly" coords="97,92,132,49,219,47,258,155,192,172,180,112" href="#" alt="Itabashi-ku" title="Itabashi-ku" onclick="choix(2);"/>
</map>
</div>
</div>
<div id="formulaire">
<h3>TokyoStay trouve votre appartement sur demande à Tokyo</h3>
<form action='' method='post' name='Form'>
<table width='100%' border='0' cellspacing='1' cellpadding='1'>
<tr><td align='right' width='30%'><span class='txtform'>Quartier :</span></td><td><select id="toto" style='width:200 ;' name='f_1' size='1'>
<option selected value=0>Sélectionnez</option><option value=1>Toshima-ku</option><option value=2>Arakawa-ku</option><option value=3>Bunkyo-ku</option><option value=4>Taito-ku</option><option value=5>Shinjuku-ku</option><option value=6>Chiyoda-ku</option><option value=7>Shibuya-ku</option><option value=8>Minato-ku</option><option value=9>Meguro-ku</option><option value=10>Sumida-ku</option><option value=11>Chuo-ku</option><option value=12>Koto-ku</option><option value=13>Shinagawa-ku</option></select> <span class='txtform'><a href="#" alt="appel" onClick="myPopup2()"/>Voir la carte</a></span></td></tr>
<tr><td align='right' width='30%'><span class='txtform'>Surface :</span></td><td><select style='width:200 ;' name='f_2' size='1'>
<option selected value=0>Sélectionnez</option><option value=1>20m²</option><option value=2>20m² - 40m²</option><option value=3>40m² - 60²m</option><option value=4>60m² - 80²m</option><option value=5>80m² - 120²m</option><option value=6>120m² - 200²m</option><option value=7>200m²</option></select></td></tr>
<tr><td align='right' width='30%'><span class='txtform'>Budget :</span></td><td><select style='width:200 ;' name='f_3' size='1'>
<option selected value=0>Sélectionnez</option><option value=1>100000¥ - 200000¥</option><option value=2>200000¥ - 300000¥</option><option value=3>300000¥ - 400000¥</option><option value=4>400000¥ - 500000¥</option><option value=5>500000¥ - 600000¥</option><option value=6>700000¥ - 800000¥</option><option value=7></option><option value=8></option><option value=9></option><option value=10></option><option value=11></option><option value=12></option><option value=13></option></select></td></tr>
<tr><td align='right' width='30%'><span class='txtform'>Nom :</span></td><td><input type='text' style='width:200 ;' name='f_5' value='' size='24' border='0'></td></tr>
<tr><td align='right' width='30%'><span class='txtform'>Email :</span></td><td><input type='text' style='width:200 ;' name='f_7' value='' size='24' border='0'></td></tr>
<tr><td align='right' width='30%'><span class='txtform'>Tel :</span></td><td><input type='text' style='width:200 ;' name='f_8' value='' size='24' border='0'></td></tr>
<tr><td align='right' width='30%'><span class='txtform'>Message :</span></td><td><textarea style='width:360 ;' name='f_9' rows='6' cols='40'></textarea></td></tr>
<tr><td align='right' width='30%'></td><td><input type='submit' name='submit' value='Envoyer' border='0'></td></tr>
</table>
</form>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Ah oui j'ai oublié de dire que la map s'ouvre dans un pop up. Donc quand j'ai cliqué sur la zone pour selectionner mon choix, je souhaiterai que le pop up se ferme automatiquement.
Vois tu une solution?
Merci d'avance!!
Gauthier
Vois tu une solution?
Merci d'avance!!
Gauthier
J'ai trouvé pour fermer la fenetre apres selection mais cependant vu que mon code pour la carte n'est pas dans la meme fenetre que le menu déroulant la selection ne fonctionne pas. La page qui s'ouvre s'appelle map.html ...
Une idée?
Gauthier
Une idée?
Gauthier
Hello, je suis de retour!
Aucune idée pour mon précédent post? C'est a dire comment faire le lien entre les deux pages pour que la fonction javascript de la carte agisse sur le formulaire sur l'autre page.
--> voici le lien du site : http://www.tokyostay.co.jp/premium/fr/index.php
Par avance merci :)
Aucune idée pour mon précédent post? C'est a dire comment faire le lien entre les deux pages pour que la fonction javascript de la carte agisse sur le formulaire sur l'autre page.
--> voici le lien du site : http://www.tokyostay.co.jp/premium/fr/index.php
Par avance merci :)
