Hallo,
ich bin neu hier und hab direkt mal eine Frage. Also ich wollte eine interaktive karte erstellen, bei der wenn man mit der Maus über das Bild geht, in verschiedenen Bereichen verschiedene andere Bilder erscheinen. Ich wollte also keinen link sondern ein Bild. Wenn ich nohref eingebe, kommt nur das Ursprungsbild, wenn ich aber href="" eingebe erscheinen wenn ich mit der Maus drüber gehe, meine Bereiche, wenn ich auf die klicke natürlich nichts weiter. Ich hab dann mal bei href nen link von ner html Datei, wo ich die Bilder der verschiedenen Bereiche eingefügt habe, eingefügt. Das funktioniert auch. Nur das ich dann da immer nur das Bild von einem Bereich hab und da dann wieder auf die Ursprungsseite zurück und einen neuen Bereich anklicken muss. Ich hab ein bißchen bei dem Quelltext von dieser Seite abgekuckt. http://www.mediaevent.de/xhtml/area-map.html , und hab jetzt die Vermutung, dass ich noch was in CSS schreiben muss, da die einzelnen Bereiche da ja noch durch eine id gekennzeichnet sind. Ich pack mal meinen Code bis jetzt mit rein, vielleicht kann mir ja jemand helfen... Vielleicht gibt es ja auch eine ganz andere Möglichkeit das zu machen. Ich entschuldige mich schon mal für meine Unprofessionaltät :)
ich bin neu hier und hab direkt mal eine Frage. Also ich wollte eine interaktive karte erstellen, bei der wenn man mit der Maus über das Bild geht, in verschiedenen Bereichen verschiedene andere Bilder erscheinen. Ich wollte also keinen link sondern ein Bild. Wenn ich nohref eingebe, kommt nur das Ursprungsbild, wenn ich aber href="" eingebe erscheinen wenn ich mit der Maus drüber gehe, meine Bereiche, wenn ich auf die klicke natürlich nichts weiter. Ich hab dann mal bei href nen link von ner html Datei, wo ich die Bilder der verschiedenen Bereiche eingefügt habe, eingefügt. Das funktioniert auch. Nur das ich dann da immer nur das Bild von einem Bereich hab und da dann wieder auf die Ursprungsseite zurück und einen neuen Bereich anklicken muss. Ich hab ein bißchen bei dem Quelltext von dieser Seite abgekuckt. http://www.mediaevent.de/xhtml/area-map.html , und hab jetzt die Vermutung, dass ich noch was in CSS schreiben muss, da die einzelnen Bereiche da ja noch durch eine id gekennzeichnet sind. Ich pack mal meinen Code bis jetzt mit rein, vielleicht kann mir ja jemand helfen... Vielleicht gibt es ja auch eine ganz andere Möglichkeit das zu machen. Ich entschuldige mich schon mal für meine Unprofessionaltät :)
Code:
<html>
<head>
<title>Route</title>
</head>
<body bgcolor="#FFFFFF">
<div style="text-align:center;" id="routeMap">
<img id="Route" src="route/normal.png" width="483" height="482" usemap="#routeMap" alt="normal.png" style="border:none;outline:none;border:0;outline:0">
</div><div>
<map name="routeMap" id="routeMap">
<area href="#" onclick="return false;" ontouch="return false" shape="poly" coords="98,459,132,460,177,447,210,446,205,423,179,412,158,395,137,381,123,365,100,375,81,394,71,421,78,443"
alt="bereich0.png" id="bereich0" />
<area href="#" onclick="return false;" ontouch="return false" shape="poly" coords="168,320,201,323,229,330,262,344,264,360,265,384,261,404,245,421,223,429,211,429,176,408,156,394,140,383,127,366" alt="bilder/route/bereich1.png"
alt="bilder/route/bereich1.png" id="bereich1" />
<area href="#" onclick="return false;" ontouch="return false" shape="poly" coords="223,224,243,227,264,234,287,244,293,267,284,280,274,302,267,328,261,347,228,331,195,323,171,320" alt="bilder/route/bereich2.png"
alt="bilder/route/bereich2.png" id="bereich2" />
<area href="#" onclick="return false;" ontouch="return false" shape="poly" coords="242,158,223,171,210,195,217,216,223,223,244,229,265,238,286,244,307,237,314,222,314,203" alt="bilder/route/bereich3.png"
alt="bilder/route/bereich3.png" id="bereich3" />
<area href="#" onclick="return false;" ontouch="return false" shape="poly" coords="281,121,317,126,339,126,354,136,353,158,343,175,330,192,315,206,294,192,266,174,242,158" alt="bilder/route/bereich4.png"
alt="bilder/route/bereich4.png" id="bereich4" />
<area href="#" onclick="return false;" ontouch="return false" shape="poly" coords="303,65,278,75,270,88,276,115,290,123,314,127,342,128,359,123,363,99,351,74" alt="bilder/route/bereich5.png"
alt="bilder/route/bereich5.png" id="bereich5" />
</map>
</div>
</body>
</html>