Javascript und Imagemaps

Wuschek · 21. September 2011

Hallo zusammen,

Ich setze aktuell eine Hessenkarten mit ihren Wahlkreisen um und bei mouseover über einen Bereich, soll dieser sich entsprechend in der Farbe verändern.
Das klappt bis jetzt auch soweit ganz gut, da ich einfach die Wahlkreise selbst transparent gemacht habe und es nur noch die Umrandungslinien der einzelnen Wahlkreise gibt. Dies ermöglicht mir nun, dass ich eine einfache Funktion schreibe die die Hintergrundfarbe des Wahlkreises, sprich der Area ändere.

Aktuell sieht mein Code so aus:

Code:

<head>
<script language='JavaScript'>
function over()
  {
  document.area.style.backgroundColor='Yellow';
  }
function out()
  {
  document.area.style.backgroundColor='white';
  }
</script>
</head>
<body>

<div align="center">
<img src="/drupal_java/sites/default/files/wahlkreise_tiny_gimp_transparent.png" name='area' usemap="#hessenkarte"/><map id="hessenkarte">
<area OnMouseOver='over()' OnMouseOut='out()' coords="336,27,337,27,338,27,339,27,340,27,340,28,340,29,340,30,339,31,340,32,340,33,341,34,342,35,343,35,344,36,345,35,346,35,347,34,348,33,349,32,350,32,351,32,352,33,352,34,353,35,354,36,355,36,356,36,357,35,358,35,359,35,360,35,361,35,362,34,363,34,364,34, 365,34,365,35,366,36,365,37,365,38,366,39,367,40,368,41,369,41,370,42,370,43,371,44,372,45,373,46,374,46,375,47,376,48,376,49,376,50,375,51,374,51,373,51,372,50,371,50,370,49,369,48,368,47,367,46,366,46,365,47,364,48,364,49,364,50,364,51,364,52,365,53,366,53,367,54,367,55,366,55,365,56, 364,56,363,55,362,54,361,55,362,56,361,57,362,58,363,58,364,59,363,60,364,61,363,62,362,63,362,64,361,64,360,64,359,65,358,65,357,66,358,67,358,68,359,69,360,70,360,71,360,72,360,73,361,74,361,75,362,76,363,77,364,78,365,79,366,80,367,80,367,81,367,82,367,83,366,84,365,85,365,86,364,87, 365,88,365,89,365,90,365,91,366,92,365,93,366,94,366,95,366,96,366,97,365,98,364,98,363,98,362,98,361,99,361,100,360,100,359,100,358,100,357,100,356,101,355,102,355,103,354,104,353,105,353,106,352,107,353,108,354,109,355,109,355,110,355,111,354,111,353,112,352,112,351,113,352,114,352,115, 352,116,353,117,354,118,354,119,355,120,356,119,357,119,358,119,358,120,359,121,360,121,361,122,362,123,363,123,364,123,365,124,365,125,366,126,367,127,368,126,369,126,370,126,371,127,371,128,371,129,370,130,370,131,369,132,369,133,369,134,369,135,370,136,371,137,372,137,373,138,374,138, 375,139,376,139,377,140,378,140,379,141,380,141,381,141,382,141,383,141,384,141,385,141,386,141,387,142,388,142,389,142,389,143,389,144,388,145,387,146,386,147,385,147,384,147,383,147,382,147,381,146,380,146,379,146,378,146,377,147,376,148,376,149,375,150,375,151,375,152,375,153,374,153, 373,153,372,154,371,155,370,155,369,156,368,157,367,158,367,159,367,160,367,161,366,162,366,163,366,164,366,165,365,165,364,166,363,167,362,167,361,167,360,167,359,166,358,166,357,166,357,165,356,164,356,163,355,162,354,161,354,160,354,159,355,158,355,157,354,156,353,156,352,155,351,155, 350,155,349,155,348,155,347,155,347,154,346,153,345,154,344,155,343,155,342,155,341,155,340,155,339,155,338,154,338,153,337,152,336,153,335,153,334,153,334,152,333,151,332,151,331,151,330,152,329,152,328,152,327,152,326,152,325,152,324,151,323,150,322,150,321,150,320,150,319,150,318,149, 317,149,317,148,317,147,316,146,316,145,315,144,314,143,313,143,312,143,311,144,310,144,309,144,308,145,307,145,306,145,305,145,304,145,303,145,302,146,302,147,302,148,302,149,301,150,301,151,301,152,301,153,301,154,301,155,301,156,300,157,300,158,299,159,299,160,298,160,297,160,296,160, 295,160,294,160,293,160,292,161,292,162,292,163,292,164,292,165,292,166,291,166,290,167,289,167,288,167,287,168,286,168,285,168,284,168,284,167,283,166,283,165,283,164,283,163,282,162,281,161,280,160,279,159,278,158,277,157,276,156,275,155,274,154,274,153,274,152,275,151,275,150,275,149, 274,148,273,147,272,147,271,147,270,146,269,146,269,145,268,144,268,143,268,142,268,141,268,140,269,140,270,139,271,139,272,138,273,137,272,136,272,135,271,134,271,133,271,132,271,131,271,130,271,129,271,128,271,127,271,126,270,125,270,124,270,123,270,122,270,121,271,120,272,120,273,120, 274,119,274,118,273,117,272,117,271,116,271,115,270,114,270,113,270,112,271,112,272,112,273,111,274,110,275,110,276,110,276,111,277,112,278,113,279,114,280,113,280,112,280,111,281,110,282,109,282,108,281,107,281,106,281,105,282,104,281,103,280,102,279,101,278,100,277,100,277,99,277,98, 277,97,278,97,279,96,280,95,280,94,280,93,280,92,280,91,280,90,280,89,281,88,281,87,281,86,282,85,282,84,283,83,284,83,285,83,286,83,287,84,288,84,289,84,290,84,291,83,291,82,291,81,291,80,291,79,291,78,291,77,292,76,292,75,293,75,294,74,295,74,296,73,297,73,298,73,299,72,300,71,300,70, 301,69,302,69,303,69,304,69,305,69,306,68,307,68,308,67,309,66,308,65,308,64,308,63,308,62,308,61,308,60,309,59,310,58,310,57,310,56,311,56,312,55,312,54,313,53,313,52,314,51,315,50,315,49,316,48,317,47,318,46,319,45,318,44,317,43,316,43,315,42,314,41,314,40,314,39,314,38,315,38,316,38, 317,38,318,37,319,36,320,36,321,36,322,36,323,36,324,35,325,35,326,35,327,35,328,34,329,33,330,32,331,31,332,30,333,30,334,29,335,28" href="4" shape="poly" target="_self" />
</map>

