Fehler bei ImageMap
Startbeitrag
Originaler Foreninhalt in modernisierter Darstellung.
Hallo zusammen!
Ich habe jetzt eine ImageMap für sterreich soweit hingebracht.das die Felder beim drüberfahren auch anklickbar sind.
Leider muss da irgendwo im Code ein Fehler drin sein: Denn wenn man (als Beispiel) mit der Maus auf das Bundesland Tirol fährt wird nicht das entsprechend eingefärbte Image geladen.
Ich habe den nachfolgenden Code in einen Beitrag eingefügt. Und im Backend werden die entsprechenden Karten angezeigt die vorgeladen werden
[html]<link href="map/austria/css/style.css" type="text/css" rel="stylesheet">
<map name="austria" id="austria">
<area coords="400,68,404,74,407,83,389,83,386,75" shape="poly" href="region/oesterreich/wien/166.html" onmouseout="austria.src='map/austria/image/oesterreich.png';" title="Wien" onmouseover="austria.src='map/austria/image/wien.png';" />
<area coords="35,132,45,142,51,145,44,185,40,192,29,184,16,173,12,157,13,147,18,146,18,140,14,138,14,134,24,133" shape="poly" href="region/oesterreich/vorarlberg/160.html" onmouseout="austria.src='map/austria/image/oesterreich.png';" title="Vorarlberg" onmouseover="austria.src='map/austria/image/vorarlberg.png';" />
<area coords="50,155,63,147,62,130,66,130,68,135,72,132,89,135,95,147,109,144,119,137,127,137,131,131,158,129,162,130,161,123,166,120,166,125,177,125,181,129,184,128,190,135,190,142,175,157,157,159,157,170,159,175,166,175,171,171,185,170,192,175,193,186,206,202,193,203,191,211,183,211,173,208,167,200,168,195,167,192,163,192,160,191,157,184,161,179,165,177,158,175,150,180,138,184,120,182,107,184,99,189,96,199,80,199,74,192,64,191,60,181,50,190,42,192,42,185,44,177,49,167" shape="poly" href="region/oesterreich/vorarlberg/160.html" onmouseout="austria.src='map/austria/image/oesterreich.png';" title="Tirol" onmouseover="austria.src='map/austria/image/tirol.png';" />
<area coords="185,126,196,124,198,129,197,137,204,142,210,142,212,124,202,122,206,109,203,103,202,98,206,96,211,96,215,100,219,100,227,98,228,103,224,103,225,112,227,115,236,114,236,132,234,138,241,143,242,154,244,158,248,159,254,157,255,160,261,168,261,170,257,174,253,186,243,179,222,176,219,180,208,180,200,174,191,174,185,170,170,170,166,175,159,174,156,161,165,156,172,156,180,152,188,145" shape="poly" href="region/oesterreich/vorarlberg/160.html" onmouseout="austria.src='map/austria/image/oesterreich.png';" title="Salzburg" onmouseover="austria.src='map/austria/image/salzburg.png';" />
<area coords="190,211,193,204,205,204,202,197,193,186,191,176,200,175,209,180,220,180,225,176,246,180,256,189,269,178,284,181,290,183,311,180,322,188,324,209,313,216,312,222,299,232,289,228,273,229,266,223,246,223,227,219" shape="poly" href="region/oesterreich/vorarlberg/160.html" onmouseout="austria.src='map/austria/image/oesterreich.png';" title="Tirol" onmouseover="austria.src='map/austria/image/kaernten.png';" />
<area coords="252,123,265,125,269,130,272,126,277,126,279,131,284,131,288,125,290,125,293,123,299,124,304,118,310,119,314,122,339,111,360,123,362,127,365,127,367,132,385,141,379,146,385,175,380,186,379,201,383,207,374,204,356,206,353,209,353,213,347,211,326,210,321,198,322,189,314,178,294,179,290,183,285,182,277,178,270,178,259,188,255,189,252,186,258,178,258,173,261,171,261,167,256,164,254,160,254,158,252,158,246,159,242,153,242,143,247,143,249,136" shape="poly" href="region/oesterreich/vorarlberg/160.html" onmouseout="austria.src='map/austria/image/oesterreich.png';" title="Steiermark" onmouseover="austria.src='map/austria/image/steriermark.png';" />
<area coords="195,89,218,74,224,74,233,63,235,49,248,55,253,48,253,35,267,41,267,48,282,51,288,47,288,44,292,44,297,46,302,48,314,54,317,79,309,82,299,82,294,77,288,94,306,107,304,118,298,123,283,130,279,130,276,126,271,126,268,129,264,124,257,124,251,123,246,127,247,135,248,142,241,142,234,137,238,120,236,114,226,114,225,103,229,103,227,98,213,99,211,96" shape="poly" href="region/oesterreich/oberoesterreich/160.html" onmouseout="austria.src='map/austria/image/oesterreich.png';" title="Oberösterreich" onmouseover="austria.src='map/austria/image/oberoesterreich.png';" />
<area coords="437,86,426,87,410,99,407,103,400,102,393,114,392,120,397,127,394,139,378,145,385,175,380,187,380,191,389,188,396,177,408,177,408,164,403,160,405,152,403,144,414,139,417,131,414,125,400,122,411,114,421,120,437,118" shape="poly" href="region/oesterreich/oberoesterreich/160.html" onmouseout="austria.src='map/austria/image/oesterreich.png';" title="Burgenland" onmouseover="austria.src='map/austria/image/burgenland.png';" />
<area coords="319,12,328,18,332,17,339,14,354,25,363,22,380,34,390,33,394,33,399,28,409,27,414,33,423,35,426,50,422,58,422,62,429,79,436,86,430,84,430,89,426,87,417,92,409,102,401,101,396,105,396,113,393,114,393,119,396,123,396,128,394,138,391,141,385,141,372,135,368,131,368,126,362,127,359,122,340,112,314,121,304,118,305,106,289,95,291,87,291,79,296,78,301,83,316,78,316,62,313,54,302,50,302,41,308,36,308,32,316,34" shape="poly" href="region/oesterreich/oberoesterreich/160.html" onmouseout="austria.src='map/austria/image/oesterreich.png';" title="Niederösterreich" onmouseover="austria.src='map/austria/image/niederoesterreich.png';" />
</map>
[/html]
Jemand eine Idee?
Danke und Gruß
Marcus
Antworten
4 BeiträgeIm OnMouseOver bzw. OnMouseOut wird dem Objekt "austria" die src des entsprechenden Bildes zugewiesen.
[html]<area .. onmouseout="austria.src=\'map/austria/image/oesterreich.png\';" .. onmouseover="austria.src=\'map/austria/image/niederoesterreich.png\';" />
[/html]
Soweit so gut, aber das Objekt "austria" ist gar nicht definiert.
Ersetze mal das "austria.src" durch "document.getElementById(\'sterreichkarte\').src".
Aber ein Umlaut hat in einer ID nichts verloren. Das sollte wenn schon "Oesterreichkarte" heissen.
[html][/html]
und "document.getElementById(\'Oesterreichkarte\').src".
Der ganze Code:
[html]<link href="map/austria/css/style.css" type="text/css" rel="stylesheet">
<map name="austria" id="austria">
<area coords="400,68,404,74,407,83,389,83,386,75" shape="poly" href="region/oesterreich/wien/166.html" onmouseout="document.getElementById(\'Oesterreichkarte\').src=\'map/austria/image/oesterreich.png\';" title="Wien" onmouseover="document.getElementById(\'Oesterreichkarte\').src=\'map/austria/image/wien.png\';" />
<area coords="35,132,45,142,51,145,44,185,40,192,29,184,16,173,12,157,13,147,18,146,18,140,14,138,14,134,24,133" shape="poly" href="region/oesterreich/vorarlberg/160.html" onmouseout="document.getElementById(\'Oesterreichkarte\').src=\'map/austria/image/oesterreich.png\';" title="Vorarlberg" onmouseover="document.getElementById(\'Oesterreichkarte\').src=\'map/austria/image/vorarlberg.png\';" />
<area coords="50,155,63,147,62,130,66,130,68,135,72,132,89,135,95,147,109,144,119,137,127,137,131,131,158,129,162,130,161,123,166,120,166,125,177,125,181,129,184,128,190,135,190,142,175,157,157,159,157,170,159,175,166,175,171,171,185,170,192,175,193,186,206,202,193,203,191,211,183,211,173,208,167,200,168,195,167,192,163,192,160,191,157,184,161,179,165,177,158,175,150,180,138,184,120,182,107,184,99,189,96,199,80,199,74,192,64,191,60,181,50,190,42,192,42,185,44,177,49,167" shape="poly" href="region/oesterreich/vorarlberg/160.html" onmouseout="document.getElementById(\'Oesterreichkarte\').src=\'map/austria/image/oesterreich.png\';" title="Tirol" onmouseover="document.getElementById(\'Oesterreichkarte\').src=\'map/austria/image/tirol.png\';" />
<area coords="185,126,196,124,198,129,197,137,204,142,210,142,212,124,202,122,206,109,203,103,202,98,206,96,211,96,215,100,219,100,227,98,228,103,224,103,225,112,227,115,236,114,236,132,234,138,241,143,242,154,244,158,248,159,254,157,255,160,261,168,261,170,257,174,253,186,243,179,222,176,219,180,208,180,200,174,191,174,185,170,170,170,166,175,159,174,156,161,165,156,172,156,180,152,188,145" shape="poly" href="region/oesterreich/vorarlberg/160.html" onmouseout="document.getElementById(\'Oesterreichkarte\').src=\'map/austria/image/oesterreich.png\';" title="Salzburg" onmouseover="document.getElementById(\'Oesterreichkarte\').src=\'map/austria/image/salzburg.png\';" />
<area coords="190,211,193,204,205,204,202,197,193,186,191,176,200,175,209,180,220,180,225,176,246,180,256,189,269,178,284,181,290,183,311,180,322,188,324,209,313,216,312,222,299,232,289,228,273,229,266,223,246,223,227,219" shape="poly" href="region/oesterreich/vorarlberg/160.html" onmouseout="document.getElementById(\'Oesterreichkarte\').src=\'map/austria/image/oesterreich.png\';" title="Tirol" onmouseover="document.getElementById(\'Oesterreichkarte\').src=\'map/austria/image/kaernten.png\';" />
<area coords="252,123,265,125,269,130,272,126,277,126,279,131,284,131,288,125,290,125,293,123,299,124,304,118,310,119,314,122,339,111,360,123,362,127,365,127,367,132,385,141,379,146,385,175,380,186,379,201,383,207,374,204,356,206,353,209,353,213,347,211,326,210,321,198,322,189,314,178,294,179,290,183,285,182,277,178,270,178,259,188,255,189,252,186,258,178,258,173,261,171,261,167,256,164,254,160,254,158,252,158,246,159,242,153,242,143,247,143,249,136" shape="poly" href="region/oesterreich/vorarlberg/160.html" onmouseout="document.getElementById(\'Oesterreichkarte\').src=\'map/austria/image/oesterreich.png\';" title="Steiermark" onmouseover="document.getElementById(\'Oesterreichkarte\').src=\'map/austria/image/steriermark.png\';" />
<area coords="195,89,218,74,224,74,233,63,235,49,248,55,253,48,253,35,267,41,267,48,282,51,288,47,288,44,292,44,297,46,302,48,314,54,317,79,309,82,299,82,294,77,288,94,306,107,304,118,298,123,283,130,279,130,276,126,271,126,268,129,264,124,257,124,251,123,246,127,247,135,248,142,241,142,234,137,238,120,236,114,226,114,225,103,229,103,227,98,213,99,211,96" shape="poly" href="region/oesterreich/oberoesterreich/160.html" onmouseout="document.getElementById(\'Oesterreichkarte\').src=\'map/austria/image/oesterreich.png\';" title="Oberösterreich" onmouseover="document.getElementById(\'Oesterreichkarte\').src=\'map/austria/image/oberoesterreich.png\';" />
<area coords="437,86,426,87,410,99,407,103,400,102,393,114,392,120,397,127,394,139,378,145,385,175,380,187,380,191,389,188,396,177,408,177,408,164,403,160,405,152,403,144,414,139,417,131,414,125,400,122,411,114,421,120,437,118" shape="poly" href="region/oesterreich/oberoesterreich/160.html" onmouseout="document.getElementById(\'Oesterreichkarte\').src=\'map/austria/image/oesterreich.png\';" title="Burgenland" onmouseover="document.getElementById(\'Oesterreichkarte\').src=\'map/austria/image/burgenland.png\';" />
<area coords="319,12,328,18,332,17,339,14,354,25,363,22,380,34,390,33,394,33,399,28,409,27,414,33,423,35,426,50,422,58,422,62,429,79,436,86,430,84,430,89,426,87,417,92,409,102,401,101,396,105,396,113,393,114,393,119,396,123,396,128,394,138,391,141,385,141,372,135,368,131,368,126,362,127,359,122,340,112,314,121,304,118,305,106,289,95,291,87,291,79,296,78,301,83,316,78,316,62,313,54,302,50,302,41,308,36,308,32,316,34" shape="poly" href="region/oesterreich/oberoesterreich/160.html" onmouseout="document.getElementById(\'Oesterreichkarte\').src=\'map/austria/image/oesterreich.png\';" title="Niederösterreich" onmouseover="document.getElementById(\'Oesterreichkarte\').src=\'map/austria/image/niederoesterreich.png\';" />
</map>
[/html]
Und wozu genau soll die CSS-Datei mitten im <body> geladen werden? Da steht doch nur ein Befehl drin, den man auch ins HTML schreiben könnte..
Hi!
Danke für die Hilfe
Den Code, bzw. die CSS hab ich nicht selbst geschrieben. Der kommt von den Entwicklern des Originals image-maps.de
Was die sich dabei gedacht haben? No Idea!!
Gruß
Marcus
PS: Passt perfekt
Hallo!
Jetzt habe ich das Problem, das beim überfahren der Map mit dem Mauszeiger die Grafik verschwindet.
Und zwar auf dieser Seite
Ich vermute einmal, das es daran liegt, das ich sie per
[html]loadposition inset[/html]
in eine Tabellenzelle eingefügt habe.
Kann das sein?
Denn der Code der Map ist genau der gleiche wie hier. Nur das die berschrift fehlt.
Und wenn, wie kann ich es hinbekommen, das die Grafik auch ohne das laden in eine Tabelle angezeigt wird und die Links nicht auseinandergerissen werden.
Denn ich hatte es auch schon versucht, in dem ich die Grafik so wie jetzt rechtsbündig eingefügt habe. Aber da klaffte dann zwischen dem Link, hinter der ich sie eingefügt hatte, und dem darauffolgenden Link eine große Lücke.
Danke und Gruß
Marcus
Das Problem hat sich erledigt!
Es waren fehlende slashes vor dem Link zu den Grafiken im Image-Ordner
Gruß
Marcus