✔ Imagemap mit CSS Hover oder Mouseover?

W

Wunder_von_Bern

Grünschnabel
Hallo zusammen,

ich bin gerade dabei, mit Imagemap eine Karte zu erstellen, mit verschiedenen Areas und dahinterstehenden Links (siehe Code unten). Ich möchte nun noch erreichen, dass beim "Überfahren" eines Bereiches eine andere Grafik aufgerufen wird (die sind bereits fertig erstellt). Daher nun meine Fragen:

1. Kriege ich das eher mit Javascript oder CSS hin?
2. Und (egal welche Alternative) wie kriege ich es hin? :)

Ich hab hier auch schon die Forensuche bemüht, manche Threads zum Thema gefunden, bin aber nicht so richtig schlau daraus geworden. Ich wäre froh, wenn jemand mir den richtigen Weg aufzeigen könnte.

Vielen Dank!

Code: 
<BODY>
<img src="images/0-Neutral.jpg" usemap="#start" />
<MAP NAME="start">
<AREA SHAPE=POLY COORDS="97,25,87,28,100,33,97,45,87,47,81,60,88,94,86,107,96,118,93,133,108,140,94,158,92,172,96,187,103,199,122,199,132,192,141,197,147,192,152,192,150,180,162,181,164,174,160,167,171,153,167,146,171,132,170,122,189,100,204,88,191,79,164,70,146,70,136,59,133,37,140,35,134,26,134,17,90,27,89,30,95,32,98,36,97,41,92,47,90,28,92,31,97,25,97,25" HREF="link1">
<AREA SHAPE=POLY COORDS="214,95,201,99,203,109,194,109,178,125,186,136,174,143,182,151,170,170,174,184,162,192,149,205,134,205,113,205,106,221,112,237,90,244,102,253,108,268,105,257,105,269,117,252,169,230,189,235,186,259,204,259,211,273,233,290,268,292,309,258,315,245,303,227,297,205,295,158,304,156,295,140,300,116,298,100,276,105,255,111,238,105,236,101,216,96,214,95,214,95" HREF="link2">
<AREA SHAPE=POLY COORDS="174,235,125,253,129,280,120,282,120,294,109,300,85,306,56,307,61,318,53,322,64,331,51,335,58,348,49,358,69,355,82,350,95,349,102,333,129,327,135,323,138,336,142,345,151,345,163,333,170,337,193,346,212,334,219,318,211,304,212,285,203,279,202,271,198,264,188,272,174,266,180,248,174,235,174,235" HREF="link3">
<AREA SHAPE=POLY COORDS="483,8,459,11,453,16,465,33,444,65,430,71,426,62,411,63,401,56,379,53,365,49,352,62,321,76,299,96,304,101,309,110,308,116,308,127,297,136,313,153,300,188,308,208,299,216,318,235,326,241,316,251,305,265,322,256,334,272,357,262,355,251,369,236,361,229,362,218,358,202,362,197,355,186,348,177,372,145,387,132,395,122,400,111,420,117,440,104,470,109,475,111,486,99,497,101,504,86,497,82,493,70,484,56,482,45,510,30,488,20,483,8,483,8" HREF="link4">
<AREA SHAPE=POLY COORDS="322,263,307,274,298,273,273,293,257,302,243,295,219,295,227,314,222,328,217,330,214,345,206,345,216,357,214,363,215,383,214,395,224,398,231,408,242,425,241,421,237,426,250,443,265,437,270,440,275,431,287,413,304,407,304,394,308,387,307,376,340,344,332,330,334,317,326,306,340,286,322,263,322,263" HREF="link5">
</MAP></BODY>
 
Du willst also die ganze Grafik des Imagemap ersetzen, je nach dem wo der Cursor ist?
Mit JavaScript könnte das gehen (nicht geprüft):
HTML: 
<img src="images/0-Neutral.jpg" usemap="#start" id="imagemap">
<MAP NAME="start">
  <area ....... onMouseOver="ReplaceImage('area1.bmp')" onMouseOut="ReplaceImage('neutral.bmp')">
   ....
</MAP>
Javascript: 
function ReplaceImage(filename)
{
  document.getElementById("imagemap").src = filename;
}
 
Wunder_von_Bern hat gesagt.:
ich bin gerade dabei, mit Imagemap eine Karte zu erstellen, mit verschiedenen Areas und dahinterstehenden Links (siehe Code unten). Ich möchte nun noch erreichen, dass beim "Überfahren" eines Bereiches eine andere Grafik aufgerufen wird (die sind bereits fertig erstellt).
Zum Vergrößern anklicken....
Sorry, ich glaub, ich hab dich eben beim ersten Lesen gründlich mißverstanden, und du stellst dir das doch eher so vor :-)

http://www.doktormolle.de/temp/haeusle/

mfg Maik
 
Hallo Maik, ja, dein Beispiel entspricht meinen Vorstellungen. :)

@ ComFreek: Danke für deinen Vorschlag, der funktioniert aber leider nicht so. Oder habe ich etwas falsch gemacht?

Code: 
<head>
<script type="text/javascript">
function ReplaceImage(filename)
{
document.getElementById("imagemap").src = filename;
}
</script>
</head>

<BODY>
<img src="images/0-Neutral.jpg" usemap="#start" id="imagemap"/>
<MAP NAME="start">
<AREA SHAPE=POLY COORDS="..." HREF="http://www.irgendneseite.de" onMouseOver="ReplaceImage('1-Oben.jpg')" onMouseOut="ReplaceImage('0-Neutral.jpg')">
 
Zuletzt bearbeitet:
Ich habe es ausprobiert. Es klappt im Firefox, Opera und sogar im IE.

HTML: 
<html>
  <head>
    <title>Test</title>
    <script type="text/javascript">
      function ReplaceImage(filename)
      {
        document.getElementById("imagemap").src = filename;
      }
    </script>
  </head>
  <body>
    <img src="http://www.google.de/intl/en_com/images/srpr/logo1w.png" usemap="#start" id="imagemap" />
    <map name="start">
      <area shape="poly" coords="0,0,50,0,50,50,0,50" href="http://www.irgendneseite.de" onmouseover="ReplaceImage('http://www.google.de/images/srpr/nav_logo13.png')" onmouseout="ReplaceImage('http://www.google.de/intl/en_com/images/srpr/logo1w.png')" />
    </map>
</html>
 
Zuletzt bearbeitet:
Stimmt, der von dir abgeänderte Code funktioniert bei mir auch.

Hmm, dann kann es ja eigentlich nur an den Koordinaten oder an den Bildverweisen liegen. Ich schaue es mir nochmal an. Danke! :)
 
Falls jemand mal beim Suchen auf diesen Thread stoßen sollte - es lagen an falschen Verweisen zu den Grafiken, das Script von ComFreek ist i.O. :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück