<Map> und Javascript

[Nepomuk]

Hallo Liebes Forum,

Ich bin gerade dabei meine völlig verkorkste Seite mit Tables und Frames auf den neusten Stand zu bringen. Unter anderem gibt es dort eine Unterseite, auf der eine Deutschlandkarte mit den 10 PLZ Bereichen dargestellt wird. Sobald der User mit seiner Maus über die entsprechenden PLZ-Bereiche fährt, werden diese hervorgehoben. Das ganze wurde bisher folgendermaßen realisiert:
[INDEX.PHP]
...
   <script type="text/javascript">
   Normal1 = new Image();
   Normal1.src = "../gfx/karte/de/karteplz.gif";
   Highlight0 = new Image();
   Highlight0.src = "../gfx/karte/de/karteplz0.gif";
   Highlight1 = new Image();
   Highlight1.src = "../gfx/karte/de/karteplz1.gif";
   Highlight2 = new Image();
   Highlight2.src = "../gfx/karte/de/karteplz2.gif";
   Highlight3 = new Image();
   Highlight3.src = "../gfx/karte/de/karteplz3.gif";
   Highlight4 = new Image();
   Highlight4.src = "../gfx/karte/de/karteplz4.gif";
   Highlight5 = new Image();
   Highlight5.src = "../gfx/karte/de/karteplz5.gif";
   Highlight6 = new Image();
   Highlight6.src = "../gfx/karte/de/karteplz6.gif";
   Highlight7 = new Image();
   Highlight7.src = "../gfx/karte/de/karteplz7.gif";
   Highlight8 = new Image();
   Highlight8.src = "../gfx/karte/de/karteplz8.gif";
   Highlight9 = new Image();
   Highlight9.src = "../gfx/karte/de/karteplz9.gif";
   function Bildwechsel (Bildnr, Bildobjekt)
                        {
                        window.document.images[9].src = Bildobjekt.src;
                        }
   </script>
...

Zu beachten hierbei ist, dass in der letzten function die Anzahl der dargestellten Bilder einzutragen ist - in diesem Fall '9'.
Wenn diese Zahl nicht stimmt, funktioniert die Hervorhebung der einzelnen PLZ-Bereiche nicht mehr bzw. irgendein anderes Bild auf der Seite wird einfach mit meiner Landkarte ersetzt.

Auf meiner alten Seite war das ganze kein Problem, denn sobald man auf einen PLZ-Bereich geklickt hat, wurden in einem Frame diverse Dinge geladen unter anderem auch weitere Bilder. Da diese aber innerhalb eines Frames waren, werden diese auch nicht für diese function wichtig.

Da ich aber ja nun die frames weg lassen wollte, habe ich nun das Problem, dass diese entsprechend des PLZ-Bereichs selektierten Bilder berücksichtigt werden müssen. Und da ist mein Problem. Selbst wenn ich die anzuzeigenden Bilder bereits vor meinem Javascript für die Karte ermittel kann ich diese Variable ja nicht anstatt der '9' ausgeben, da ich keine php-Variablen in einem Javascript verwenden kann. Da die Anzahl der Bilder zwischen 0- und ca. 500 liegt, macht es auch keinen Sinn mit if-Anweisungen 500 Variationen darzustellen.

Was habe ich jetzt noch für Möglichkeiten?
In Javascript kenne ich mich leider nicht so gut aus, aber ich denke mal dass man da auch nicht die Lösung findet.

gibt es vielleicht eine andere Möglichkeit meine PLZ-Bereiche hervorzuheben indem man mit der Maus drüber fährt jedoch das ganz OHNE diese function, in der man die Anzahl aller dargestellten Bilder berücksichtigen muss?

Oder habt Ihr noch andere Ideen?

Vielen Dank für hilfreiche Tipps

thx

