Thema: Image Map mit rollover Effekt

Nun habe ich schon eine ganze Weile hin und her versucht das Image map zum laufen zu bekommen, leider laufe ich jedoch im Kreis und komm nicht weiter... Vielleicht gibt es ja hier fündige Leute die Das Problem kennen und mir weiterhelfen können.

Ich benutze Joomla in der Version 1.5.22 und das Modul "Seminar" für Joomla V1.3.0 von Vollmar.
Das Kartenmaterial habe ich von der Seite http://www.image-maps.de/

Um zum Problem zu kommen werde ich erstmal kurz darauf eingehen was ich haben möchte und was ich bislang habe:

Im Menü habe ich den Punkt veranstaltungen:
Dieser Teilt sich in die bereiche Deutschland Schweiz und Österreich auf.

Klick ich nun auf deutschland soll im Content die Karte von Deutschland erscheinen und sobald ich mit der Maus über die karte fahre einzelne bereiche(Bundeslände) hervortun.
Mit dem Klick auf z.B. berlin Möchte ich gern die veranstaltungen aus berlin im Seminar Modul angezeigt bekommen.

Soweit so gut: Umsetzung

In Joomla habe ich ein eigenes Modul erstellt und den Html Text den ich mit den Karten von Deutschland mitgeliefert bekommen eingefügt.

--HTML Text Ausschnitt----

<!-- Start Imagemap -->
<link href="/map/germany/css/style.css" type="text/css" rel="stylesheet" />
<div class="imagemap">
<p style="text-align: center;"><img usemap="#deutschland_003399" height="405" longdesc="http://www.image-maps.de" width="299" src="/map/germany/image/deutschland.png" name="deutschlandkarte_003399" border="0" title="Deutschland" id="deutschlandkarte_003399" />
<map name="deutschland_003399" id="deutschland">
<area coords="237,121,232,123,232,131,234,135,247,135,24 0,138,248,133,250,129,248,124,244,120" shape="poly" href="/region/deutschland/berlin/141.html" onmouseout="deutschlandkarte_003399.src='/map/germany/image/deutschland.png';" title="Berlin" onmouseover="deutschlandkarte_003399.src='/map/germany/image/berlin.png';" />
<area coords="181,102,187,95,198,91,208,94,222,97,236,91 ,245,83,249,79,256,81,256,87,264,89,270,86,268,98, 267,103,263,111,240,121,230,121,228,126,230,129,23 0,136,233,140,240,140,249,138,254,132,252,126,248, 121,256,114,265,117,273,119,277,125,278,133,278,14 0,281,146,284,156,285,161,280,171,270,174,262,176, 256,180,249,181,242,181,236,175,234,164,227,157,21 6,155,205,149,206,136,206,129,202,119,204,113,196, 109,190,108" shape="poly" href="/region/deutschland/brandenburg/156.html" onmouseout="deutschlandkarte_003399.src='/map/germany/image/deutschland.png';" title="Brandenburg" onmouseover="deutschlandkarte_003399.src='/map/germany/image/brandenburg.png';" />
<area coords="122,71,133,67,141,69,142,81,140,89,132,89, 126,81" shape="poly" href="/region/deutschland/hamburg/139.html" onmouseout="deutschlandkarte_003399.src='/map/germany/image/deutschland.png';" title="Hamburg" onmouseover="deutschlandkarte_003399.src='/map/germany/image/hamburg.png';" />
<area coords="157,63,165,57,172,52,178,57,188,48,196,47, 210,31,222,32,229,27,237,21,247,33,250,45,264,55,2 55,62,266,66,270,81,261,87,262,80,258,79,254,79,24 8,76,242,81,235,89,219,95,213,91,207,91,192,89,190 ,95,184,95,178,102,174,101,163,90,156,87,162,75" shape="poly" href="/region/deutschland/mecklenburg-vorpommern/145.html" onmouseout="deutschlandkarte_003399.src='/map/germany/image/deutschland.png';" title="Mecklenburg-Vorpommern" onmouseover="deutschlandkarte_003399.src='/map/germany/image/mecklenburg-vorpommern.png';" />
<area coords="86,2,84,13,95,15,88,21,100,20,103,24,102,2 8,103,31,91,33,92,39,99,40,100,45,104,49,103,52,10 0,50,102,57,107,59,112,61,118,65,122,73,127,67,134 ,65,139,65,142,68,144,74,144,78,144,83,146,85,152, 86,154,80,160,75,156,71,156,65,156,59,161,55,159,5 1,168,45,168,36,157,39,148,35,140,34,134,31,135,24 ,126,29,124,27,134,18,130,16,114,14,108,9,100,9,92 ,8" shape="poly" href="/region/deutschland/schleswig-holstein/140.html" onmouseout="deutschlandkarte_003399.src='/map/germany/image/deutschland.png';" title="Schleswig-Holstein" onmouseover="deutschlandkarte_003399.src='/map/germany/image/schleswig-holstein.png';" />
<area coords="93,200,91,188,100,186,104,183,109,185,116, 173,116,163,104,151,103,142,106,135,97,138,93,132, 85,133,90,148,74,155,70,145,65,135,53,144,39,147,3 0,153,35,155,30,162,14,163,4,164,13,182,8,195,11,1 97,5,205,6,214,12,226,9,230,16,235,21,238,29,238,4 4,229,64,212,73,221,78,214,83,214" shape="poly" href="/region/deutschland/nordrhein-westfalen/150.html" onmouseout="deutschlandkarte_003399.src='/map/germany/image/deutschland.png';" title="Nordrhein-Westfalen" onmouseover="deutschlandkarte_003399.src='/map/germany/image/nordrhein-westfalen.png';" />
<area coords="284,170,277,174,266,176,263,180,258,184,24 5,182,238,183,231,177,228,172,215,175,204,180,203, 192,208,200,216,202,218,208,216,211,210,215,207,22 4,206,227,201,228,200,234,208,241,211,246,223,236, 231,235,241,230,257,223,266,217,272,212,273,204,28 1,203,285,213,291,213,294,188" shape="poly" href="/region/deutschland/sachsen/147.html" onmouseout="deutschlandkarte_003399.src='/map/germany/image/deutschland.png';" title="Sachsen" onmouseover="deutschlandkarte_003399.src='/map/germany/image/sachsen.png';" />
</map>
</p>
<div style="text-align: center;"><a target="_blank" href="http://www.image-maps.de">created by www.image-maps.de</a></div>
<div class="preload"><img src="/map/germany/image/sachsen.png" /> <img src="/map/germany/image/nordrhein-westfalen.png" /> <img src="/map/germany/image/schleswig-holstein.png" /> <img src="/map/germany/image/mecklenburg-vorpommern.png" /> <img src="/map/germany/image/hamburg.png" /> <img src="/map/germany/image/sachsen-anhalt.png" /> <img src="/map/germany/image/thueringen.png" /> <img src="/map/germanyimage/hessen.png" /> <img src="/map/germany/image/bayern.png" /> <img src="/map/germany/image/saarland.png" /> <img src="/map/germany/image/niedersachsen.png" /> <img src="/map/germany/image/rheinland-pfalz.png" /> <img src="/map/germany/image/baden-w.png" /> <img src="/map/germany/image/berlin.png" /> <img src="/map/germany/image/brandenburg.png" /> <img src="/map/germany/image/bremen.png" /></div>
</div>

Problem an der Stelle ist: switche ich vom HTML Editor wieder um sehe ich die Karten switche ich zurück in den HTML Modus sehe ich, dass der Eintrag : <link href="/map/germany/css/style.css" type="text/css" rel="stylesheet" /> weg ist. In der CSS stand lediglich:

.preload {
width:0px;
height:0px;
display:none;
}

drin.

Die Positionsangabe habe ich mit insetxx (xx steht dabei für eine Zahl die mann sich frei wählen kann). Im nächsten Schritt habe ich eine Beitrag erstellt und das zuvor erstellt Modul mit dem befel {loadposition insetxx} eingebunden.

Das Problem:

auf der Internet Seite klicke ich auf Veranstaltungen.. der unterpunkt Deutschland tut sich auf. Ich klicke auf deutschland und bekomme im Content statt einer karte alle 17 Karten angezeit. Ich bekomme es nicht hin, das der rollover funktioniert.

Im Anschluss wollte ich die Auswahl z.B Berlin an das Seminar Modul Übergeben und dieses wiederum soll mir dann die Ausgabe von einträgen aus diesem Bundesland anzeigen..


Bin gespannt ob ihr mir helfen könnt.

Beste Grüße,

Glücks

Hi Tim, danke für die Antwort.

Habe mich gegen dieses Modul entschieden Grund es gibt für dieses Modul nur die Deutschlandkarte. Ich benötige jedoch mehr Karten und die einheitlich... möchte das desing nicht mixen.