Aficher le lieu du visiteur

Aficher le lieu du visiteur

Messagede quentinmontana le Jeu 3 Juil 2008 22:43

Idéal pour un formulaire, le visiteur peut choisir sur une carte sa vile ou sa région.
Le résultat s'afiche dans une Alert.

Le code :


Entre <HEAD> et </HEAD> :

Code: Tout sélectionner
<script type="text/javascript">
var lieu="";
function map() {
lieu="Lille";
}
function map1() {
lieu="Amiens";
}
function map2() {
lieu="Reims";
}
function map3() {
lieu="Metz";
}
function map4() {
lieu="Strasbourg";
}
function map5() {
lieu="Besançon";
}
function map6() {
lieu="Lyon";
}
function map7() {
lieu="Marseille";
}
function map8() {
lieu="Ajaccio";
}
function map9() {
lieu="Monpelier";
}
function map10() {
lieu="Toulouse";
}
function map11() {
lieu="Bordeaux";
}
function map12() {
lieu="Poitiers";
}
function map13() {
lieu="Limoges";
}
function map14() {
lieu="Clermond Ferrand";
}
function map15() {
lieu="Dijon";
}
function map16() {
lieu="Orleans";
}
function map17() {
lieu="Nantes";
}
function map18() {
lieu="Caen";
}
function map19() {
lieu="Rennes";
}
function map20() {
lieu="Rouen";
}
function map21() {
lieu="Paris";
}
function map22() {
lieu="Nord Pas de Calais";
}
function map23() {
lieu="Picardie";
}
function map24() {
lieu="Haute Normandie";
}
function map25() {
lieu="Ile de France";
}
function map26() {
lieu="Champagne Ardennes";
}
function map27() {
lieu="Lorraine";
}
function map28() {
lieu="Alsace";
}
function map29() {
lieu="Franche Comte";
}
function map30() {
lieu="Bourgogne";
}
function map31() {
lieu="Rhones Alpes";
}
function map32() {
lieu="Provence Alpes Cote d'azur";
}
function map33() {
lieu="Corse";
}
function map34() {
lieu="Languedoc Roussillon";
}
function map35() {
lieu="Midi Pyrenees";
}
function map36() {
lieu="Centre";
}
function map37() {
lieu="Basse Normandie";
}
function map38() {
lieu="Bretagne";
}
function map39() {
lieu="Pays de Loire";
}
function map40() {
lieu="Poitou - Charentes";
}
function map41() {
lieu="Limousin";
}
function map42() {
lieu="Aquitaine";
}
function map43() {
lieu="Auvergne";
}
function mapvalid() {
alert("Lieu : " + lieu );
}
</script>


Entre <BODY> et </BODY> :

