Rollover Imagemap mit PreLoad

Rhigster · 23.04.2013

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:

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. ;-)

Duddle · 23.04.2013

AW: Rollover Imagemap mit PreLoad

Jetzt bin ich mir nur nicht ganz sicher, ob das auch alles so korrekt ist

Hast du es denn mal getestet? Das würde doch eine recht eindeutige Antwort auf die Frage "Ist das korrekt?" geben.

Beim ersten Überfliegen sehe ich nur ein fehlendes Semikolon hinter

Code:

var Bezirke = new Array()

Ansonsten sieht das okay aus (bis auf ein paar Stil-Geschichten und Tippfehler).

Achja: JavaScript ist nicht Java

Duddle

Rhigster · 24.04.2013

AW: Rollover Imagemap mit PreLoad

Hallo Duddle,

vielen Dank fürs drüber Schauen. Das Semikolon hab ich erstmal gesetzt. Ja, es funktioniert alles, zumindest sieht es danach aus. Ich kann allerdings nicht kontrollieren, ob das Script zum Vorladen auch wirklich macht was es soll. Gibt es da eine Möglichkeit?

PS: Danke für die Aufklärung zu Java vs. JavaScript. Das war mir in der Tat nicht wirklich bewusst.

Duddle · 24.04.2013

AW: Rollover Imagemap mit PreLoad

Ich kann allerdings nicht kontrollieren, ob das Script zum Vorladen auch wirklich macht was es soll. Gibt es da eine Möglichkeit?

Der direkteste Weg ist wohl, den Cache zu leeren, die Seite ohne Vorlade-Funktion zu laden und beim hovern die Reaktion des Browser zu beobachten (du siehst ja wann er Ressourcen lädt). Dann wiederholst du das mit Vorlade-Funktion. Selbst bei kleinen Bildern solltest du den Unterschied sehen.

Komfortabler ist es, dir per FireBug oder für deinen Browser vergleichbaren Tools anzuschauen, was beim Seitenaufruf geladen wird - wieder mit und ohne Vorladefunktion (Cache leeren nicht vergessen).

Der dritte Weg ist, mir zu glauben: die Vorlade-Funktion funktioniert so wie sie ist.

Duddle

Rhigster · 25.04.2013

AW: Rollover Imagemap mit PreLoad

Duddle schrieb:
Der dritte Weg ist, mir zu glauben: die Vorlade-Funktion funktioniert so wie sie ist.

Dann werde ich das auch so handhaben, danke.

Jetzt habe ich es ja hinbekommen, dass die Map auch dann die Highlights anzeigt, wenn der User die nebenstehenden Links nutzt. Toll wäre noch eine Möglichkeit, umgekehrt auch die Links aufleuchten zu lassen, wenn der User über die Karte fährt. Hier habe ich aber noch keine Idee, wie ich das angehen könnte. Ich denke mittels Zuhilfenahme meiner CSS könnte da etwas gehen, habe aber noch keinen Ansatz gefunden.

Hast du da vielleicht einen Tipp für mich, wie ich das angehen kann?

Gruß
Rhigster

Duddle · 25.04.2013

AW: Rollover Imagemap mit PreLoad

Du kannst mit JS lesend/schreibend auf CSS-Eigenschaften zugreifen:
http://molily.de/js/css.html#style-objekt

Dafür müssen die Links dann natürlich irgendwie eindeutig identifizierbar sein. Das könntest du über Klassen oder über die Hierarchie machen ("jeder Link im dritten <ul> gehört zum dritten Bezirk" o.ä.).

Wenn das dann irgendwann soweit fertig ist und du gelernt hast wie umständlich es sein kann komplexere Aufgaben mit JS umzusetzen, schau dir jQuery und dieses PlugIn an.

Duddle

Rhigster · 25.04.2013

AW: Rollover Imagemap mit PreLoad

Hallo Duddle,

vielen Dank erstmal für die interessanten Links, das hilft mir sicher weiter. Das ich die Links irgendwie eindeutig identifizierbar mach müsste habe ich mir schon gedacht. Bin gespannt wie ich mich da reingefummelt bekomme.

Tja, jQuery und das PlugIn sehen ja sehr gut aus. Als ich mich an die Aufgabe gemacht habe meine Karte umzusetzen habe ich mir das alles auch weniger kompliziert vorgestellt. Ich hatte mich von der Seite der mir zur Verfügung stehenden Programme genähert und bin dann zwangsläufig der Spur des JavaScripts gefolgt.

Jetzt öffnen sich ja noch mal neue Horizonte.