area shap OnMouseOver ???

[Rene]

Hallo,
ich versuche gerade ein Mouse over event auf ein area shap anzuwenden aber komme irgendwie nicht weiter.
Ist das denn überhaupt möglich?

Möchte gerne eine Deutschlandkarte darstellen mit den jeweiligen Bundesländern. Bei Mouse over soll sich das jeweilige Land andersfarbig einfärben und bei Mausklick soll das Land dann markiert bleiben.

Hat jemand eine Idee oder vielelicht sogar das passende Beispiel für mich.
Wäre euch sehr dankbar.

Vielen Dank

[Thomas J.S.]

Hallo,

ich versuche gerade ein Mouse over event auf ein area shap anzuwenden aber komme irgendwie nicht weiter.
Ist das denn überhaupt möglich?

Ja.
Aber wenn du sonst nichts sagst z.B. was genau du versucht hast, oder wenn du keine Bsp. Seite online stellt, kann man dir kaum wirklich weiterhelfen.

Grüße
Thomas

[wiberg]

Ich meine, soetwas mal gesehen zu haben. Aber ich habe keine Ahnung, wie man Events auf solche Dinger anwenden kann. Vielleicht musst du die Karte zerschnibbeln. Dann wär's kein Problem.

[Marc Reichelt]

Hi!

Ich meine, soetwas mal gesehen zu haben. Aber ich habe keine Ahnung, wie man Events auf solche Dinger anwenden kann. Vielleicht musst du die Karte zerschnibbeln. Dann wär's kein Problem.

Die Lösung ist ganz einfach, ich habe es nämlich auch schon versucht:
Es gibt ofiziell kein onmousover-Attribut für die area-Tags.
Mit dem Attribut title="" kannst du allerdings eine kleine Beschreibung einfügen, ansonsten würde ich Flash nehmen.
Ein kleines Beispiel findest du unter:
http://www.djh.de/

cu

Marc Reichelt || http://www.marcreichelt.de/

[Rene]

Danke für eure antworten....also der Link auf die HP der Jugendherbergen ist sehr interessant...genauso wie die karte da funktioniert wollte ich es mit einem Area Shap realisieren:

Hauptbild (Deutschlandkarte ohne farbliche Hervorhebungen):
<img src="images/germany.jpg" width="205" height="277" usemap="#Map" border="0" >

<map name="Map">
<area shape="poly" coords="117,.......,101,166,104,169,109,170" a  alt="Bayern"  onMouseOver="changeImages('Map','images/bayern.jpg'); return true;" onMouseOut="changeImages('Map', 'images/germany.jpg'); return true;"href="start.php?param=bayern">  ----> hier soll also image bayern geladen werden wo bayern farblich hervorgehoben ist <---
 <area shape="poly" coords="64,197,59,.....,77,189" href="#" alt="Baden Würtemberg"  onMouseOver="changeImages('Map','images/wuertemberg.jpg'); return true;" onMouseOut="changeImages('Map', 'images/germany.jpg'); return true;"href="start.php?param=wuertemberg">

Naja so hatte ich es mir gedacht. Meine MouseOut and Over events funktionieren prima auf einzelne Images.

Rene

[Thomas J.S.]

Hallo,

Hauptbild (Deutschlandkarte ohne farbliche Hervorhebungen):
<img src="images/germany.jpg" width="205" height="277" usemap="#Map" border="0" >

<map name="Map">
<area shape="poly" coords="117,.......,101,166,104,169,109,170" a  alt="Bayern"  onMouseOver="changeImages('Map','images/bayern.jpg'); return true;" onMouseOut="changeImages('Map', 'images/germany.jpg'); return true;"href="start.php?param=bayern">  ----> hier soll also image bayern geladen werden wo bayern farblich hervorgehoben ist <---

Naja so hatte ich es mir gedacht. Meine MouseOut and Over events funktionieren prima auf einzelne Images.

Du kannst nicht Teile eines Imagemaps austauschen. Du kannst nur immer das gesamte Bild austauschen.

Grüße
Thomas

[Rene]

Ich habs auf eine etwas andere Art und Weise hinbekommen...ist etwas umständlich aber am ende genauso wie ich es wollte.
Arbeite nun mit mehreren Div's die ich anfangs auf hidden stezte und bei MousOver erscheinen lasse.

