PHP Kartensuche erstellen

PEASANT KING · 31. August 2010

Moin Leute,

nun ist es mal wieder so weit. Ich bin dabei eine Suche zu basteln, die folgendes können soll.
Zunächst wählt der User aus einem Dropdownfeld eine Kategorie aus, danach klickt er dann auf der Map einen Ort an. Nachdem er den Ort angeklickt hat, soll er dann auf der entsprechenden Seite landen.

Mein Problem dabei ist, wie bekomme ich die Variable aus dem Dropdownfeld mittels Klick auf einen Bereich der Map zur nächsten Seite ?

Hier mal ein paar Code Ausschnitte:

Die Map:

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>Suche</title>
    <script language="JavaScript" type="text/javascript" src="search.js"></script>
    <link rel="stylesheet" href="templates/Schule/css/map.css" type="text/css" />
</head>
    <body>
        <form method="post" action="search.php">
            <select name="select">
                <option value="">Kategorie wählen...</option>
                <option value="Gartenbau">Gartenbau</option>
                <option value="Fahrradreparatur">Fahrradreparatur</option>
                <option value="Holzarbeiten">Holzarbeiten</option>
                <option value="Metalarbeiten">Metalarbeiten</option>
            </select> 
        </form>        
        <p>
        <img src="Karte.jpg" alt="" height="760" width="554" usemap="#Karteb5d291" border="0"  />
        <map name="Karteb5d291">
        <area title="Stadtmitte" shape="poly" coords="195,407,203,414,213,415,238,410,242,424,233,441,228,451,223,444,215,443,191,444" alt="Stadtmitte" tabindex="112" />
        <area title="Altstadt" shape="poly" coords="191,430,192,430,177,425,177,406,194,403,197,408,195,426" alt="Altstadt" tabindex="108" />
        <area title="Carlstadt" shape="poly" coords="176,425,189,432,192,427,190,442,177,445,171,443,167,435" alt="Carlstadt" tabindex="104" />
        <area title="Unterbilk" shape="poly" coords="170,447,176,444,197,445,196,478,186,483,170,476,161,477,146,469" alt="Unterbilk" tabindex="103" />
        <area title="Friedrichstadt" shape="poly" coords="196,445,214,444,224,443,224,449,226,452,221,469,216,475,201,480,197,480" alt="Friedrichstadt" tabindex="100" />
        <area title="Hamm" shape="poly" coords="103,485,105,515,104,533,111,557,117,561,139,536,144,522,149,509,155,496,156,477,143,469,121,475" alt="Hamm" />
        <area title="Volmerswerth" shape="poly" coords="144,525,118,561,129,566,152,571,174,562,191,555,174,538" alt="Volmerswerth" tabindex="91" />
        <area title="Hafen" shape="poly" coords="87,424,89,447,103,484,126,473,142,470,154,461,165,451,171,448,169,440,160,443,147,440,139,433,130,426,102,414" alt="Hafen" tabindex="99" />
        <area title="Flehe" shape="poly" coords="191,555,208,554,225,560,234,569,251,567,236,557,221,544,216,528,211,522,198,524,192,518,183,519,177,526,176,538" alt="Flehe" />
        <area title="Oberbilk" shape="poly" coords="224,465,225,453,232,445,239,431,255,447,278,476,290,488,270,489,274,496,295,523,291,523,275,515,258,508,245,508,233,514" alt="Oberbilk" tabindex="111" />
        <area title="Oberkassel" shape="poly" coords="99,415,132,425,146,441,174,433,178,415,177,394,175,389,140,396,134,391,125,379,116,382,108,393,97,401" alt="Oberkassel" tabindex="105" />
        <area title="Flingern Süd" shape="poly" coords="241,429,244,421,268,423,286,428,290,430,280,453,274,466,271,467" alt="Flingern Süd" />
        <area title="Flingern Nord" shape="poly" coords="243,423,260,421,281,425,291,427,308,431,323,440,316,413,308,395,301,386,292,379,284,390,278,400,269,400,251,405,239,410" alt="" tabindex="77" />
        <area title="Lierenfeld" shape="poly" coords="291,428,284,449,273,468,284,481,301,493,307,487,317,479,313,472,321,439" alt="Lierenfeld" tabindex="73" />
        <area title="Bilk" shape="poly" coords="253,567,222,544,212,521,197,525,193,517,181,520,176,529,176,538,172,538,151,530,144,526,147,510,152,503,154,504,159,474,182,483,213,477,222,468,230,476,232,500,235,514,246,522,258,528" alt="Bilk" tabindex="102" />
        <area title="Wersten" shape="poly" coords="254,569,256,545,255,534,261,528,240,516,241,510,250,508,267,512,274,512,285,517,294,524,298,534,331,536,332,544,325,561,315,564,311,573,300,575,289,575,273,580,268,584" alt="Wersten" tabindex="81" />
        <area title="Holthausen" shape="poly" coords="333,534,333,542,327,555,320,562,317,561,312,572,301,577,294,574,280,572,272,583,295,606,301,612,294,618,298,627,294,633,302,648,319,634,333,627,344,626,353,629,346,615,347,608,353,597,341,589,337,572,343,557,348,552,353,552,358,549,347,537" alt="Holthausen" tabindex="69" />
        <area title="Himmelgeist" shape="poly" coords="267,585,254,568,242,567,233,570,238,582,243,602,240,628,232,646,232,657,235,678,247,686,260,689,276,687,283,680,274,660,272,653,271,642,265,634,266,627,270,623,265,614" alt="Himmelgeist" tabindex="65" />
        <area title="Itter" shape="poly" coords="267,587,284,601,301,607,298,615,292,617,295,621,299,627,292,632,303,647,282,680,277,670,269,651,271,644,265,635,264,628,270,622,265,613,265,597" alt="Itter" tabindex="56" />
        <area title="Hellerhof" shape="poly" coords="487,692,492,686,496,686,501,705,496,709,489,713,488,730,480,732,470,739,463,737,449,745,446,732,439,731,435,726,455,715,462,706,472,698" alt="Hellerhof" tabindex="42" />
        <area title="Urdenbach" shape="poly" coords="363,648,358,666,348,687,345,707,362,742,365,726,373,729,388,732,395,725,400,734,419,736,436,726,439,704,431,693,413,679,423,667,424,652,417,648,400,658,394,663,387,657,388,649" alt="Urdenbach" tabindex="41" />
        <area title="Garath" shape="poly" coords="431,635,444,657,460,660,467,675,474,675,486,692,472,697,462,706,456,710,448,725,439,724,440,709,436,697,423,691,406,684,422,673,426,653,419,645" alt="Garath" tabindex="43" />
        <area title="Ludenberg" shape="poly" coords="358,303,351,317,345,326,317,331,293,338,316,381,352,358,365,375,386,373,397,326,397,305,370,298" alt="Ludenberg" />
        <area title="Grafenberg" shape="poly" coords="291,339,303,367,318,385,310,394,303,385,292,377,286,382,285,338" alt="Grafenberg" />
        <area title="Benrath" shape="poly" coords="439,589,445,592,450,609,443,615,446,639,431,634,405,655,402,654,395,663,388,662,388,647,364,648,353,629,345,615,352,598,377,599,398,598,409,592,421,581" alt="Benrath" tabindex="57" />
        <area title="Reisholz" shape="poly" coords="357,550,355,554,348,551,338,567,340,588,353,597,388,601,390,596" alt="Reisholz" tabindex="62" />
        <area title="Hassels" shape="poly" coords="347,537,390,598,396,599,402,589,411,593,420,580,440,589,456,578,407,537" alt="Hassels" tabindex="64" />
        <area title="Eller" shape="poly" coords="405,536,297,536,297,524,272,489,291,489,303,495,307,488,318,481,312,470,322,441" alt="Eller" tabindex="72" />
        <area title="Vennhausen" shape="poly" coords="324,440,342,489,371,507,404,484,379,454,366,454,355,442" alt="Vennhausen" tabindex="24" />
        <area title="Gerresheim" shape="poly" coords="395,444,390,430,395,419,402,411,398,401,391,399,388,374,365,376,354,359,318,381,320,388,309,395,325,439,354,441,357,453" alt="Gerresheim" tabindex="74" />
        <area title="Unterbach" shape="poly" coords="396,445,376,450,405,483,372,504,457,577,476,571,468,543,486,538,485,523,456,494,468,466" alt="Unterbach" tabindex="23" />
        <area title="Pempelfort" shape="poly" coords="239,410,216,416,203,413,193,405,178,406,175,383,205,371,232,367" tabindex="110"/>
        <area title="Düsseltal" shape="poly" coords="229,337,271,366,285,359,285,381,280,396,237,408" alt="Düsseltal" />
        <area title="Niederkassel" shape="poly" coords="173,381,174,390,138,397,127,379,119,361,132,341" alt="Niederkassel" tabindex="79" />
        <area title="Golzheim" shape="poly" coords="132,341,175,382,205,370,184,335,166,324" alt="Golzheim" tabindex="19" />
        <area title="Heerdt" shape="poly" coords="73,363,16,414,27,430,76,430,87,422,99,414,96,399,106,398,110,385" alt="Heerdt" />
        <area title="Lörick" shape="poly" coords="92,326,72,362,110,387,119,376,128,375,118,360,124,355,131,341" alt="Lörick" tabindex="17" />
        <area title="Hubbelrath" shape="poly" coords="367,298,391,303,398,306,398,323,386,370,410,371,431,380,454,375,482,369,508,374,511,348,498,329,500,291,516,279,520,267,513,255,477,265,469,260,465,261,394,262,380,267,374,268" alt="Hubbelrath" tabindex="34" />
        <area title="Mörsenbroich" shape="poly" coords="286,342,286,358,273,366,249,346,229,337,226,307,235,303,261,316" alt="Mörsenbroich" tabindex="20" />
        <area title="Rath" shape="poly" coords="245,251,263,246,292,263,302,246,320,258,346,249,373,270,375,293,367,298,357,303,345,326,318,330,285,340,267,322,235,303,230,274" alt="Rath" tabindex="32" />
        <area title="Derendorf" shape="poly" coords="224,304,234,366,207,370,183,334,166,322,189,307" alt="Derendorf" tabindex="18" />
        <area title="Stockum" shape="poly" coords="158,279,130,282,98,285,47,263,43,283,69,315,95,324,133,339,165,324" alt="Stockum" />
        <area title="Unterrath" shape="poly" coords="159,277,166,316,189,305,224,304,232,302,226,274,233,265,227,247,191,248,183,250" alt="Unterrath" />
        <area title="Lichtenbroich" shape="poly" coords="244,227,244,249,236,265,228,264,229,245,190,247,209,220,216,211,231,218" alt="Lichtenbroich" />
        <area title="Lohausen" shape="poly" coords="73,222,49,259,106,283,159,275,187,247,215,208,242,221,250,187,241,181,197,198,123,228" alt="Lohausen" tabindex="9"/>
        <area title="Kaiserswerth" shape="poly" coords="71,219,91,220,122,229,142,218,140,164,108,115,94,102" alt="Kaiserswerth" tabindex="5" />
        <area title="Kalkum" shape="poly" coords="240,180,264,144,272,115,256,112,230,117,231,142,194,144,172,141,141,162,144,218" alt="Kalkum" tabindex="6" />
        <area title="Wittlaer" shape="poly" coords="171,142,144,161,126,146,109,114,67,80,84,61,109,43,121,26,128,20" href="(EmptyReference!)" alt="Wittlaer" tabindex="8"/>
        <area title="Angermund" shape="poly" coords="127,20,141,63,145,94,144,119,172,140,232,139,228,115,255,109,242,87,243,66,254,48,246,18,228,14,219,46" href="" alt="Angermund" tabindex="7" />
        </map>
        </p>
    </body>