</body>

(In diesem Beispiel ist nur eine Area angegeben)

Jetzt möchte ich allerdings rechts neben die Karte noch eine Liste mit allen Wahlkreisen erstellen und bei mouseover über einen der Punkte in der Liste, soll der entsprechende Bereich auf der Karte gehighlightet werden. Dies sollte ja nur möglich sein, wenn ich die Area Koordinaten mit in den Funktion übernehme oder?
Hat jemand eine Idee, oder einen Vorschlag wie ich das umsetzen kann?

MfG

dobermant · 22. September 2011

Keine Ahung ob das mit nur einem Shape geht.
Ich hätte pro Wahlkreis einen extra Shape genommen, dem eine ID verpasst.
In der rechten Liste bekommen die Listeinträge ebenfalls eine ID. Somit hast Du die Zuordnung.

tombe · 23. September 2011

Also ich glaube nicht das du das so lösen kannst. Hier mal ein Beispiel wie es gelöst werden könnte.

HTML:

<script language="javascript" type="text/javascript">
function over(area) {
if (area == 'lo') {
    document.getElementById("area").src = "map1.gif"
} else if (area == 'ro') {
    document.getElementById("area").src = "map2.gif"
} else if (area == 'lu') {
    document.getElementById("area").src = "map3.gif"
} else if (area == 'ru') {
    document.getElementById("area").src = "map4.gif"
}
}
function out(area) {
document.getElementById("area").src = "map.gif"
}
</script>
<img src="map.gif" width="100" height="100" style="border: 0px;" id="area" usemap="#karte"/>
<map name="karte">
<area id="lo" onmouseover="over('lo');" onmouseout="out();" shape="rect" coords="0,0,50,50" alt="Links oben" href="1"/>
<area id="ro" onmouseover="over('ro');" onmouseout="out();" shape="rect" coords="50,0,100,50" alt="Rechts oben" href="2"/>
<area id="lu" onmouseover="over('lu');" onmouseout="out();" shape="rect" coords="0,50,50,100" alt="Links unten" href="3"/>
<area id="ru" onmouseover="over('ru');" onmouseout="out();" shape="rect" coords="50,50,100,100" alt="Rechts unten" href="4"/>
</map>
<p></p>
<div><a href="1" onmouseover="over('lo');" onmouseout="out();">Links oben</a></div>
<div><a href="2" onmouseover="over('ro');" onmouseout="out();">Rechts oben</a></div>
<div><a href="3" onmouseover="over('lu');" onmouseout="out();">Links unten</a></div>
<div><a href="4" onmouseover="over('ru');" onmouseout="out();">Rechts unten</a></div>

Die Bilder die hier verwendet wurden sind einfach ein Rechteck (100 x 100 Pixel) welches in 4 gleich große Bereiche aufgeteilt wurde. Es gibt ein Bild ohne Inhalt und dann jeweils ein Bild in dem dann der entsprechende Bereich farblich markiert ist.

Ich hänge es einfach mal hier mit dran.

Javascript und Imagemaps

Wuschek

Grünschnabel

dobermant

Erfahrenes Mitglied

tombe

Erfahrenes Mitglied

Anhänge

Neue Beiträge