tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
2
ZUGRIFFE
141
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 21.09.11 14:29 #1
    Wuschek Wuschek ist offline Grünschnabel
    Registriert seit
    Sep 2004
    Beiträge
    1
    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 :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

    <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
     
    Zitieren Zitieren
  2. 22.09.11 14:40 #2
    dobermant dobermant ist offline Mitglied Gold
    Registriert seit
    Apr 2003
    Beiträge
    141
    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.
     
    Zitieren Zitieren
  3. 23.09.11 09:05 #3
    Avatar von tombe
    tombe tombe ist offline Mitglied Diamant
    tutorials.de Premium-User
    Registriert seit
    Sep 2004
    Ort
    Möglingen (BaWü)
    Beiträge
    3.109
    Also ich glaube nicht das du das so lösen kannst. Hier mal ein Beispiel wie es gelöst werden könnte.

    HTML-Code:
    <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.
    Angehängte Dateien Angehängte Dateien
     
    Sollte ein Tipp von mir geholfen haben, habe ich nichts gegen eine entsprechende Bewertung oder ein Danke und wenn ein Problem gelöst ist, dann den Beitrag bitte auch als erledigt markieren.

    Was ich gar nicht leiden kann sind User die es nicht für nötig halten auf Antworten zu reagieren, die Themen nicht als erledigt markieren und/oder die sich nicht für Hilfe bedanken.
    Zitieren Zitieren
« Cookies in Array | asynchrone Datenübertragung »

Ähnliche Themen

  1. JFreeChart und Imagemaps
    Von Buschiii im Forum Swing, Java2D/3D, SWT, JFace
    Antworten: 0
    Letzter Beitrag: 23.12.09, 16:02
  2. Imagemaps
    Von Nord-Süd-Richtung im Forum HTML & XHTML
    Antworten: 2
    Letzter Beitrag: 09.04.09, 13:17
  3. Google und Imagemaps?
    Von UnqlPhriek im Forum HTML & XHTML
    Antworten: 3
    Letzter Beitrag: 09.06.04, 07:24
  4. Imagemaps mit ImageReady 7
    Von renderblack im Forum Photoshop
    Antworten: 0
    Letzter Beitrag: 01.06.04, 14:39
  5. Imagemaps
    Von ::-^==] HAGI [==^-:: im Forum Photoshop
    Antworten: 2
    Letzter Beitrag: 14.09.01, 15:58