</html>

Den PHP Code schreib ich hier mal nicht rein, wird aber mittels $_REQUEST[] ermittelt in der PHP File.

Grüße DJ

Hancock · 31. August 2010

Wie wärs mit ein bisschen Javascript?

Code:

function map_click(area)
{
window.location.href="search.php?area="+area.name+"&select="+select.value;
return 0;
}

Und in den areas dann onlick="map_click(this)"

PEASANT KING · 31. August 2010

Ja sitz auch dran das lieber mit Java zu machen, bei deiner Lösung bekomme ich wie auch bei meinen Ansäzen mit Java immer bla is not defined. JavaScript ist für mich ein riesen Mysterium leider ich steig da einfach nicht hinter.

EDIT:

Hab den Grund aber gefunden. Das ganze ist ja extern und wird per Iframe in Joomla geladen.
Mein Ziel ist es ja die Value aus der Dropdownliste abzufangen und die Value aus einem Klick auf die Map und dann per SQL daraus ne Abfrage zu gestalten und dann die Seite die die Kriterien erfüllt anzuzeigen.

Oder andere Frage wie komm ich an das Attribut alt="" aus dem Tag <area> mit document.body.map.area.getAttribute('alt'); gehts nicht.

Hancock · 31. August 2010

Schon über getAttribute, allerdings glaub ich nicht, dass man es so referenzieren kann eher
document.GetElementById("123).getAttribute("alt");
Du kannst ja den this Handler mitgeben, dann wirds einfacher.

Code:

onclick="foo(this)"
function foo(elem)
{
text=elem.getAttribute("alt");
}

Suche

PHP Kartensuche erstellen

PEASANT KING

Commander

Hancock

Captain

PEASANT KING

Commander

Hancock

Captain

Ähnliche Themen