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

Karte mit MouseOver

Machacker

Machacker

Neues Mitglied
Hi zusammen,
Ich arbeite gerade an einer kleinen Website welche auf einer Weltkarte basiert. Ich habe im Internet eine Möglichkeit gefunden auf Bildern mit Hilfe von Polygonen verschiedene Teile des Bildes zu verlinken. Jetzt will ich, dass wenn ich über einen bestimmten (verlinkten) Teil des Bildes fahre, ein anderes Bild an diesem Ort auftaucht. Ich habe das so versucht zu lösen:
Code: 
<body>
<img src="Bilder/map.gif" width="2250" height="1117" alt="" usemap="#Landkarte">
<map name="Landkarte">
<area shape="poly" coords="959,268,965,257,976,253,988,257,991,263,983,269,978,272,973,268,972,271,965,271,964,268"
          href="map_switzerland.html" alt="Switzerland" title="Switzerland" onMouseOver="this.src='map_switzerland_03.gif'";>
</map>
</body>

Die Seite sieht so aus:
http://gfholidays.bplaced.net/map.html

Der link auf der Karte ist bei der Schweiz angesetzt, funktioniert aber noch nicht, was aber eher nebensächlich ist, da es ja um den MouseOver-Effekt geht.

Was eigentlich passieren sollte ist, dass sich das Land (in diesem Falle die Schweiz) weiss füllt, damit man sieht, welches Land man gerade anwählt.

Da ich nicht ein super Spezialist in Sachen Webdesign bin, habe ich selber keine Lösung und bei Google habe ich auch nichts gefunden.

Vielen Dank für die Antworten schon im Voraus.
 
Zuletzt bearbeitet:
Werbung:
Das "this.src" bezieht sich auf das area-Element, was hier falsch ist. Du musst es auf das img-Element selbst beziehen, also z.B. über eine ID und getElementById.
 
Werbung:
Das geht aber nicht. Das area-Element repräsentiert lediglich einen Bereich der ImageMap, die über das Bild gelegt wird. Sie repräsentiert kein eigenes grafisches Element. Das sollte dir schon in dem Moment klar werden wenn Du schaust, ob bei einem area-Element überhaupt ein src-Attribut existiert.
 
Ja stimmt du hast recht. Gibt es da denn eine alternative Lösung? Da ich ja schlecht jedes Land als einzelnes Bild einfügen kann. Ich habe übrigens das ganze allgemein vereinfacht: hier ist der Code zu der Karte:
HTML: 
<!-- Map -->
<div style="width:1600px; height:1000px; margin:0px auto;">
<img src="Bilder/map.gif" alt="" width="1600" height="1000" border="0" usemap="#Map">
<map name="Map">
  <area shape="poly" coords="696,302,703,296,709,294,718,296,711,302" href="switzerland1.html">
  <area shape="poly" coords="699,317,689,316,683,317,680,322,674,320,669,320,663,317,664,302,649,289,661,289,662,285,671,285,679,276,705,288,694,300,698,307" href="#">
  <area shape="poly" coords="710,255,716,260,725,256,730,261,733,272,722,278,724,285,728,288,724,291,719,293,705,291,706,282,701,284,698,274,702,268,703,262" href="#">
  <area shape="poly" coords="710,253,706,251,708,247,708,243,713,241,713,245,712,249" href="#">
</map>
</div>

Also gibt es dafür eine Lösung, wie man das hinkriegen könnte, sodass ich eine MouseOver-Funktion verwenden kann oder etwas, dass den selben Effekt erzielt?

Vielen Dank schon im Voraus :)
 
Vielleicht hilft das dir weiter:
http://www.netzgesta.de/mapzoom/
mapzoom.js 1.4 allows you to add zoom and pan functionality to oversized images/vectors and automatic area highlighting to image maps
Zum Vergrößern anklicken....
D. h. damit kannst Du das Hervorheben der Bereiche erledigen. Pan und Zoom brauchst Du ja nicht zu benutzen.
Edit:
Dieses hatte ich unter meinen Lesezeichen.
bei Google habe ich auch nichts gefunden.
Zum Vergrößern anklicken....
Probiers mal mit "image map highlight area", dann findest Du noch mehr.
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
Sempervivum schrieb:
Vielleicht hilft das dir weiter:
http://www.netzgesta.de/mapzoom/

D. h. damit kannst Du das Hervorheben der Bereiche erledigen. Pan und Zoom brauchst Du ja nicht zu benutzen.
Zum Vergrößern anklicken....

Vielen Dank. Ich habe das ganze mal heruntergeladen. Doch irgendwie finde ich mich in diesen Dateien nicht ganz zu recht, falls du weiss, wie man das ganze verwendet, wäre ich sehr froh, wenn du mir erklären würdest, wie das funktioniert. :)

Edit: Habe es herausgefunden :) vielen Dank, das war die Lösung für mein Problem. Du hast mir sehr viel weiter geholfen :D
 
Zuletzt bearbeitet:
Wenn Du das Panning und Zooming nicht brauchst, ist es wahrscheinlich einfacher, wenn Du mapper.js verwendest (erster Treffer bei Google):
http://www.netzgesta.de/mapper/
Dort ist genau erklärt, wie man es anwendet. Du musst "Setting Up" und Using It" aufklappen. Die beiden Javascripts einbinden wie beschrieben und im img-Tag die Klasse setzen:
Code: 
<img src="Bilder/map.gif" class="mapper noborder iopacity50 icolorff0000" usemap="..." alt="...">
iopacity50 gibt die Deckkraft der Hervorhebung an und icolorff0000 deren Farbe. Bei weiß müsstest Du icolorffffff verwenden. Bei den Beispielen sind verschiedene Varianten der Parameter bei der Klasse mapper angegeben, wo Du sehen kannst, was diese bewirken.
 