Ich weiß nicht, ob es noch wichtig ist, aber ich gebe hier nochmal den Script für die Darstellung der Karte:
[SCRIPTE.PHP]
...
         echo"<img src="../gfx/karte/$land/karteplz.gif" Name="menuitemIMG1" border="0" alt="Karte" usemap="#KartePLZ">";
         echo"<map name="KartePLZ">";
         if ($land=="de")
            {
            echo"<area shape="poly" coords="140, 129, 159, 127, 167, 121, 196, 130, 215, 119, 219, 120, 231, 156, 216, 160, 164, 190, 135, 175, 146, 158, 127, 141" href="index.php?aufruf=inserenten&amp;detail=0" onmouseover="Bildwechsel(1, Highlight0)" onmouseout="Bildwechsel(0, Normal1)" alt="PLZ-Bereich: 0" title="PLZ-Bereich: 0">";
            echo"<area shape="poly" coords="159, 117, 157, 89, 124, 70, 134, 52, 149, 36, 184, 8, 219, 66, 223, 114, 194, 127" href="index.php?aufruf=inserenten&amp;detail=1" onmouseover="Bildwechsel(1, Highlight1)" onmouseout="Bildwechsel(0, Normal1)" alt="PLZ-Bereich: 1" title="PLZ-Bereich: 1">";
            echo"<area shape="poly" coords="137, 38, 120, 68, 142, 83, 108, 104, 76, 98, 39, 85, 26, 55, 57, 48, 63, 0, 102, 7, 136, 20" href="index.php?aufruf=inserenten&amp;detail=2" onmouseover="Bildwechsel(1, Highlight2)" onmouseout="Bildwechsel(0, Normal1)" alt="PLZ-Bereich: 2" title="PLZ-Bereich: 2">";
            echo"<area shape="poly" coords="78, 102, 110, 107, 144, 85, 154, 89, 156, 123, 133, 128, 105, 164, 111, 172, 98, 188, 86, 177, 70, 184, 63, 178, 66, 169, 76, 159, 73, 134, 64, 125, 75, 113" href="index.php?aufruf=inserenten&amp;detail=3" onmouseover="Bildwechsel(1, Highlight3)" onmouseout="Bildwechsel(0, Normal1)" alt="PLZ-Bereich: 3" title="PLZ-Bereich: 3">";
            echo"<area shape="poly" coords="39, 87, 75, 98, 66, 102, 64, 115, 57, 125, 49, 127, 41, 129, 39, 137, 36, 153, 14, 160, 10, 147, 0, 126" href="index.php?aufruf=inserenten&amp;detail=4" onmouseover="Bildwechsel(1, Highlight4)" onmouseout="Bildwechsel(0, Normal1)" alt="PLZ-Bereich: 4" title="PLZ-Bereich: 4">";
            echo"<area shape="poly" coords="9, 219, 0, 166, 41, 157, 43, 131, 59, 128, 74, 153, 59, 172, 51, 200, 63, 205, 61, 213, 50, 214, 32, 219" href="index.php?aufruf=inserenten&amp;detail=5" onmouseover="Bildwechsel(1, Highlight5)" onmouseout="Bildwechsel(0, Normal1)" alt="PLZ-Bereich: 5" title="PLZ-Bereich: 5">";
            echo"<area shape="poly" coords="12, 226, 66, 215, 67, 199, 57, 198, 59, 183, 69, 194, 87, 183, 95, 195, 92, 215, 76, 231, 54, 232, 48, 242, 35, 247, 18, 225" href="index.php?aufruf=inserenten&amp;detail=6" onmouseover="Bildwechsel(1, Highlight6)" onmouseout="Bildwechsel(0, Normal1)" alt="PLZ-Bereich: 6" title="PLZ-Bereich: 6">";
            echo"<area shape="poly" coords="82, 302, 44, 301, 35, 295, 52, 243, 54, 236, 73, 236, 92, 219, 106, 229, 118, 248, 103, 252, 83, 276" href="index.php?aufruf=inserenten&amp;detail=7" onmouseover="Bildwechsel(1, Highlight7)" onmouseout="Bildwechsel(0, Normal1)" alt="PLZ-Bereich: 7" title="PLZ-Bereich: 7">";
            echo"<area shape="poly" coords="84, 302, 92, 273, 115, 247, 135, 251, 140, 243, 146, 243, 158, 254, 163, 248, 172, 255, 184, 258, 198, 279, 189, 302, 134, 308, 115, 311" href="index.php?aufruf=inserenten&amp;detail=8" onmouseover="Bildwechsel(1, Highlight8)" onmouseout="Bildwechsel(0, Normal1)" alt="PLZ-Bereich: 8" title="PLZ-Bereich: 8">";
            echo"<area shape="poly" coords="195, 274, 213, 242, 176, 216, 168, 192, 131, 177, 146, 160, 124, 143, 108, 166, 117, 173, 99, 195, 95, 215, 119, 244, 143, 239, 166, 245, 186, 254" href="index.php?aufruf=inserenten&amp;detail=9" onmouseover="Bildwechsel(1, Highlight9)" onmouseout="Bildwechsel(0, Normal1)" alt="PLZ-Bereich: 9" title="PLZ-Bereich: 9">";
   }