Code daszu sieht wie folgt aus(Alle Div#s liegen direkt übereinander):

<div id=germany_show    style="position:absolute; width:190px; height:237px; z-index:12; left: 19px; top: 111px"><img src="images/germany.jpg" width="205" height="277" usemap="#Map" border="0" ></div>

<div id=bayern_show    style="position:absolute; width:190px; height:237px; z-index:12; left: 19px; top: 111px; visibility:hidden"><img src="images/bayern.jpg" width="205" height="277" usemap="#bayern" border="0" ></div>

<div id=wuertemberg_show    style="position:absolute; width:190px; height:237px; z-index:12; left: 19px; top: 111px; visibility:hidden"><img src="images/wuertemberg.jpg" width="205" height="277" usemap="#wuertemberg" border="0" ></div>
.
.
.
.

<map name="Map">
 <area  onmousedown="Hide('bayern_show');"
  onmouseover="MM_swapImage;statusIn(' [ 1 ] ');Show('bayern_show');return true"
  title="Bayern"
  onmouseout="MM_swapImgRestore();statusOut();Hide('bayern_show');"
  shape=poly target=_self alt="Bayern" coords=117,167,128,165,139,169,146,177,149,184,152,193,159,202,169,209,177,216,179,224,174,.....,104,169,109,170
  href="#">
 <area onmousedown="Hide('wuertemberg_show');"
  onmouseover="MM_swapImage;statusIn(' [ 1 ] ');Show('wuertemberg_show');return true"
  title="Bayern"
  onmouseout="MM_swapImgRestore();statusOut();Hide('wuertemberg_show');"
  shape=poly target=_self alt="Würtemberg" coords=64,197,59,195,.....,189" href="#">
.
.
.
<map name="bayern">
 <area  onmousedown="Hide('bayern_show');"
  onmouseover="MM_swapImage;statusIn(' [ 1 ] ');Show('bayern_show');return true"
  title="Bayern"
  onmouseout="MM_swapImgRestore();statusOut();Hide('bayern_show');"
  shape=poly target=_self alt="Bayern" coords=117,167,......,166,104,169,109,170
  href="#">
 <area onmousedown="Hide('wuertemberg_show');"
  onmouseover="MM_swapImage;statusIn(' [ 1 ] ');Show('wuertemberg_show');return true"
  title="Bayern"
  onmouseout="MM_swapImgRestore();statusOut();Hide('wuertemberg_show');"
  shape=poly target=_self alt="Würtemberg" coords=64,197,59,195....,191,77,189" href="#">
.
.
.

funktioniert prima :-)

[Thomas J.S.]

Hallo,

Ich habs auf eine etwas andere Art und Weise hinbekommen

"onmouseover="MM_swapImage;statusIn" Du meinst Dreamweaver hats hinbekommen? ;-)

...ist etwas umständlich aber am ende genauso wie ich es wollte.

Arbeite nun mit mehreren Div's die ich anfangs auf hidden stezte und bei MousOver erscheinen lasse.

Ich mache das bei einigen Seiten auch so (bzw. fast so, weil ich noch einiges einfacher mache), aber weil es eben doch etwas umständlich ist, wollte es nicht vorschlagen.

Mach doch aus "style="position:absolute; width:190px; height:237px; z-index:12; left: 19px; top: 111px; visibility:hidden" eine CSS-Klasse.

Grüße
Thomas

[Rene]

Tom,

ja Dreamweaver machts möglich :-)

geht sogar noch einfacher.

<div id="germany_show" style="position:absolute; width:190px; height:237px; z-index:12; left: 19px; top: 111px"><img src="images/germany.jpg" width="205" height="277" usemap="#Map" border="0" ></div>

<div id=Bayern_show    style="position:absolute; width:190px; height:237px; z-index:12; left: 19px; top: 111px; visibility:hidden"><img src="images/bayern.jpg" width="205" height="277" usemap="#Map" border="0" ></div>

<div id=Wuertemberg_show    style="position:absolute; width:190px; height:237px; z-index:12; left: 19px; top: 111px; visibility:hidden"><img src="images/wuertemberg.jpg" width="205" height="277" usemap="#Map" border="0" ></div>
.
.
.
<map name="Map">
 <area  onmousedown="Hide('Bayern_show');"
  onmouseover="MM_swapImage;statusIn(' [ KV 50 ] ');Show('Bayern_show');return true"
  title="Bayern"
  onmouseout="MM_swapImgRestore();statusOut();Hide('Bayern_show');"
  shape=poly target=_self alt="Bayern" coords=117,167,....,,166,104,169,109,170
  href="#">
 <area onmousedown="Hide('Wuertemberg_show');"
  onmouseover="MM_swapImage;statusIn(' [ 1 ] ');Show('Wuertemberg_show');return true"
  title="Bayern"
  onmouseout="MM_swapImgRestore();statusOut();Hide('Wuertemberg_show');"
  shape=poly target=_self alt="Würtemberg" c.........
.
.
.
Und zwar nutze ich für alle DIV's die selbe MAP! Klappt auch prima. Danke für den Tip mit der CSS. Werde es genauso umsetzen!

Viele Grüße

[Gernot Back]

Hallo

Ich habs auf eine etwas andere Art und Weise hinbekommen...ist etwas umständlich aber am ende genauso wie ich es wollte.
Arbeite nun mit mehreren Div's die ich anfangs auf hidden stezte und bei MousOver erscheinen lasse.

funktioniert prima :-)

Durch eine Suche im Archiv (Stichwörter "Imagemap" und "Mouseover") hättest du darauf aber auch früher kommen können.

http://forum.de.selfhtml.org/archiv/2004/8/88414

Gruß Gernot

[Thomas J.S.]

Hallo,

Es gibt ofiziell kein onmousover-Attribut für die area-Tags.

Irrtum.
http://www.w3.org/TR/html401/struct/objects.html#h-13.6.1

Attributes defined elsewhere
[...]
    * onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur (intrinsic events)

Grüße
Thomas

[Thomas Meinike]

Hallo,

Möchte gerne eine Deutschlandkarte darstellen mit den jeweiligen Bundesländern. Bei Mouse over soll sich das jeweilige Land andersfarbig einfärben und bei Mausklick soll das Land dann markiert bleiben.

Versuche es mal mit SVG. Dieses Beispiel zeigt eine Europa-Karte mit Laenderauswahl: http://perso.wanadoo.fr/pilat/english/svg/europe.htm. Das jeweils aktuelle Land wird rot markiert. Das ließe sich auch via onmouseover/onmouseout/onclick realisieren.

MfG, Thomas