Zuletzt bearbeitet von einem Moderator:
Vielen Dank habe es nun mit diesem gelöst :) Doch irgendwie macht iopacity das ganze dunkler anstelle es auf 100% Deckkraft zu stellen. Aber das ist nur ein kleines Luxusproblem, das wichtigste funktioniert nun :)
 
Werbung:
Schön, dass es funktioniert.
Hm, wahrscheinlich habe ich mich da geirrt und Opacity ist die Transparenz und nicht die Deckkraft. Also müsste mit iopacity0 die Farbe vollständig deckend sein. Probier es mal aus.
 
Leider auch nicht, aber wie schon gesagt, das ist ein Luxusproblem, und falls ich es mal herausfinden sollte gut und sonst egal :)
 
Das Wiki von SelfHTML sagt dieses:
Mit dem Wert für die Eigenschaft opacity geben Sie den Grad der Deckkraft eines Elements an. Erlaubt ist dabei ein Zahlenwert zwischen 0 und 1 oder die Angabe inherit. Ein Wert von eins bedeutet dabei eine 100 %ige Deckkraft, also keinerlei Transparenz, ein Wert von null entsprechend keinerlei Deckfähigkeit, also vollständige Transparenz.
Zum Vergrößern anklicken....
iopacity ist wahrscheinlich ein Prozentwert und geht von 0 bis 100 (anders als bei der CSS-Opacity).
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
Ich habe jetzt noch ein anderes Problem gefunden:
Auf der Home sind oben rechts alle vier social network Verlinkungen zu sehen, doch klickt man auf das logo und kommt dann zu der Map werden die Links in den Hintergrund verschoben. Ich habe herausgefunden, dass es an der Einbettung der mapper.js Datei liegt also:

Code: 
<head>
<!-- hervorheben-->
<script src="mapper.js" type="text/javascript"></script>
</head>
<body bgcolor="#3b3a37">

<!-- Social Network -->
        <div style="position:fixed; top: 20px; right: 20px;">
<a href="http://www.facebok.com/wittmer.till" target="_self"><img src="Bilder/facebook_dark.png" alt="Facebook" width="64" height="64" align="right" onMouseOver="src='Bilder/facebook_active.png'" onMouseOut="src='Bilder/facebook_dark.png'" ></a>
<a href="http://www.facebok.com/wittmer.till" target="_self"><img src="Bilder/twitter02_dark.png" alt="Twitter" width="64" height="64" align="right" onMouseOver="src='Bilder/twitter02_active.png'" onMouseOut="src='Bilder/twitter02_dark.png'"></a>
<a href="http://tillwittmer.tumblr.com" target="_self"><img src="Bilder/tumblr_dark.png" alt="Twitter" width="64" height="64" align="right" onMouseOver="src='Bilder/tumblr_active.png'" onMouseOut="src='Bilder/tumblr_dark.png'"></a>
<a href="http://www.youtube.com/tillwittmer" target="_self"><img src="Bilder/youtube_dark.png" alt="Twitter" width="64" height="64" align="right" onMouseOver="src='Bilder/youtube_active.png'" onMouseOut="src='Bilder/youtube_dark.png'"></a>
</div>

<!-- Map -->
<div style="width:1600px; height:1000px; margin:0px auto;">
<img src="Bilder/map.gif" class="mapper" border="0" usemap="#Map">
<map name="Map">
  <area shape="poly" class="noborder iopacity=100 icolorffffff" coords="696,301,704,294,710,294,718,298,713,300,710,302,705,300,700,302" href="switzerland1.html">
  <area shape="poly" class="noborder icolorffffff" coords="699,317,689,316,683,317,680,322,674,320,669,320,663,317,664,302,649,289,661,289,662,285,671,285,679,276,705,288,694,300,698,307" href="france1.html">
  <area shape="poly" class="noborder icolorffffff" coords="710,255,716,260,725,256,730,261,733,272,722,278,724,285,728,288,724,291,719,293,705,291,706,282,701,284,698,274,702,268,703,262" href="#">
  <area shape="poly" class="noborder icolorffffff" coords="710,253,706,251,708,247,708,243,713,241,713,245,712,249" href="#">
</map>
</div>
</body>
</html>

hier liegen die Social Network Buttons im Hintergrund wenn ich das ganze ohne der Einbettung der Datei also ohne:

Code: 
<script src="mapper.js" type="text/javascript"></script>

mache, sind die Buttons im Vordergrund, jedoch funktioniert die Hervorhebung nicht mehr, gibt es da eine Lösung?
 
Versuch mal, dem div mit den Social Buttons einen hohen z-index zu geben, z. B. 999:
Code: 
<div style="position:fixed; top: 20px; right: 20px; z-index: 999">
Edit: Habe das mit color und opacity mal ausprobiert: Mit class="mapper iopacity100 icolorffffff" wird die Hervorhebung weiß.
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
Weiter viel Spaß und Erfolg mit deiner Karte. Da hast Du ja viel zu tun, wenn du noch für eine größere Anzahl von Ländern die Polygone zeichnen willst!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben