PSD-Tutorials.de
Forum für Design, Fotografie & Bildbearbeitung
Tutkit
Agentur
Hilfe
Kontakt
Start
Forum
Aktuelles
Besonderer Inhalt
Foren durchsuchen
Tutorials
News
Anmelden
Kostenlos registrieren
Aktuelles
Suche
Suche
Nur Titel durchsuchen
Von:
Menü
Anmelden
Kostenlos registrieren
App installieren
Installieren
JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.
Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden.
Du solltest ein Upgrade durchführen oder einen
alternativen Browser
verwenden.
Antworten auf deine Fragen:
Neues Thema erstellen
Start
Forum
Sonstiges
Webdesign, Webentwicklung & Programmierung
PHP, Javascript, jQuery, Ajax, nodeJS, MySQL...
Rollover Imagemap mit PreLoad
Beitrag
<blockquote data-quote="Rhigster" data-source="post: 2164165" data-attributes="member: 115533"><p>Hallo Ihr Lieben,</p><p></p><p>ich habe mir ein Projekt vorgenommen, welches immer mal wieder auftaucht, auch in diesem Forum. Ich war auch fleißig und habe mich gut eingelesen. </p><p></p><p>Es handelt sich bei meinem Projekt um eine kleine Berlin-Karte, welche beim darüber fahren mit der Maus die einzelnen Bezirke hervorhebt, welche wiederum mit jeweils vorhandenen Organisationen verlinkt sind. Nebenbei gestellt ist eine schriftliche Auflistung der Bezirke mit Links, welche ebenfalls verweissensitiv die zugehörigen Bereiche der Karte aufleuchten lassen.</p><p></p><p>Ich habe meine Imagemap im Illustrator vorgearbeitet, dem Umriss und die Bezirke vereinzelt, in Photoshop als Smart-Objekte übernommen, "gepimpt" und als PNG gespeichert. Das PNG dann mit Fireworks übernommen und die ImageMap erstellt. Die Vektorumrisse aus dem Illustrator waren dabei sehr hilfreich und haben mir viel Arbeit bei Erstellen der Areas gespart.</p><p></p><p>Hier bin ich das erste mal dann ins Stocken geraten, denn ich kam und komme mit den Hotspots nicht so hundert prozentig klar. Ich hatte gehofft, im Fireworks nur die Areas/Hotspots definieren zu müssen und dadurch farbige Hightlights über der Grundkarte erzeugen zu können. Damit bin ich leider überhaupt nicht weiter gekommen und bin dann zur klassischen Methode übergegangen, die komplette Karte bei MouseOver und -Out austauschen zu lassen.</p><p></p><p>Anschließend dann den ganzen Code nach Dreamweaver kopiert und finalisiert. Das Ergebnis sieht toll aus und ist optisch durchaus das, was ich haben wollte.</p><p>Um das Ganze jetzt noch schneller zu machen, möchte ich die MouseOver-Pics nun per JavaScript vorladen lassen. Auch hier zu habe ich mich belesen und einen Weg gefunden. </p><p></p><p>Jetzt bin ich mir nur nicht ganz sicher, ob das auch alles so korrekt ist. Bzw. ob ich den Code vom VorladeScript auch in meine ImageMap übernehmen muss oder nicht. Eventuell ginge ja auch einiges eleganter, denn ich kenne mich mit Java gerade so weit aus, dass ich mir im Baukastenprinzip etwas zusammenreihen kann.</p><p></p><p><strong>Es wäre echt toll, wenn jemand mit ein wenig Ahnung von Java und Co. mit geübten Blick feststellen könnte, ob und wo ich eventuell Fehler gemacht habe. </strong></p><p></p><p>Der Langen Rede kurzer Sinn, hier ist mein verwendeter Code:</p><p></p><p>[HTML]<script type="text/javascript"></p><p> // Array zur Auflistung der Bilder </p><p> var BezirkListe = new Array(); </p><p> BezirkListe[0] = "http://www.psd-tutorials.de/forum/images/footers/bezirke/berlin_pie.png"; </p><p> BezirkListe[1] = "http://www.psd-tutorials.de/forum/images/footers/bezirke/berlin_pie_01-mitt.png"; </p><p> BezirkListe[2] = "http://www.psd-tutorials.de/forum/images/footers/bezirke/berlin_pie_02-frkr.png"; </p><p> BezirkListe[3] = "http://www.psd-tutorials.de/forum/images/footers/bezirke/berlin_pie_03-pank.png"; </p><p> BezirkListe[4] = "http://www.psd-tutorials.de/forum/images/footers/bezirke/berlin_pie_04-chwi.png";</p><p> BezirkListe[5] = "http://www.psd-tutorials.de/forum/images/footers/bezirke/berlin_pie_05-span.png";</p><p> BezirkListe[6] = "http://www.psd-tutorials.de/forum/images/footers/bezirke/berlin_pie_06-stze.png";</p><p> BezirkListe[7] = "http://www.psd-tutorials.de/forum/images/footers/bezirke/berlin_pie_07-tsch.png";</p><p> BezirkListe[8] = "http://www.psd-tutorials.de/forum/images/footers/bezirke/berlin_pie_08-neuk.png";</p><p> BezirkListe[9] = "http://www.psd-tutorials.de/forum/images/footers/bezirke/berlin_pie_09-trko.png";</p><p> BezirkListe[10] = "http://www.psd-tutorials.de/forum/images/footers/bezirke/berlin_pie_10-mahe.png";</p><p> BezirkListe[11] = "http://www.psd-tutorials.de/forum/images/footers/bezirke/berlin_pie_11-lich.png";</p><p> BezirkListe[12] = "http://www.psd-tutorials.de/forum/images/footers/bezirke/berlin_pie_12-rein.png";</p><p> </p><p> </p><p> // vorzuladene Bilder werden in den Array 'Bilder' geschrieben</p><p> var Bezirke = new Array() </p><p> function Vorladen01() </p><p> { for (i = 0; i < BezirkListe.length; i++) { </p><p> Bezirke[i] = new Image(); </p><p> Bezirke[i].src = BezirkListe[i]; </p><p> } </p><p> } </p><p> Vorladen01();</p><p> </p><p> // Funktion der 'imagemap' </p><p> function ReplaceImage(filename)</p><p> {</p><p> document.getElementById("imagemap").src = filename;</p><p> }</p><p></script></p><p><table></p><p> <tr></p><p> <td></p><p> <img src="http://www.psd-tutorials.de/forum/images/footers/bezirke/berlin_pie.png" alt="Berlin Map" width="263" height="208" border="0" usemap="#Berlin" id="imagemap" /></p><p> <map name="Berlin"></p><p> <area shape="poly" coords="83,82,84,76,94,74,102,76,105,76,106,73,109,72,111,76,110,81,113,87,113,92,118,93,121,95,121,98,119,99,120,101,122,102,121,104,117,105,114,102,106,103,103,107,94,105,92,103,93,100,90,95,87,95,86,89,92,87,86,82,82,82" href="index.php/weblinks?task=weblink.go&id=6" target="_parent" alt="Bea-Kita Mitte" onMouseOver="ReplaceImage(images/footers/bezirke/berlin_pie_01-mitt.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" /></p><p> <area shape="poly" coords="104,113,106,112,105,111,103,110,102,107,106,102,113,101,116,104,121,104,121,102,118,99,121,97,121,96,116,93,119,92,123,90,126,91,131,92,135,100,133,105,138,112,137,113,136,112,134,110,132,109,130,107,128,107,126,107,125,111,120,110,120,113,115,113,112,116,108,113" href="index.php/weblinks?task=weblink.go&id=3" target="_parent" alt="Bea-Kita Friedrichshain-Kreuzberg" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_02-frkr.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" /></p><p> <area shape="poly" coords="107,71,111,76,111,82,114,89,113,92,118,93,124,91,132,93,133,89,137,84,139,81,142,79,138,74,136,73,139,71,135,69,139,61,143,58,142,52,143,49,145,45,149,42,150,33,147,33,142,30,138,27,138,22,135,20,136,18,133,20,130,21,128,24,133,27,134,27,132,30,124,31,124,33,123,33,122,38,119,37,110,30,110,36,107,36,104,43,104,46,104,51,99,60,95,60,106,71" href="index.php/weblinks?task=weblink.go&id=8" target="_parent" alt="Bea-Kita Pankow" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_03-pank.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" /></p><p> <area shape="poly" coords="47,121,48,117,48,106,52,106,54,105,53,102,55,101,56,94,65,94,75,92,76,90,72,87,72,82,85,82,91,87,86,89,86,94,89,94,93,100,91,102,94,104,93,109,93,118,88,118,88,123,83,123,81,121,76,121,74,123,66,123,62,121,58,122,52,122,49,120" href="index.php/weblinks?task=weblink.go&id=2" target="_parent" alt="BEA-Charlottenburg-Wilmersdorf" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_04-chwi.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" /></p><p> <area shape="poly" coords="55,64,50,62,39,57,35,61,30,63,30,67,36,65,37,71,35,74,35,82,30,79,26,97,33,97,41,102,29,118,26,118,26,121,24,123,24,132,28,136,33,136,47,126,49,107,54,106,54,102,57,100,57,94,66,94,76,91,76,90,73,87,73,82,67,81,59,75,55,64" href="index.php/weblinks?task=weblink.go&id=9" target="_parent" alt="Bea-Kita Spandau" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_05-span.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" /></p><p> <area shape="poly" coords="29,136,28,138,25,139,25,143,23,145,20,144,17,147,18,152,23,153,29,159,32,157,29,161,31,163,31,161,33,159,36,160,42,161,43,159,40,161,38,155,51,149,53,149,57,147,66,147,66,154,70,154,70,155,73,155,81,149,85,157,95,151,95,150,99,148,103,142,99,128,97,129,94,123,93,124,87,124,84,123,80,119,77,120,73,123,66,123,62,120,59,123,52,122,50,120,47,120,47,126,31,137" href="index.php/weblinks?task=weblink.go&id=10" target="_parent" alt="BEA-Kita Steglitz-Zehlendorf" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_06-stze.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" /></p><p> <area shape="poly" coords="95,152,103,143,99,130,97,129,94,124,94,125,87,124,88,119,92,119,94,106,98,106,103,108,104,111,105,112,104,115,111,115,111,117,113,116,113,115,116,114,115,119,117,119,118,125,120,129,113,149,114,151,115,151,118,153,121,164,120,168,118,170,113,170,114,169,109,169,109,164,104,164,104,161,101,160,94,152" href="index.php/weblinks?task=weblink.go&id=12" target="_parent" alt="Bea-Kita Tempelhof-Schöneberg" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_07-tsch.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" /></p><p> <area shape="poly" coords="119,152,112,148,120,129,119,124,117,124,117,118,115,117,115,113,120,113,119,110,125,111,125,112,128,112,129,114,131,114,133,117,134,121,137,124,136,127,130,126,131,131,146,143,149,144,149,146,150,147,151,152,149,156,137,159,133,146,118,152" href="index.php/weblinks?task=weblink.go&id=7" target="_parent" alt="Bea-Kita Neukölln" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_08-neuk.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" /></p><p> <area shape="poly" coords="148,156,150,153,151,151,150,147,148,147,148,143,145,143,131,130,130,126,135,126,137,125,134,121,133,118,131,113,128,114,125,111,127,108,130,108,131,109,131,110,134,110,137,113,139,112,145,119,147,119,149,122,150,123,154,120,159,119,163,120,168,117,170,116,177,121,181,123,181,121,186,117,192,120,194,119,199,124,202,125,204,130,205,130,206,127,205,123,209,126,212,131,217,132,221,133,223,139,221,136,219,137,217,140,217,143,214,146,213,149,216,152,215,156,213,158,210,156,200,165,203,166,204,169,203,172,201,173,199,172,194,176,194,179,191,182,192,183,190,184,191,187,189,188,186,186,185,183,186,178,190,174,190,173,187,172,188,168,185,168,183,166,179,169,177,170,177,167,175,165,172,163,172,160,169,161,167,162,165,162,165,163,157,163,154,162,154,160,147,156" href="index.php/weblinks?task=weblink.go&id=11" target="_parent" alt="Bea-Kita Teptow-Köpenick" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_09-trko.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" /></p><p> <area shape="poly" coords="159,120,158,116,158,113,157,112,157,109,153,106,155,101,149,99,148,89,153,87,151,80,157,73,164,69,168,70,169,74,170,82,180,85,184,85,186,88,181,89,182,91,191,92,191,95,184,101,182,108,183,110,179,116,178,122,171,116,168,117,164,120,159,119" href="index.php/weblinks?task=weblink.go&id=5" target="_parent" alt="Bea-Kita Hellersdorf-Marzahn" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_10-mahe.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" /></p><p> <area shape="poly" coords="133,93,134,97,136,101,133,106,144,118,149,120,151,124,154,121,159,120,156,109,153,106,154,101,148,99,149,90,152,87,151,81,157,73,163,70,159,63,153,61,148,60,143,58,138,61,135,69,139,72,137,73,142,78,137,83,130,93" href="index.php/weblinks?task=weblink.go&id=4" target="_parent" alt="Bea-Kita Lichtenberg" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_11-lich.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" /></p><p> <area shape="poly" coords="83,82,68,82,60,76,55,63,57,63,57,60,52,53,58,42,71,43,71,36,77,36,77,26,85,27,82,30,84,32,86,42,94,45,102,43,105,48,104,53,99,60,96,62,103,68,109,72,107,74,106,76,102,77,95,74,84,76,83,80" href="index.php/weblinks?task=weblink.go&id=1" target="_parent" alt="Bea-Kita Reinickendorf" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_12-rein.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" /></p><p> </map></p><p> <br/>Bezirk anklicken oder weiter zum</p><p> <br /></p><p> <a href="http://leak-berlin.de" target="_parent" alt="Landesleternausschuss Kita Berlin" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_00-berl.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" />Landeselternausschuss Kita</a></p><p> </td></p><p> <td></p><p> <ul class=""></p><p> <li></p><p> <a href="index.php/weblinks?task=weblink.go&id=6" target="_parent" alt="Bea-Kita Mitte" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_01-mitt.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" />Mitte</a></p><p> </li></p><p> <li></p><p> <a href="index.php/weblinks?task=weblink.go&id=3" target="_parent" alt="Bea-Kita Friedrichshain-Kreuzberg" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_02-frkr.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" />Friedrichshain-Kreuzberg</a></p><p> </li></p><p> <li></p><p> <a href="index.php/weblinks?task=weblink.go&id=8" target="_parent" alt="Bea-Kita Pankow" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_03-pank.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" />Pankow</a></p><p> </li></p><p> <li></p><p> <a href="index.php/weblinks?task=weblink.go&id=2" target="_parent" alt="Bea-Charlottenburg-Wilmersdorf" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_04-chwi.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" />Charlottenburg-Wilmersdorf</a></p><p> </li></p><p> <li></p><p> <a href="index.php/weblinks?task=weblink.go&id=9" target="_parent" alt="Bea-Kita Spandau" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_05-span.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" />Spandau</a></p><p> </li></p><p> <li></p><p> <a href="index.php/weblinks?task=weblink.go&id=10" target="_parent" alt="BEA-Kita Steglitz-Zehlendorf" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_06-stze.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" />Steglitz-Zehlendorf</a></p><p> </li></p><p> <li></p><p> <a href="index.php/weblinks?task=weblink.go&id=12" target="_parent" alt="Bea-Kita Tempelhof-Schöneberg" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_07-tsch.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" />Tempelhof-Schöneberg</a></p><p> </li></p><p> <li></p><p> <a href="index.php/weblinks?task=weblink.go&id=7" target="_parent" alt="Bea-Kita Neukölln" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_08-neuk.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" />Neukölln</a></p><p> </li></p><p> <li></p><p> <a href="index.php/weblinks?task=weblink.go&id=11" target="_parent" alt="Bea-Kita Teptow-Köpenick" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_09-trko.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" />Treptow-Köpenick</a></p><p> </li></p><p> <li></p><p> <a href="index.php/weblinks?task=weblink.go&id=5" target="_parent" alt="Bea-Kita Hellersdorf-Marzahn" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_10-mahe.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" />Marzahn-Hellersdorf</a></p><p> </li></p><p> <li></p><p> <a href="index.php/weblinks?task=weblink.go&id=4" target="_parent" alt="Bea-Kita Lichtenberg" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_11-lich.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" />Lichtenberg</a></p><p> </li></p><p> <li></p><p> <a href="index.php/weblinks?task=weblink.go&id=1" target="_parent" alt="Bea-Kita Reinickendorf" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_12-rein.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" />Reinickendorf</a></p><p> </li></p><p> </ul></p><p> </td></p><p> </tr></p><p></table>[/HTML]</p><p></p><p>PS: Das Ganze wird ein Modul für eine Joomla 3.0 Website.</p><p></p><p>PPS: Danke für eure Geduld, wenn ihr bis hier her gelesen habt. ;-)</p></blockquote><p></p>
[QUOTE="Rhigster, post: 2164165, member: 115533"] Hallo Ihr Lieben, ich habe mir ein Projekt vorgenommen, welches immer mal wieder auftaucht, auch in diesem Forum. Ich war auch fleißig und habe mich gut eingelesen. Es handelt sich bei meinem Projekt um eine kleine Berlin-Karte, welche beim darüber fahren mit der Maus die einzelnen Bezirke hervorhebt, welche wiederum mit jeweils vorhandenen Organisationen verlinkt sind. Nebenbei gestellt ist eine schriftliche Auflistung der Bezirke mit Links, welche ebenfalls verweissensitiv die zugehörigen Bereiche der Karte aufleuchten lassen. Ich habe meine Imagemap im Illustrator vorgearbeitet, dem Umriss und die Bezirke vereinzelt, in Photoshop als Smart-Objekte übernommen, "gepimpt" und als PNG gespeichert. Das PNG dann mit Fireworks übernommen und die ImageMap erstellt. Die Vektorumrisse aus dem Illustrator waren dabei sehr hilfreich und haben mir viel Arbeit bei Erstellen der Areas gespart. Hier bin ich das erste mal dann ins Stocken geraten, denn ich kam und komme mit den Hotspots nicht so hundert prozentig klar. Ich hatte gehofft, im Fireworks nur die Areas/Hotspots definieren zu müssen und dadurch farbige Hightlights über der Grundkarte erzeugen zu können. Damit bin ich leider überhaupt nicht weiter gekommen und bin dann zur klassischen Methode übergegangen, die komplette Karte bei MouseOver und -Out austauschen zu lassen. Anschließend dann den ganzen Code nach Dreamweaver kopiert und finalisiert. Das Ergebnis sieht toll aus und ist optisch durchaus das, was ich haben wollte. Um das Ganze jetzt noch schneller zu machen, möchte ich die MouseOver-Pics nun per JavaScript vorladen lassen. Auch hier zu habe ich mich belesen und einen Weg gefunden. Jetzt bin ich mir nur nicht ganz sicher, ob das auch alles so korrekt ist. Bzw. ob ich den Code vom VorladeScript auch in meine ImageMap übernehmen muss oder nicht. Eventuell ginge ja auch einiges eleganter, denn ich kenne mich mit Java gerade so weit aus, dass ich mir im Baukastenprinzip etwas zusammenreihen kann. [B]Es wäre echt toll, wenn jemand mit ein wenig Ahnung von Java und Co. mit geübten Blick feststellen könnte, ob und wo ich eventuell Fehler gemacht habe. [/B] Der Langen Rede kurzer Sinn, hier ist mein verwendeter Code: [HTML]<script type="text/javascript"> // Array zur Auflistung der Bilder var BezirkListe = new Array(); BezirkListe[0] = "http://www.psd-tutorials.de/forum/images/footers/bezirke/berlin_pie.png"; BezirkListe[1] = "http://www.psd-tutorials.de/forum/images/footers/bezirke/berlin_pie_01-mitt.png"; BezirkListe[2] = "http://www.psd-tutorials.de/forum/images/footers/bezirke/berlin_pie_02-frkr.png"; BezirkListe[3] = "http://www.psd-tutorials.de/forum/images/footers/bezirke/berlin_pie_03-pank.png"; BezirkListe[4] = "http://www.psd-tutorials.de/forum/images/footers/bezirke/berlin_pie_04-chwi.png"; BezirkListe[5] = "http://www.psd-tutorials.de/forum/images/footers/bezirke/berlin_pie_05-span.png"; BezirkListe[6] = "http://www.psd-tutorials.de/forum/images/footers/bezirke/berlin_pie_06-stze.png"; BezirkListe[7] = "http://www.psd-tutorials.de/forum/images/footers/bezirke/berlin_pie_07-tsch.png"; BezirkListe[8] = "http://www.psd-tutorials.de/forum/images/footers/bezirke/berlin_pie_08-neuk.png"; BezirkListe[9] = "http://www.psd-tutorials.de/forum/images/footers/bezirke/berlin_pie_09-trko.png"; BezirkListe[10] = "http://www.psd-tutorials.de/forum/images/footers/bezirke/berlin_pie_10-mahe.png"; BezirkListe[11] = "http://www.psd-tutorials.de/forum/images/footers/bezirke/berlin_pie_11-lich.png"; BezirkListe[12] = "http://www.psd-tutorials.de/forum/images/footers/bezirke/berlin_pie_12-rein.png"; // vorzuladene Bilder werden in den Array 'Bilder' geschrieben var Bezirke = new Array() function Vorladen01() { for (i = 0; i < BezirkListe.length; i++) { Bezirke[i] = new Image(); Bezirke[i].src = BezirkListe[i]; } } Vorladen01(); // Funktion der 'imagemap' function ReplaceImage(filename) { document.getElementById("imagemap").src = filename; } </script> <table> <tr> <td> <img src="http://www.psd-tutorials.de/forum/images/footers/bezirke/berlin_pie.png" alt="Berlin Map" width="263" height="208" border="0" usemap="#Berlin" id="imagemap" /> <map name="Berlin"> <area shape="poly" coords="83,82,84,76,94,74,102,76,105,76,106,73,109,72,111,76,110,81,113,87,113,92,118,93,121,95,121,98,119,99,120,101,122,102,121,104,117,105,114,102,106,103,103,107,94,105,92,103,93,100,90,95,87,95,86,89,92,87,86,82,82,82" href="index.php/weblinks?task=weblink.go&id=6" target="_parent" alt="Bea-Kita Mitte" onMouseOver="ReplaceImage(images/footers/bezirke/berlin_pie_01-mitt.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" /> <area shape="poly" coords="104,113,106,112,105,111,103,110,102,107,106,102,113,101,116,104,121,104,121,102,118,99,121,97,121,96,116,93,119,92,123,90,126,91,131,92,135,100,133,105,138,112,137,113,136,112,134,110,132,109,130,107,128,107,126,107,125,111,120,110,120,113,115,113,112,116,108,113" href="index.php/weblinks?task=weblink.go&id=3" target="_parent" alt="Bea-Kita Friedrichshain-Kreuzberg" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_02-frkr.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" /> <area shape="poly" coords="107,71,111,76,111,82,114,89,113,92,118,93,124,91,132,93,133,89,137,84,139,81,142,79,138,74,136,73,139,71,135,69,139,61,143,58,142,52,143,49,145,45,149,42,150,33,147,33,142,30,138,27,138,22,135,20,136,18,133,20,130,21,128,24,133,27,134,27,132,30,124,31,124,33,123,33,122,38,119,37,110,30,110,36,107,36,104,43,104,46,104,51,99,60,95,60,106,71" href="index.php/weblinks?task=weblink.go&id=8" target="_parent" alt="Bea-Kita Pankow" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_03-pank.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" /> <area shape="poly" coords="47,121,48,117,48,106,52,106,54,105,53,102,55,101,56,94,65,94,75,92,76,90,72,87,72,82,85,82,91,87,86,89,86,94,89,94,93,100,91,102,94,104,93,109,93,118,88,118,88,123,83,123,81,121,76,121,74,123,66,123,62,121,58,122,52,122,49,120" href="index.php/weblinks?task=weblink.go&id=2" target="_parent" alt="BEA-Charlottenburg-Wilmersdorf" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_04-chwi.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" /> <area shape="poly" coords="55,64,50,62,39,57,35,61,30,63,30,67,36,65,37,71,35,74,35,82,30,79,26,97,33,97,41,102,29,118,26,118,26,121,24,123,24,132,28,136,33,136,47,126,49,107,54,106,54,102,57,100,57,94,66,94,76,91,76,90,73,87,73,82,67,81,59,75,55,64" href="index.php/weblinks?task=weblink.go&id=9" target="_parent" alt="Bea-Kita Spandau" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_05-span.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" /> <area shape="poly" coords="29,136,28,138,25,139,25,143,23,145,20,144,17,147,18,152,23,153,29,159,32,157,29,161,31,163,31,161,33,159,36,160,42,161,43,159,40,161,38,155,51,149,53,149,57,147,66,147,66,154,70,154,70,155,73,155,81,149,85,157,95,151,95,150,99,148,103,142,99,128,97,129,94,123,93,124,87,124,84,123,80,119,77,120,73,123,66,123,62,120,59,123,52,122,50,120,47,120,47,126,31,137" href="index.php/weblinks?task=weblink.go&id=10" target="_parent" alt="BEA-Kita Steglitz-Zehlendorf" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_06-stze.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" /> <area shape="poly" coords="95,152,103,143,99,130,97,129,94,124,94,125,87,124,88,119,92,119,94,106,98,106,103,108,104,111,105,112,104,115,111,115,111,117,113,116,113,115,116,114,115,119,117,119,118,125,120,129,113,149,114,151,115,151,118,153,121,164,120,168,118,170,113,170,114,169,109,169,109,164,104,164,104,161,101,160,94,152" href="index.php/weblinks?task=weblink.go&id=12" target="_parent" alt="Bea-Kita Tempelhof-Schöneberg" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_07-tsch.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" /> <area shape="poly" coords="119,152,112,148,120,129,119,124,117,124,117,118,115,117,115,113,120,113,119,110,125,111,125,112,128,112,129,114,131,114,133,117,134,121,137,124,136,127,130,126,131,131,146,143,149,144,149,146,150,147,151,152,149,156,137,159,133,146,118,152" href="index.php/weblinks?task=weblink.go&id=7" target="_parent" alt="Bea-Kita Neukölln" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_08-neuk.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" /> <area shape="poly" coords="148,156,150,153,151,151,150,147,148,147,148,143,145,143,131,130,130,126,135,126,137,125,134,121,133,118,131,113,128,114,125,111,127,108,130,108,131,109,131,110,134,110,137,113,139,112,145,119,147,119,149,122,150,123,154,120,159,119,163,120,168,117,170,116,177,121,181,123,181,121,186,117,192,120,194,119,199,124,202,125,204,130,205,130,206,127,205,123,209,126,212,131,217,132,221,133,223,139,221,136,219,137,217,140,217,143,214,146,213,149,216,152,215,156,213,158,210,156,200,165,203,166,204,169,203,172,201,173,199,172,194,176,194,179,191,182,192,183,190,184,191,187,189,188,186,186,185,183,186,178,190,174,190,173,187,172,188,168,185,168,183,166,179,169,177,170,177,167,175,165,172,163,172,160,169,161,167,162,165,162,165,163,157,163,154,162,154,160,147,156" href="index.php/weblinks?task=weblink.go&id=11" target="_parent" alt="Bea-Kita Teptow-Köpenick" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_09-trko.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" /> <area shape="poly" coords="159,120,158,116,158,113,157,112,157,109,153,106,155,101,149,99,148,89,153,87,151,80,157,73,164,69,168,70,169,74,170,82,180,85,184,85,186,88,181,89,182,91,191,92,191,95,184,101,182,108,183,110,179,116,178,122,171,116,168,117,164,120,159,119" href="index.php/weblinks?task=weblink.go&id=5" target="_parent" alt="Bea-Kita Hellersdorf-Marzahn" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_10-mahe.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" /> <area shape="poly" coords="133,93,134,97,136,101,133,106,144,118,149,120,151,124,154,121,159,120,156,109,153,106,154,101,148,99,149,90,152,87,151,81,157,73,163,70,159,63,153,61,148,60,143,58,138,61,135,69,139,72,137,73,142,78,137,83,130,93" href="index.php/weblinks?task=weblink.go&id=4" target="_parent" alt="Bea-Kita Lichtenberg" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_11-lich.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" /> <area shape="poly" coords="83,82,68,82,60,76,55,63,57,63,57,60,52,53,58,42,71,43,71,36,77,36,77,26,85,27,82,30,84,32,86,42,94,45,102,43,105,48,104,53,99,60,96,62,103,68,109,72,107,74,106,76,102,77,95,74,84,76,83,80" href="index.php/weblinks?task=weblink.go&id=1" target="_parent" alt="Bea-Kita Reinickendorf" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_12-rein.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" /> </map> <br/>Bezirk anklicken oder weiter zum <br /> <a href="http://leak-berlin.de" target="_parent" alt="Landesleternausschuss Kita Berlin" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_00-berl.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" />Landeselternausschuss Kita</a> </td> <td> <ul class=""> <li> <a href="index.php/weblinks?task=weblink.go&id=6" target="_parent" alt="Bea-Kita Mitte" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_01-mitt.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" />Mitte</a> </li> <li> <a href="index.php/weblinks?task=weblink.go&id=3" target="_parent" alt="Bea-Kita Friedrichshain-Kreuzberg" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_02-frkr.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" />Friedrichshain-Kreuzberg</a> </li> <li> <a href="index.php/weblinks?task=weblink.go&id=8" target="_parent" alt="Bea-Kita Pankow" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_03-pank.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" />Pankow</a> </li> <li> <a href="index.php/weblinks?task=weblink.go&id=2" target="_parent" alt="Bea-Charlottenburg-Wilmersdorf" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_04-chwi.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" />Charlottenburg-Wilmersdorf</a> </li> <li> <a href="index.php/weblinks?task=weblink.go&id=9" target="_parent" alt="Bea-Kita Spandau" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_05-span.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" />Spandau</a> </li> <li> <a href="index.php/weblinks?task=weblink.go&id=10" target="_parent" alt="BEA-Kita Steglitz-Zehlendorf" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_06-stze.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" />Steglitz-Zehlendorf</a> </li> <li> <a href="index.php/weblinks?task=weblink.go&id=12" target="_parent" alt="Bea-Kita Tempelhof-Schöneberg" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_07-tsch.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" />Tempelhof-Schöneberg</a> </li> <li> <a href="index.php/weblinks?task=weblink.go&id=7" target="_parent" alt="Bea-Kita Neukölln" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_08-neuk.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" />Neukölln</a> </li> <li> <a href="index.php/weblinks?task=weblink.go&id=11" target="_parent" alt="Bea-Kita Teptow-Köpenick" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_09-trko.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" />Treptow-Köpenick</a> </li> <li> <a href="index.php/weblinks?task=weblink.go&id=5" target="_parent" alt="Bea-Kita Hellersdorf-Marzahn" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_10-mahe.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" />Marzahn-Hellersdorf</a> </li> <li> <a href="index.php/weblinks?task=weblink.go&id=4" target="_parent" alt="Bea-Kita Lichtenberg" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_11-lich.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" />Lichtenberg</a> </li> <li> <a href="index.php/weblinks?task=weblink.go&id=1" target="_parent" alt="Bea-Kita Reinickendorf" onMouseOver="ReplaceImage('images/footers/bezirke/berlin_pie_12-rein.png')" onMouseOut="ReplaceImage('images/footers/bezirke/berlin_pie.png')" />Reinickendorf</a> </li> </ul> </td> </tr> </table>[/HTML] PS: Das Ganze wird ein Modul für eine Joomla 3.0 Website. PPS: Danke für eure Geduld, wenn ihr bis hier her gelesen habt. ;-) [/QUOTE]
Bilder bitte
hier hochladen
und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Zitate einfügen…
Authentifizierung
Wenn ▲ = 7, ▼ = 3, ◇ = 2 und die Summe von ▲ und ▼ durch ◇ geteilt wird, was ist das Ergebnis?
Antworten
Start
Forum
Sonstiges
Webdesign, Webentwicklung & Programmierung
PHP, Javascript, jQuery, Ajax, nodeJS, MySQL...
Rollover Imagemap mit PreLoad
Oben