[gelöst] JavaScript -> Imagemap
Eingetragen von sg88 (95)am 21.09.2011 - 07:01 Uhr in
Hallo zusammen,
auch wenn das hier eigentlich kein Script Forum ist, bin ich mir doch fast sicher das irgendwer hier mein Problem lösen kann ^^
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:
<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="#imgmap201182392211"/>
<map id="imgmap201182392211">
<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?
Gruß
SG
- Anmelden oder Registrieren um Kommentare zu schreiben
Dann solltest Du die
am 21.09.2011 - 08:18 Uhr
Dann solltest Du die Eventfunktionen für die Areas unterschiedlich benennen. Dann kannst Du dieselben Funktionen mit Mouseover und Mouseout an die Listenelemente kleben. Ist halt etwas Handarbeit angesagt.
Beste Grüße
Werner
So habe ich mir das auch
am 21.09.2011 - 08:26 Uhr
So habe ich mir das auch vorgestellt, aber muss ich dann in den einzelnen Funktionen nicht noch nachträglich definieren, um welche Area Koords es sich handelt?`
Weil die sind ja bis jetzt nur in dem Area bereich der Imagemap definiert?!?
Der Trick liegt doch darin,
am 21.09.2011 - 09:22 Uhr
Der Trick liegt doch darin, daß Du die Area eindeutig identifizieren mußt um Deine Funktionen over() und out() funktionsfähig zu bekommen. Im Moment ist die Area über den auftretenden Event in der Area definiert. Bei den Listenelementen geht das natürlich nicht mehr. Du kannst aber jeder Area ein eindeutiges Alt-Attribute mitgeben und z.B. mittels jQuery dann die entsprechende Area ermitteln und die BackgroundColor setzen.
function area47over() {jQuery('area[alt="area47"]').css('background-color','yellow');
}
und
function area47out() {jQuery('area[alt="area47"]').css('background-color','white');
}
Beste Grüße
Werner
Habe es geschafft das ganze
am 22.09.2011 - 07:42 Uhr
Habe es geschafft das ganze zu realisieren, nur leider bin ich inzwischen auf ein weiteres Problem gestoßen.
Hier mein aktueller Code:
<html>
<head>
<script type="text/javascript" src="/drupal_java/sites/default/files/js/cvi_map_lib.js"></script>
<!--
function ById(v) {return(document.getElementById(v));}
function setClassTo(id) {var ele=ById('l'+id); ele.className="al";}
function resetClass(id) {var ele=ById('l'+id); ele.className="lk";}
function setup(opts) {
if(isIE) {this.blur(); }//IE specific
var pln = ById('hessenkarte');
if(opts['imgsrc']==''||opts['imgsrc'].match(/.+(Entrance_Hall|Bavarian_Parliament).+/i)) {
ById('BM').style.display = 'block';
}else {
ById('BM').style.display = 'none';
}
cvi_map.modify(obj,opts);
return false;
}
window.onload = function() {
cvi_map.add(ById('hessenkarte'),{opacity: 50, areacolor: '#0099ff', noborder: true});
}
-->
</script>
</head>
<body>
<div class="wrapper">
<dl id="BM" style="display:block;">
<dd><a href="#" id="l11" class="lk" onmouseover="extAreaOver('hessenkarte','1');" onmouseout="extAreaOut('hessenkarte','1');">Test 1</a></dd>
<dd><a href="#" id="l12" class="lk" onmouseover="extAreaOver('hessenkarte','2');" onmouseout="extAreaOut('hessenkarte','2');">Test 2</a></dd>
<dd><a href="#" id="l13" class="lk" onmouseover="extAreaOver('hessenkarte','3');" onmouseout="extAreaOut('hessenkarte','3');">Test 3</a></dd>
<dd><a href="#" id="l14" class="lk" onmouseover="extAreaOver('hessenkarte','4');" onmouseout="extAreaOut('hessenkarte','4');">Test 4</a></dd>
</dl>
<div><img id="hessenkarte" src="/drupal_java/sites/default/files/wahlkreise_tiny_gimp_transparent.png" usemap="#overlay"/></div></td>
</div>
<map name="overlay">
<area id="1" onmouseover="setClassTo(11);" onmouseout="resetClass(11);" title="Test 1" alt="Test 1" href="#" shape="poly" coords="161,121, 165,121, 167,123, 167,127, 165,129, 161,129, 160,128, 148,133, 148,116, 160,122">
<area id="2" onmouseover="setClassTo(12);" onmouseout="resetClass(12);" title="Test 2" alt="Test 2" href="#" shape="poly" coords="177,121, 173,121, 171,123, 171,127, 173,129, 177,129, 178,128, 190,133, 190,116, 178,122">
<area id="3" onmouseover="setClassTo(13);" onmouseout="resetClass(13);" title="Test 3" alt="Test 3" href="#" shape="poly" coords="86,123, 86,127, 84,129, 80,129, 79,128, 67,133, 67,116, 79,122, 80,121, 84,121">
<area id="4" onmouseover="setClassTo(14);" onmouseout="resetClass(14);" title="Test 4" alt="Test 4" href="#" shape="poly" coords="90,127, 90,123, 92,121, 96,121, 97,122, 109,116, 109,133, 97,128, 96,129, 92,129">
</map>
</body>
</html>
Wenn ich den Code lokal nun bei mir auf dem Rechner ausführe, gibt es keinerlei Probleme und alles funktioniert wie ich mir das vorstelle.
Wenn ich die HTML Datei als Menüpunkt direkt bei mir in der Drupalseite aufrufen lasse, gibt es kein Problem.
WENN ich allerdings den Code via Node einbinden lassen will, bekomme ich folgenden Fehler:
Details zum Fehler auf der Webseite
Benutzer-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; InfoPath.2; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E; Zune 4.7)
Zeitstempel: Thu, 22 Sep 2011 06:38:50 UTC
Meldung: 'options.bordercolor' ist Null oder kein Objekt
Zeile: 160
Zeichen: 2
Code: 0
URI: http://10.9.11.95/drupal_java/sites/default/files/js/cvi_map_lib.js
Meldung: 'options.bordercolor' ist Null oder kein Objekt
Zeile: 160
Zeichen: 2
Code: 0
URI: http://10.9.11.95/drupal_java/sites/default/files/js/cvi_map_lib.js
Meldung: 'options.bordercolor' ist Null oder kein Objekt
Zeile: 160
Zeichen: 2
Code: 0
URI: http://10.9.11.95/drupal_java/sites/default/files/js/cvi_map_lib.js
Die Codezeile in der .js Datei sieht wie folgt aus:
156 - 163
function extAreaOver(image,area) {var img = document.getElementById(image);
var obj = document.getElementById(area);
var cav = document.getElementById(img.canvasid);
var bc = performRGBColor(img.options['bordercolor'],'#0000ff');
var ac = performRGBColor(img.options['areacolor'],'#000000');
var op = img.options['opacity']/100;
if(img && obj && cav) setAreaOver(obj,img.canvasid,bc,ac,op,img.options['noborder'],img.options['nofade'],img.jg);
Hat jemand eine Idee?
Im Anhang nochmal die komplette .js Datei.
Gelöst !
am 22.09.2011 - 08:14 Uhr
Hat sich erledigt!!
sg88 schrieb Hat sich
am 22.09.2011 - 12:13 Uhr
Hat sich erledigt!!
Wäre nett wenn du den Lösungsvorgang für diejenigen beschreibst, die eventuell mal das selbe Problem haben werden.
Gruß
Sooo meine Karte ist jetzt
am 27.09.2011 - 07:17 Uhr
Sooo meine Karte ist jetzt soweit fertig und möchte sie natürlich allen hier gerne zur Verfügung stellen.
Inzwischen habe ich die Karte ein weniger erweitert, sie kann nun folgendes:
- Highlight bei Mouseover über ein Area
- Highlight bei Mouseover über einen Link
- Output eines Bildes an einer Stelle auf der Seite, bei Klick auf eine Area, oder einen Link
Alles was benötigt wird befindet sich in der angehängten .zip Datei. Lediglich die Outputbilder fürs klicken kann ich nicht rausgeben, da kann sich dann jeder selbst ein paar raussuchen.
Sollten Fragen aufkommen, stehe ich natürlich gerne zur Verfügung ;)
PS: In der HTML Datei sind bis jetzt nur 5 Links angelegt mit entsprechendem Mouseover und onklick Effekt, der Rest muss noch hinzugefügt werden, ist allerdings selbsterklärend.