ErklärBär
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.
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.
Der Langen Rede kurzer Sinn, hier ist mein verwendeter Code:
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. ;-)
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.
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.
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>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. ;-)
Zuletzt bearbeitet:
Dann werde ich das auch so handhaben, danke.
