Für Profis (Bilddarstellungsprobelm mit onmouse)
Mario
- sonstiges
Hallo Liebes Forum,
da ich nicht weiß, zu welchen Thema ich mein Problem glieder sollte, habe ich mich mal für sinstiges entschieden, bevor ich wieder mal einen anranzer bekomme.
Aber nun zu meinem Problem:
Ich habe eine PLZ-Karte der Bundesrepublick, bei der die einzelnen PLZ-Bereiche farbilch gekennzeichnet werden, sobald man mit der Mous drüber fährt. Wenn man das Gebiet wieder verlässt, erscheint es wieder ni der "standard" Farbe. Soweit klappt das auch alles wunderbar.
Nun möchte ich aber übder dieser Landkarte noch ein anderes Bild darstellen, was mit der Karte überhaupt nichts zu tun hat. Ein Logo zum Beispiel.
Wenn ich nun mit meiner Maus auf ein PLZ-Gebiet der Karte fahre, wird das erste Bild (also das Logo) durch die Karte ersetzt! Meine Maus bleibt auf dem 2. Bild (der "richtigen" Karte) und ich kann sogar auf der 2. Karte die plz-Gebiete abfahren, wobei sich die farblichen änderungen jedoch auf der 1. Karte darstellen, obwohl da ja nun eigentlich mein Logo zu sehen sein soll.
Folgend mein Code:
----------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>test</title>
<script type="text/javascript">
<!-- Begin
Normal1 = new Image();
Normal1.src = "gfx/karte/karteplz.gif";
Highlight0 = new Image();
Highlight0.src = "gfx/karte/karteplz0.gif";
Highlight1 = new Image();
Highlight1.src = "gfx/karte/karteplz1.gif";
Highlight2 = new Image();
Highlight2.src = "gfx/karte/karteplz2.gif";
Highlight3 = new Image();
Highlight3.src = "gfx/karte/karteplz3.gif";
Highlight4 = new Image();
Highlight4.src = "gfx/karte/karteplz4.gif";
Highlight5 = new Image();
Highlight5.src = "gfx/karte/karteplz5.gif";
Highlight6 = new Image();
Highlight6.src = "gfx/karte/karteplz6.gif";
Highlight7 = new Image();
Highlight7.src = "gfx/karte/karteplz7.gif";
Highlight8 = new Image();
Highlight8.src = "gfx/karte/karteplz8.gif";
Highlight9 = new Image();
Highlight9.src = "gfx/karte/karteplz9.gif";
function Bildwechsel (Bildnr, Bildobjekt)
{
window.document.images[Bildnr].src = Bildobjekt.src;
}
// End -->
</script>
</head>
<body>
<br><center><img src="gfx/brieftaube.gif"><hr>
<img src="gfx/karte/karteplz.gif" Name="menuitemIMG1" width="240" height="326" border="0" alt="Karte" usemap="#KartePLZ">
<map name="KartePLZ">
<area shape="poly" coords="140, 129, 159, 127, 167, 121, 196, 130, 215, 119, 219, 120, 231, 156, 216, 160, 164, 190, 135, 175, 146, 158, 127, 141"
href="plz0.html" onmouseover="Bildwechsel(0, Highlight0)" onmouseout="Bildwechsel(0, Normal1)" target="test" alt="PLZ-0xxxx" title="PLZ-0xxxx">
<area shape="poly" coords="159, 117, 157, 89, 124, 70, 134, 52, 149, 36, 184, 8, 219, 66, 223, 114, 194, 127"
href="plz1.html" onmouseover="Bildwechsel(0, Highlight1)" onmouseout="Bildwechsel(0, Normal1)" target="test" alt="PLZ-1xxxx" title="PLZ-1xxxx">
<area shape="poly" coords="137, 38, 120, 68, 142, 83, 108, 104, 76, 98, 39, 85, 26, 55, 57, 48, 63, 0, 102, 7, 136, 20"
href="plz2.html" onmouseover="Bildwechsel(0, Highlight2)" onmouseout="Bildwechsel(0, Normal1)" target="test" alt="PLZ-2xxxx" title="PLZ-2xxxx">
<area shape="poly" coords="78, 102, 110, 107, 144, 85, 154, 89, 156, 123, 133, 128, 105, 164, 111, 172, 98, 188, 86, 177, 70, 184, 63, 178, 66, 169, 76, 159, 73, 134, 64, 125, 75, 113"
href="plz3.html" onmouseover="Bildwechsel(0, Highlight3)" onmouseout="Bildwechsel(0, Normal1)" target="test" alt="PLZ-3xxxx" title="PLZ-3xxxx">
<area shape="poly" coords="39, 87, 75, 98, 66, 102, 64, 115, 57, 125, 49, 127, 41, 129, 39, 137, 36, 153, 14, 160, 10, 147, 0, 126"
href="plz4.html" onmouseover="Bildwechsel(0, Highlight4)" onmouseout="Bildwechsel(0, Normal1)" target="test" alt="PLZ-4xxxx" title="PLZ-4xxxx">
<area shape="poly" coords="9, 219, 0, 166, 41, 157, 43, 131, 59, 128, 74, 153, 59, 172, 51, 200, 63, 205, 61, 213, 50, 214, 32, 219"
href="plz5.html" onmouseover="Bildwechsel(0, Highlight5)" onmouseout="Bildwechsel(0, Normal1)" target="test" alt="PLZ-5xxxx" title="PLZ-5xxxx">
<area shape="poly" coords="12, 226, 66, 215, 67, 199, 57, 198, 59, 183, 69, 194, 87, 183, 95, 195, 92, 215, 76, 231, 54, 232, 48, 242, 35, 247, 18, 225"
href="plz6.html" onmouseover="Bildwechsel(0, Highlight6)" onmouseout="Bildwechsel(0, Normal1)" target="test" alt="PLZ-6xxxx" title="PLZ-6xxxx">
<area shape="poly" coords="82, 302, 44, 301, 35, 295, 52, 243, 54, 236, 73, 236, 92, 219, 106, 229, 118, 248, 103, 252, 83, 276"
href="plz7.html" onmouseover="Bildwechsel(0, Highlight7)" onmouseout="Bildwechsel(0, Normal1)" target="test" alt="PLZ-7xxxx" title="PLZ-7xxxx">
<area shape="poly" coords="84, 302, 92, 273, 115, 247, 135, 251, 140, 243, 146, 243, 158, 254, 163, 248, 172, 255, 184, 258, 198, 279, 189, 302, 134, 308, 115, 311"
href="plz8.html" onmouseover="Bildwechsel(0, Highlight8)" onmouseout="Bildwechsel(0, Normal1)" target="test" alt="PLZ-8xxxx" title="PLZ-8xxxx">
<area shape="poly" coords="195, 274, 213, 242, 176, 216, 168, 192, 131, 177, 146, 160, 124, 143, 108, 166, 117, 173, 99, 195, 95, 215, 119, 244, 143, 239, 166, 245, 186, 254"
href="plz9.html" onmouseover="Bildwechsel(0, Highlight9)" onmouseout="Bildwechsel(0, Normal1)" target="test" alt="PLZ-9xxxx" title="PLZ-9xxxx">
</map>
</center>
</body>
</html>
----------------------------------------------------------------------------
Um das ganze etwas leichter nachvolziehen zu können, habe ich hier einen Link für Euch:
http://www.gelassen-durchs-leben.de/testumgebung/test.php
Ich Hoffe mal, das einer unter Euch ist, der mir hierbei weiterhelfen kann.
Beste Grüße also
Mario
BITTE liebe Leute...
ich weiß, der Quellcode schreckt vielleicht ein bischen ab, aber es ist bestimmt nur ein kleiner Fehler.
Schaut Euch den Link einfach mal an, dann haben Erfahrene unter Euch bestimmt schon eine Idee woran es liegen könnte.
http://www.gelassen-durchs-leben.de/testumgebung/test.php
Bitte wirklich um dringende Hilfe
BITTE liebe Leute...
bitten und betteln hilft meistens nicht - wenn dir jemand helfen will tut er das, wenn nicht dann eben nicht ;)
ich weiß, der Quellcode schreckt vielleicht ein bischen ab, aber es ist bestimmt nur ein kleiner Fehler.
der quellcode schreckt besonders "profis" ab - wenn du beschreibst, was du machen willst, wird dir eher geholfen (mit vernünftigem code)
http://www.tanfa.co.uk/css/examples/europe-map.asp
das hier - zwar hast du damit nicht die vorteile durch exakte polygone um die länder/bundesländer, aber es braucht kein javascript und ist wesentlich schneller als deine lösung
Mahlzeit Mario,
da ich nicht weiß, zu welchen Thema ich mein Problem glieder sollte, habe ich mich mal für sinstiges entschieden, bevor ich wieder mal einen anranzer bekomme.
Es ist ein Javascript-Problem. Wobei ... eigentlich ist es eher ein Verständnisproblem - aber es äußert sich im Bereich Javascript.
Wenn ich nun mit meiner Maus auf ein PLZ-Gebiet der Karte fahre, wird das erste Bild (also das Logo) durch die Karte ersetzt!
Natürlich wird es das - das steht schließlich so im Code[1].
<!-- Begin
HTML-Kommentare haben im Javascript-Bereich nichts zu suchen.
Highlight0 = new Image();
Highlight0.src = "gfx/karte/karteplz0.gif";
Highlight1 = new Image();
Highlight1.src = "gfx/karte/karteplz1.gif";
Dafür nutzt man sinnvollerweise http://de.selfhtml.org/javascript/objekte/array.htm@title=Arrays.
function Bildwechsel (Bildnr, Bildobjekt)
{
window.document.images[Bildnr].src = Bildobjekt.src;
}
[1] Du übergibst dieser Funktion die laufende Nummer ALLER im Dokument enthaltenen Bilder - und dieses wird dann ausgetauscht.
<area shape="poly" coords="140, 129, 159, 127, 167, 121, 196, 130, 215, 119, 219, 120, 231, 156, 216, 160, 164, 190, 135, 175, 146, 158, 127, 141"
href="plz0.html" onmouseover="Bildwechsel(0, Highlight0)" onmouseout="Bildwechsel(0, Normal1)" target="test" alt="PLZ-0xxxx" title="PLZ-0xxxx">
Bei allen Map-Areas übergibst Du 0 ... das bedeutet "das erste Bild auf der Seite". Wie wär's, wenn Du hier mal überall 1 einbaust?
Besser wäre allerdings, wenn Du dort vielleicht stattdessen ein Bildobjekt als Parameter übergibst?
MfG,
EKKi
EKKI, Du bist mal wieder mein ganz persönlicher Held.
Vielen Dank für die ausführliche Erklärung und natürlich überhaupt Deine Hilfe.
Es klappt alles wunderbar.
Gruß Mario
Mahlzeit Mario,
EKKI, Du bist mal wieder mein ganz persönlicher Held.
<gerührt äuglein="feucht">Darf ich mir das einrahmen?</gerührt>
Es klappt alles wunderbar.
Sicher tut es das - sobald man's richtig macht, tut es das immer ... ;-)
MfG,
EKKi
Sicher tut es das - sobald man's richtig macht, tut es das immer ... ;-)
sag das dem internet explorer :D