gelöschter Benutzer

Fehler bei ImageMap

am 02.08.2010, 20:44 Uhr eröffnete folgenden Thread
Joomla    1960 mal gelesen    4 Antwort(en).

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">


Österreich
<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


Raptor
Avatar Raptor
IT-Student
Content Gott (1013 Beiträge)
am 02.08.2010, 21:16 Uhr schrieb Raptor

Im 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">


Österreich
<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..


Meine Developer-Website mit den Web-Entwickler-Tools.
Meine Web-Entwicklungs-Dienstleistungen

[url="http://www.seitenreport.de/forum/beitraege/seitenreport_verlosungen/wichtig_neue_regel


gelöschter Benutzer
am 02.08.2010, 21:48 Uhr schrieb

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



gelöschter Benutzer
am 11.09.2010, 14:16 Uhr schrieb

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



gelöschter Benutzer
am 13.09.2010, 10:29 Uhr schrieb

Das Problem hat sich erledigt!

Es waren fehlende slashes vor dem Link zu den Grafiken im Image-Ordner

Gruß

Marcus


  • 1


« zurück zu: Joomla

Das Seitenreport Forum hat aktuell 5275 Themen und 36110 Beiträge.
Insgesamt sind 48360 Mitglieder registriert.