Fehler bei ImageMap
| Verfasst am: 02. 08. 2010 [20:44] | |||
| Gelöschter Benutzer | Beitrag hilfreich? | ||
| 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" /> <div class="imagemap"> <p style="text-align: center;"><img usemap="#austria" height="251" longdesc="http://www.image-maps.de" width="459" src="map/austria/image/oesterreich.png" alt="Österreich" name="Österreichkarte" border="0" title="Österreich" id="Österreichkarte" /> <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> </p> <div style="text-align: center;"><a target="_blank" href="http://www.image-maps.de">Programmcode by www.image-maps.de</a></div> <div class="preload"><img src="map/austria/image/wien.png" /> <img src="map/austria/image/tirol.png" /> <img src="map/austria/image/burgenland.png" /> <img src="map/austria/image/kaernten.png" /> <img src="map/austria/image/niederoesterreich.png" /> <img src="map/austria/image/oberoesterreich.png" /> <img src="map/austria/image/salzburg.png" /> <img src="map/austria/image/steiermark.png" /> <img src="map/austria/image/vorarlberg.png" /> </div> </div> Jemand eine Idee? Danke und Gruß Marcus [Dieser Beitrag wurde 1mal bearbeitet, zuletzt am 02.08.2010 um 20:45.] | |||
| Verfasst am: 02. 08. 2010 [21:16] | |||
Raptor Dabei seit: 10.05.2009  1159 Beiträge | Beitrag hilfreich? | ||
| 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';" /> 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 <img usemap="#austria" .. name="Oesterreichkarte" .. id="Oesterreichkarte" /> und "document.getElementById('Oesterreichkarte').src". Der ganze Code: HTML <link href="map/austria/css/style.css" type="text/css" rel="stylesheet" />
<div class="imagemap">
<p style="text-align: center;"><img usemap="#austria" height="251" longdesc="http://www.image-maps.de" width="459" src="map/austria/image/oesterreich.png" alt="Österreich" name="Oesterreichkarte" border="0" title="Österreich" id="Oesterreichkarte" />
<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>
</p>
<div style="text-align: center;"><a target="_blank" href="http://www.image-maps.de">Programmcode by www.image-maps.de</a></div>
<div class="preload"><img src="map/austria/image/wien.png" /> <img src="map/austria/image/tirol.png" /> <img src="map/austria/image/burgenland.png" /> <img src="map/austria/image/kaernten.png" /> <img src="map/austria/image/niederoesterreich.png" /> <img src="map/austria/image/oberoesterreich.png" /> <img src="map/austria/image/salzburg.png" /> <img src="map/austria/image/steiermark.png" /> <img src="map/austria/image/vorarlberg.png" /> </div>
</div>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.. | |||
| Verfasst am: 02. 08. 2010 [21:48] | |||
| Gelöschter Benutzer | Beitrag hilfreich? | ||
| 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 [Dieser Beitrag wurde 1mal bearbeitet, zuletzt am 02.08.2010 um 22:29.] | |||
| Verfasst am: 11. 09. 2010 [14:16] | |||
| Gelöschter Benutzer | Beitrag hilfreich? | ||
| 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 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 [Dieser Beitrag wurde 2mal bearbeitet, zuletzt am 11.09.2010 um 14:17.] | |||
| Verfasst am: 13. 09. 2010 [10:29] | |||
| Gelöschter Benutzer | Beitrag hilfreich? | ||
| Das Problem hat sich erledigt! Es waren fehlende slashes vor dem Link zu den Grafiken im Image-Ordner Gruß Marcus | |||
Premium-Mitglied
Du bist nicht eingeloggt. Bitte beachte, dass Du eingeloggt sein musst, um Themen zu erstellen oder auf Beiträge zu antworten.
Werde in Echtzeit über neue Foren-Beiträge informiert:
2 Mitglieder waren innerhalb der letzten 15 Minuten online (13 heute gesamt):
miraculex, schmuckbeere
Administratoren und Moderatoren:
[keine]
Seitenreport hat 18152 registrierte Mitglieder, 3003 Themen und 29112 Beiträge.
Der aktuelle Mitgliederzuwachs liegt bei durchschnittlich 12 bestätigten Neuregistrierungen pro Tag.
Pro Tag werden im Seitenreport Forum durchschnittlich 1 neues Thema und 7 Beiträge erstellt.
Die Durchschnittszahlen berechnen sich aus den letzten 7 Tagen.
Lade...
Neueste Foren-Beiträge
 | Abstimmung: 20.000 Mitglieder Jubiläum - was tun? Internes & Ankündigungen / Internes | Gestern [23:07] |
 | Microsofts soziales Netzwerk So.cl Internet / News | Gestern [20:03] |
| Nicht nachvollziehbarer CSS Fehler Internes & Ankündigungen / Analyse-Ergebnisse | Gestern [13:37] |
| Partnerprogramm: Eintrag für Kunden erledigt Internes & Ankündigungen / Internes | 22. 05. 2012 [10:35] |
 | Hotelbericht Entwickler Treffpunkt / Website vorstellen | 22. 05. 2012 [09:28] |
Lade...
Aktuelle Artikel:
Facebook - eine neue Tech-Blase?
Facebook ist in den vergangenen Tagen wegen seines Börsenganges und den dabei eingefahrenen Investorengeldern von 16 Milliarden Dollar großflächig in die Kritik geraten. Der Marktwert von 104 Milliarden Dollar wird von vielen als maßlos übertrieben angesehen. Ist Facebook eine neue Internet-Blase, die in den nächsten Jahren platzen wird?
Suchmaschinenoptimierung seit dem Google Penguin Update
Das neue Update vom Branchenriesen Google wird in Seo-Kreisen gerne mit einem Erdbeben verglichen. Diese Metapher trifft die Sachlage sehr gut, denn der Pinguin bringt die Arbeitsfundamente der Suchmaschinenoptimierer gehörig ins Wanken.
Tipps für den guten Start ins Business
Sich selbstständig machen, eine Firma gründen und direkt ins eigenständige Berufsleben einzusteigen klingt spannend und irgendwie auch einfach. Doch einfach ist es ganz und gar nicht...
Facebook - eine neue Tech-Blase?
Facebook ist in den vergangenen Tagen wegen seines Börsenganges und den dabei eingefahrenen Investorengeldern von 16 Milliarden Dollar großflächig in die Kritik geraten. Der Marktwert von 104 Milliarden Dollar wird von vielen als maßlos übertrieben angesehen. Ist Facebook eine neue Internet-Blase, die in den nächsten Jahren platzen wird?
18. Mai 2012
Suchmaschinenoptimierung seit dem Google Penguin Update
Das neue Update vom Branchenriesen Google wird in Seo-Kreisen gerne mit einem Erdbeben verglichen. Diese Metapher trifft die Sachlage sehr gut, denn der Pinguin bringt die Arbeitsfundamente der Suchmaschinenoptimierer gehörig ins Wanken.
15. Mai 2012
Tipps für den guten Start ins Business
Sich selbstständig machen, eine Firma gründen und direkt ins eigenständige Berufsleben einzusteigen klingt spannend und irgendwie auch einfach. Doch einfach ist es ganz und gar nicht...
14. Mai 2012