• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Interaktive Karte

E

elena2510

Neues Mitglied
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 :)
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>
 
Werbung:
Wenn es dir nur darum geht, den Bereich, wie in deinem Beispiellink, hervorzuheben, dann brauchst Du keine Grafiken, sondern Du kannst dieses Plugin verwenden:
http://www.outsharked.com/imagemapster/default.aspx?demos.html#usa
Wenn Du jedoch ganz andere Informationen in dem Bild zeigen willst, brauchst Du schon die Grafiken und musst das Verfahren aus deinem Link mit Javascript verwenden:
Code: 
<script>
var map = document.querySelectorAll('#routeMap area');
for (var i=0; i<map.length; i++) {
     if (map[i].addEventListener) {
         map[i].addEventListener('touchstart', swap, false);
         map[i].addEventListener('mouseover', swap, false);
     }
}
function swap(ev) {
     var lan = this.getAttribute('alt');
     document.querySelector('#Route').setAttribute('src','bilder/' + lan);
     return false;
}
</script>
 
Ok danke, muss ich das jetzt als Javascript abspeichern, oder kommt das mit in die HTML-Datei? Ich kenn mich mit Java noch nicht so gut aus ...
 
Werbung:
So, ich hab das ganze jetzt in meine Website eingefügt und auf die seite noch ein bischen text geschrieben, ein hintergrund bild hinzugefüt usw. Jetzt klappt das mit dem Mouseover garnicht mehr. Da ist einfach nur mein Bild. Hier mal meine html datei:
Code: 
<html id="route">
<head>
<title>Route</title>
</head>
<body id="route" link="blue" alink="blue" vlink="blue">
<link href="../stylesheet1.css" type="text/css" rel="stylesheet">
<br><p align="center"><font size="7" face="Calibri" color="white">Unsere Route</font><br>
<table id="route" style="background-color: #FFFFFF; opacity:0.9;">
<tr>
<td>
<font size="5" face="Calibri">
Auf de Karte könnt ihr unsere<br>
Reiseroute mit der Maus verfolgen.
</font>
<br>
<br>
<a href="../montag.html">
Hier seht ihr genau beschrieben, was wir<br>
am Montag auf unser Reise gemacht haben
</a>
</td>
<td>
<div style="text-align:center;" id="routeMap">
<img id="route" src="normal.png" width="483" height="482" usemap="#routeMap" style="border:none;outline:none;border:0;outline:0">

</div><div>
<map name="routeMap" id="routeMap">
  <area nohref 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 nohref 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="bereich1.png" id="bereich1" />
  <area nohref 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="bereich2.png" id="bereich2" />
  <area nohref 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="bereich3.png" id="bereich3" />
  <area nohref 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="bereich4.png" id="bereich4" />
  <area nohref 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="bereich5.png" id="bereich5" />
</map>
</div>
<script>
var map = document.querySelectorAll('#routeMap area');
for (var i=0; i<map.length; i++) {
     if (map[i].addEventListener) {
         map[i].addEventListener('touchstart', swap, false);
         map[i].addEventListener('mouseover', swap, false);
     }
}
function swap(ev) {
     var lan = this.getAttribute('alt');
     document.querySelector('#route').setAttribute('src', lan);
     return false;
}
</script>
</td>
</tr>
</table>
</p>
</body>
</html>
So und hier dann nochmal das passende Stylesheet:
Code: 
html#route {
    background: url(route/Autobahn_A8_bei_Holzkirchen.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow: hidden;
}
table, th, td#route {
    font-size: 90%
    font-family: Calibri;
    line-height:20px;
}
 
Werbung:
IDs müssen dokumentweit eindeutig sein. Du hast jedoch, wahrscheinlich für das CSS, die ID "route" für eine ganze Reihe von Elementen vergeben. Wenn Du mehrere Elemente, z. B. mit CSS, ansprechen willst, musst Du Klassen verwenden. Die ID "route" darfst Du nur dem Bild geben.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben