Nepomuk: <Map> und Javascript

Beitrag lesen

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>
...
]