Code: Tout sélectionner
<img SRC="http://www.editeurjavascript.com/scripts/img/carte.gif" USEMAP="#localitee" border="0">
          <map NAME="localitee">
            <area shape="RECT" alt="Lille" coords="336,27,343,34" href="javascript:map()">
            <area shape="RECT" alt="Amiens" coords="305,74,331,81" href="javascript:map1()">
            <area shape="RECT" alt="Reims" coords="389,124,396,131" href="javascript:map2()">
            <area shape="RECT" alt="Metz" coords="468,120,475,127" href="javascript:map3()">
            <area shape="RECT" alt="Strasbourg" coords="537,139,544,146" href="javascript:map4()">
            <area shape="RECT" alt="Besançon" coords="467,236,473,242" href="javascript:map5()">
            <area shape="RECT" alt="Lyon" coords="420,330,427,337" href="javascript:map6()">
            <area shape="RECT" alt="Marseille" coords="452,487,459,493" href="javascript:map7()">
            <area shape="RECT" alt="Ajaccio" coords="506,573,514,579" href="javascript:map8()">
            <area shape="RECT" alt="Montpelier" coords="380,466,387,473" href="javascript:map9()">
            <area shape="RECT" alt="Toulouse" coords="258,470,265,477" href="javascript:map10()">
            <area shape="RECT" alt="Bordeaux" coords="180,377,186,385" href="javascript:map11()">
            <area shape="RECT" alt="Poitiers" coords="223,183,230,290" href="javascript:map112()">
            <area shape="RECT" alt="Limoges" coords="262,329,268,335" href="javascript:map13()">
            <area shape="RECT" alt="Clermond Ferrand" coords="345,338,352,345" href="javascript:map14()">
            <area shape="RECT" alt="Dijon" coords="421,233,428,240" href="javascript:map15()">
            <area shape="RECT" alt="Orleans" coords="291,196,297,202" href="javascript:map16()">
            <area shape="RECT" alt="Nantes" coords="135,236,141,242" href="javascript:map17()">
            <area shape="RECT" alt="Caen" coords="193,117,199,124" href="javascript:map18()">
            <area shape="RECT" alt="Rennes" coords="141,180,148,187" href="javascript:map19()">
            <area shape="RECT" alt="Rouen" coords="251,102,257,108" href="javascript:map20()">
            <area shape="RECT" alt="Paris" coords="311,138,318,145" href="javascript:map21()">
            <area SHAPE="POLYGON" COORDS="238, 41, 225, 6, 314, 0, 381, 54, 381, 72, 341, 70, 317, 64, 276, 49" href="javascript:map22()" alt="Nord - Pas de Calais">
            <area SHAPE="POLYGON" COORDS="270, 67, 284, 85, 283, 119, 297, 123, 339, 129, 352, 144, 358, 127, 364, 122, 371, 115, 373, 110, 381, 71, 341, 71, 327, 70, 275, 49, 270, 67" href="javascript:map23()" alt="Picardie">
            <area SHAPE="POLYGON" COORDS="245, 156, 222, 106, 179, 85, 204, 48, 271, 67, 286, 86, 283, 119, 265, 148, 245, 156" href="javascript:map24()" alt="Haute Normandie">
            <area SHAPE="POLYGON" COORDS="352, 173, 360, 146, 339, 129, 296, 123, 283, 119, 274, 138, 294, 178, 313, 180, 334, 185, 352, 173" href="javascript:map25()" alt="Ile de France">
            <area SHAPE="POLYGON" COORDS="386, 202, 353, 174, 360, 149, 359, 128, 364, 125, 371, 116, 376, 112, 382, 71, 408, 62, 430, 96, 417, 112, 432, 117, 420, 157, 455, 197, 437, 217, 406, 195, 373, 202" href="javascript:map26()" alt="Champagne Ardennes">
            <area SHAPE="POLYGON" COORDS="505, 199, 453, 196, 418, 155, 431, 116, 415, 111, 428, 93, 475, 101, 521, 122, 519, 130, 506, 122, 501, 134, 510, 141, 510, 160, 504, 201" href="javascript:map27()" alt="Lorraine">
            <area SHAPE="POLYGON" COORDS="546, 127, 569, 129, 564, 144, 549, 184, 530, 229, 508, 220, 505, 202, 512, 158, 512, 143, 501, 132, 504, 124, 520, 131, 521, 123, 546, 127" href="javascript:map28()" alt="Alsace">
            <area SHAPE="POLYGON" COORDS="434, 292, 444, 256, 435, 217, 455, 197, 503, 199, 508, 222, 531, 231, 506, 277, 466, 292, 457, 303, 434, 292" href="javascript:map29()" alt="Franche Comte">
            <area SHAPE="POLYGON" COORDS="336, 270, 334, 185, 352, 173, 380, 199, 406, 194, 436, 215, 441, 261, 435, 292, 417, 286, 411, 307, 369, 305, 375, 290, 336, 270" href="javascript:map30()" alt="Bourgogne">
            <area SHAPE="POLYGON" COORDS="374, 397, 400, 366, 392, 358, 375, 357, 378, 347, 367, 334, 368, 306, 411, 309, 417, 284, 436, 291, 457, 302, 466, 290, 499, 291, 524, 358, 478, 372, 483, 386, 444, 414, 462, 430, 455, 439, 409, 424, 392, 425, 374, 397" href="javascript:map31()" alt="Rhone - Alpes">
            <area SHAPE="POLYGON" COORDS="494, 369, 552, 433, 538, 467, 478, 529, 397, 485, 395, 476, 419, 440, 409, 425, 456, 439, 464, 427, 443, 414, 484, 386, 478, 371, 494, 369" href="javascript:map32()" alt="Provence - Alpes - Cote d'Azur">
            <area SHAPE="RECT" COORDS="470, 517, 565, 635" href="javascript:map33()" alt="Corse">
            <area SHAPE="POLYGON" COORDS="277, 531, 297, 522, 278, 489, 285, 477, 316, 478, 356, 441, 333, 401, 350, 383, 373, 396, 391, 424, 410, 423, 419, 439, 393, 474, 358, 556, 295, 548, 277, 531" href="javascript:map34()" alt="Languedoc Roussillon">
            <area SHAPE="POLYGON" COORDS="185, 517, 204, 479, 190, 465, 193, 446, 234, 440, 267, 379, 297, 384, 298, 403, 313, 404, 324, 385, 334, 403, 357, 443, 317, 480, 286, 478, 279, 491, 297, 523, 277, 532, 201, 534, 185, 517" href="javascript:map35()" alt="Midi Pyrenees">
            <area SHAPE="POLYGON" COORDS="247, 185, 245, 157, 266, 148, 274, 137, 294, 177, 315, 181, 325, 187, 336, 184, 337, 269, 304, 295, 259, 296, 235, 258, 223, 260, 210, 247, 219, 220, 227, 221, 245, 202, 244, 185, 242, 175, 251, 169, 247, 185" href="javascript:map36()" alt="Centre">
            <area SHAPE="POLYGON" COORDS="132, 74, 180, 84, 222, 107, 245, 157, 251, 169, 241, 174, 244, 186, 227, 175, 225, 168, 218, 166, 212, 172, 200, 161, 168, 163, 159, 160, 152, 163, 147, 154, 147, 140, 94, 130, 124, 86" href="javascript:map37()" alt="Basse Normandie">
            <area SHAPE="POLYGON" COORDS="86, 127, 104, 143, 114, 148, 121, 153, 135, 147, 147, 153, 151, 163, 159, 160, 168, 164, 168, 193, 157, 207, 148, 202, 74, 246, 1, 191, 0, 134, 64, 125" href="javascript:map38()" alt="Bretagne">
            <area SHAPE="POLYGON" COORDS="158, 300, 75, 248, 148, 203, 158, 211, 168, 194, 168, 165, 200, 161, 211, 174, 219, 167, 225, 169, 226, 176, 244, 186, 243, 203, 226, 223, 217, 220, 209, 249, 172, 257, 185, 294, 175, 299, 165, 295, 158, 300" href="javascript:map39()" alt="Pays de Loire">
            <area SHAPE="POLYGON" COORDS="208, 382, 173, 356, 151, 334, 137, 297, 160, 298, 166, 292, 176, 298, 187, 293, 173, 255, 209, 246, 222, 261, 235, 258, 258, 296, 241, 304, 248, 323, 234, 336, 208, 384" href="javascript:map40()" alt="Poitou - Charentes">
            <area SHAPE="POLYGON" COORDS="262, 355, 231, 337, 248, 324, 240, 304, 258, 297, 302, 295, 316, 306, 318, 321, 318, 340, 314, 357, 296, 385, 266, 379, 262, 355" href="javascript:map41()" alt="Limousin">
            <area SHAPE="POLYGON" COORDS="120, 477, 150, 334, 207, 380, 232, 337, 263, 354, 266, 379, 233, 440, 191, 446, 190, 463, 205, 480, 180, 521, 120, 477" href="javascript:map42()" alt="Aquitaine">
            <area SHAPE="POLYGON" COORDS="373, 358, 390, 356, 398, 365, 372, 396, 349, 383, 331, 402, 322, 384, 311, 402, 296, 402, 296, 383, 313, 361, 314, 357, 319, 338, 318, 320, 314, 304, 302, 294, 333, 268, 374, 290, 366, 306, 365, 333, 377, 346, 373, 358" href="javascript:map43()" alt="Auvergne">
</map>
<button type="button" onClick="mapvalid()" title="Valider">
                 Valider
                </button>
quentinmontana
 
Messages: 32
Inscription: Mar 17 Juin 2008 16:16


Retourner vers Languages du web

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités

cron