</map>
...
]

[MudGuard]

Hi,

Zu beachten hierbei ist, dass in der letzten function die Anzahl der dargestellten Bilder einzutragen ist - in diesem Fall '9'.
Wenn diese Zahl nicht stimmt, funktioniert die Hervorhebung der einzelnen PLZ-Bereiche nicht mehr bzw. irgendein anderes Bild auf der Seite wird einfach mit meiner Landkarte ersetzt.

Ja, wenn man das so macht, daß man das img-Element über seine Nummer anspricht. Sinnvoller wäre es, dem img-Element ein ID-Attribut zu verpassen und das img-Element dann über diese ID anzusprechen.

cu,
Andreas

[Nepomuk]

Hallo Andreas,

Ja, wenn man das so macht, daß man das img-Element über seine Nummer anspricht. Sinnvoller wäre es, dem img-Element ein ID-Attribut zu verpassen und das img-Element dann über diese ID anzusprechen.

huu... das klingt schon mal sehr logisch und auch gut.
Kannst Du mir da nochmal ein Beispiel geben, wie ich das machen kann?
Javascript ist so garnicht mein Element...

Das wäre ganz doll lieb von Dir ;)

thx Nepomuk

[Matthias Apsel]

Om nah hoo pez nyeetz, Nepomuk!

Kannst Du mir da nochmal ein Beispiel geben, wie ich das machen kann? Javascript ist so garnicht mein Element...

Du darfst gerne bei billiger-im-urlaub.de abschreiben. Vergiss bitte nicht den Kommentar mit Quellenangabe:

<!-- http://www.pseliger.de/testCases/federalStatesOfGermany.html, http://forum.de.selfhtml.org/archiv/2005/4/t105405/ -->

und wenn du nicht einfach nur cnp machst, kannst du sogar noch was lernen.

Matthias

[Nepomuk]

und wenn du nicht einfach nur cnp machst, kannst du sogar noch was lernen.

Matthias

Hallo Matthias,

es geht mir nicht darum einfach irgendwo etwas heraus zu kopieren und fertig, sondern es geht mir darum ungefair 2-3 Stunden Zeit einzusparen. Bei gleichem ergebnis. DENN ich kopiere es nicht einfach nur, sondern ich schaue mir auch an, was ich kopiere. So LERNE ich also wie ich etwas zu scripten habe um mein Ziel zu erreichen.

Wenn ich kein Beispiel habe, versuche ich hier, versuche ich da und verschwende so lange Zeit, bis ich irgendwann vielleicht mal mit Glück die richtige Lösung habe.

Das Ergebnis ist das gleiche nur mit dme Unterschied, dass ich 2-3 Stunden meines Tages vergeudet habe.

Ich hoffe Du kannst nun meine frage nach einem Beispiel nachvollziehen.

PS: Im übrigen würde ich nicht meine Homepage renoviere bzw. auch vordermann bringen, wenn ich nicht bereit bin auch etwas dafür zu lernen.
Ich glaube kaum, dass jemand eine Homepage programmieren kann, NUR indem er sich Stückwerke zusammenkopiert, ohne im Wissen darüber zu sein, was er da überhaupt kopiert und proigrammiert.

Gruß

N.

[suit]

Ich hoffe Du kannst nun meine frage nach einem Beispiel nachvollziehen.

Dann Sie die "Kopiervorlage" von Matthias einfach als "Praktisches Beispiel" an welchem du dich orientieren kannst.

[ChrisB]

Hi,

es geht mir nicht darum einfach irgendwo etwas heraus zu kopieren und fertig, sondern es geht mir darum ungefair 2-3 Stunden Zeit einzusparen.

Das Ergebnis ist das gleiche nur mit dme Unterschied, dass ich 2-3 Stunden meines Tages vergeudet habe.

PS: Im übrigen würde ich nicht meine Homepage renoviere bzw. auch vordermann bringen, wenn ich nicht bereit bin auch etwas dafür zu lernen.

Wenn du wirklich etwas lernen willst - wieso bezeichnest du dann 2-3 Stunden der Beschäftigung mit einer Thematik als vergeudete Zeit?

MfG ChrisB

[MudGuard]

Hi,

Wenn ich kein Beispiel habe, versuche ich hier, versuche ich da und verschwende so lange Zeit, bis ich irgendwann vielleicht mal mit Glück die richtige Lösung habe.

Zitat 231

cu,
Andreas

[Nepomuk]

Okay, okay, ich versuche es dann mal OHNE auf das Beispiel von Matthias zu gucken.

Mudguard schrieb:
...Sinnvoller wäre es, dem img-Element ein ID-Attribut zu verpassen und das img-Element dann über diese ID anzusprechen.

Klingt alles sehr logisch und ironischerweise auch noch einfach, wenn man sich denn mit Javascript auskennen würde.

Ich gebe also meiner default-Image eine ID:
[SCRIPT.PHP...
echo"<img src="../gfx/karte/$land/karteplz.gif" Name="menuitemIMG1" border="0" usemap="#KartePLZ" id="karte_de">";
echo"<map name="KartePLZ">";
...]

Jetzt muss ich noch in meinem Javascript-Teil die ID ansprechen. Das wird sicherlich hier gemacht:
[INDEX.PHP...
function Bildwechsel (Bildnr, Bildobjekt)
                     {
                     window.document.images[9].src = Bildobjekt.src;
                     }
...]
Nach meinem dürftigen Kenntnisstand würde ich es so umsetzen:
[...
function Bildwechsel (Bildnr, Bildobjekt)
                     {
                     document.getElementById("karte_de") = Bildobjekt.src;
                     }
...]
so funktioniert es leider nicht.

Wo ist jetzt mein Denkfehler, oder habe ich irgendwo falschen Code benutzt?

Vielen Dank für Eure Hilfe

N.

[Gunnar Bittersmann]

@@Nepomuk:

nuqneH

echo"<img src="../gfx/karte/$land/karteplz.gif" Name="menuitemIMG1" border="0" usemap="#KartePLZ" id="karte_de">";
echo"<map name="KartePLZ">";

Serverseitiger Code ist bei einem clientseitigen Problem irrelevant. Poste den generierten HTML-Code, nicht den generierenden PHP-Code!

window.document.images[9].src = Bildobjekt.src;

Mit window.document.images[9] sprichst du ein bestimmtes Elementobjekt an, mit window.document.images[9].src greifst du auf dessen src-Eigenschaft zu.

document.getElementById("karte_de") = Bildobjekt.src;

Mit document.getElementById("karte_de") sprichst du ein bestimmtes Elementobjekt an …

so funktioniert es leider nicht.

Jetzt sollte dir klar sein, warum nicht.

Qapla'