JavaScript Frage

02/10/2013 22:35 ReaperElite#1
HTML Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>NAME - Wähle dein Bundesland</title>

<script type="text/javascript" src="../includes/jquery-1.8.3.min.js"></script>

</head>

<body bgcolor="222222">

	<img id="Deutschlandkarte" src="http://www.elitepvpers.com/forum/images/map_germany.png" width="344" height="459" usemap="#Mapi" alt="/images/map_germany.png" style="border: none;" />
</div>
<div>
	<map name="Mapi" id="Mapi">
		<area shape="circle" coords="110,110,25" alt="selected_bremen.png" id="Bremen" />
		<area shape="poly" coords="265,151,273,135,287,133,293,149,289,153" alt="selected_berlin.png" id="Berlin" />
		<area shape="circle" coords="150,90,30" alt="selected_hamburg.png" id="Hamburg" />
		<area shape="poly" coords="56,419,95,324,112,332,131,317,157,330,156,345,168,362,161,384,151,398,157,427,138,435,118,423,94,432,67,435,56,419" alt="selected_wuertenberg.png" id="Baden-Wuertemberg" />
		<area shape="poly" coords="155,432,171,442,182,428,196,438,214,440,263,428,278,437,279,426,271,404,308,370,254,314,246,291,232,272,209,271,185,286,161,267,121,291,130,321,140,315,167,327,165,344,180,358,161,394,169,427,154,432" id="Bayern" alt="selected_bayern.png" />
		<area shape="poly" coords="79,355,52,344,49,332,51,324,36,319,17,321,26,310,6,300,8,273,69,242,81,262,77,272,81,283,68,295,75,303,84,299,94,311" id="Rheinland-Pfalz" alt="selected_rheinland.png" />
		<area shape="poly" coords="11,265,73,236,79,242,77,259,85,254,87,240,108,222,104,212,126,201,131,189,118,155,106,153,96,153,99,170,80,171,83,160,76,154,63,162,45,159,-1,177,-1,232,3,257" alt="selected_nordrhein.png"  id="Nordrhein-Westfalen" />
		<area shape="poly" coords="42,136,32,118,42,117,53,84,44,77,47,60,73,59,79,75,94,56,130,67,153,81,198,100,190,108,177,108,170,116,180,147,163,156,164,174,143,183,133,191,130,175,123,173,115,187,109,184,122,164,109,128,89,126,90,144,72,146,75,135,64,129,54,141" alt="selected_niedersachsen.png"  id="Niedersachsen" />
		<area shape="poly" coords="14,319,37,315,48,321,51,345,29,345,16,322" id="Saarland" alt="selected_saarland.png" />
		<area shape="poly" coords="95,188,116,182,124,171,132,173,129,188,135,191,142,186,149,197,145,229,106,255,109,276,100,288,81,279,87,267,77,256,67,259,62,252,74,242,70,235,75,214,99,202" alt="selected_hessen.png" id="Hessen" />
		<area shape="poly" coords="158,265,158,246,168,232,152,212,179,198,189,208,212,222,233,241,237,235,244,235,249,245,238,249,235,260,225,270,206,268,186,279,161,267" alt="selected_thueringen.png" id="Thueringen" />
		<area shape="poly" coords="230,264,247,278,266,266,314,240,333,242,339,223,336,205,328,202,311,204,300,214,277,213,269,198,242,202,244,227,251,227,255,239,245,244,246,254" alt="selected_sachsen.png" id="Sachsen" />
		<area shape="poly" coords="165,174,199,199,218,210,221,200,215,191,217,177,249,171,250,162,242,155,220,145,220,111,200,101,187,108,177,103,166,109,182,147,163,154" alt="selected_anhalt.png" id="Sachsen-Anhalt" />
		<area shape="poly" coords="216,115,214,103,228,94,266,101,290,86,299,99,321,93,298,123,323,131,330,144,328,156,332,171,329,181,332,197,311,199,289,210,274,200,266,189,267,182,264,175,237,159,239,124" alt="selected_brandenburg.png" id="Brandenburg" />
		<area shape="poly" coords="176,94,191,85,185,70,198,50,243,31,263,14,290,14,299,38,322,63,326,88,315,91,307,93,295,96,287,83,261,102,228,92,209,101,219,111" alt="selected_vorpommern.png" id="Mecklenburg-Vorpommern" />
		<area shape="poly" coords="112,65,105,3,147,2,200,38,189,55,186,70,193,77,179,91,170,88,164,72,149,80" alt="selected_holtstein.png" id="Schleswig-Holstein" />
</div>

<script type="text/javascript" charset="utf-8" defer="defer">
jQuery("area").each(function() {
	jQuery(this).mouseover(function() {
		var lan = jQuery(this).attr("alt");
		jQuery("#Deutschlandkarte").attr("src","http://www.elitepvpers.com/forum/images/" + lan).fadeIn();
	});
	
	jQuery(this).mouseout(function(){
		jQuery("#Deutschlandkarte").attr("src","http://www.elitepvpers.com/forum/images/map_germany.png").fadeIn();
	});
});
</script>

</body>
</html>
** Die elitepvpers.com Tags vor z.B /images/germany.png/ werden automatisch gemacht, keine Ahnung wieso gehören nicht dazu. **


Hallo,

Habe jetzt das obenstehende Script, der Benutzer soll sein Bundesland auswählen können. Dazu komme ich an zwei stellen nicht weiter:

1. Wenn der Benutzer ein Bundesland auswählt (Links klick) soll das Bild definiert worden sein bis er ein anderes geklickt hat. Ohne das wenn auf ein anderes Bundesland kommt dieses ausgewählt wird.

2. Soll ein definiert Text sein z.B "Willst du für %DEIN_BUNDESLAND% antreten?" Wie kann ich auslesen was er für ein Feld mit Links klick ausgewählt hat?

Danke
02/11/2013 09:29 MrPuschel#2
<area/> wird wie ein link behandelt. Du kannst also onclick auf das Element anwenden. Schreibe eine Funktion der das Bundesland übergeben wird.

Beispielsweise :
HTML Code:
<area shape="poly" coords="165,174,199,199,218,210,221,200,215,191,217,177,249,171,250,162,242,155,220,145,220,111,200,101,187,108,177,103,166,109,182,147,163,154" alt="selected_anhalt.png" id="Sachsen-Anhalt" onclick="checkState('Sachsen-Anhalt')"/>
Um dir Schreibarbeit zu ersparen kannst du per jquery einen event handler an jedes area element anhängen. Dann überprüfst du in checkState welche id das geklickte Objekt besitzt.

HTML Code:
jQuery("area").each(function(i, element) { 
   element.click(checkState());
});

function checkState() {
  console.log($(this).id);
};
Du kannst als shorthand hover [Only registered and activated users can see links. Click Here To Register...]. Was dein anderes Problem angeht weis ich nicht genau was du machen möchtest.
02/11/2013 11:57 ReaperElite#3
Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>NAME - Wähle dein Bundesland</title>

<script type="text/javascript" src="../includes/jquery-1.8.3.min.js"></script>

</head>

<body bgcolor="222222">

	<img id="Deutschlandkarte" src="images/map_germany.png" width="344" height="459" usemap="#Mapi" alt="images/map_germany.png" style="border: none;" />
</div>
<div>
	<map name="Mapi" id="Mapi">
		<area type="button" shape="circle" coords="110,110,25" alt="selected_bremen.png" id="Bremen" onclick="checkState('Bremen')" />
		<area shape="poly" coords="265,151,273,135,287,133,293,149,289,153" alt="selected_berlin.png" id="Berlin" onclick="checkState('Berlin')" />
		<area shape="circle" coords="150,90,30" alt="selected_hamburg.png" id="Hamburg" onclick="checkState('Hamburg')" />
		<area shape="poly" coords="56,419,95,324,112,332,131,317,157,330,156,345,168,362,161,384,151,398,157,427,138,435,118,423,94,432,67,435,56,419" alt="selected_wuertenberg.png" id="Baden-Wuertemberg" onclick="checkState('Baden-Wuertemberg')" />
		<area shape="poly" coords="155,432,171,442,182,428,196,438,214,440,263,428,278,437,279,426,271,404,308,370,254,314,246,291,232,272,209,271,185,286,161,267,121,291,130,321,140,315,167,327,165,344,180,358,161,394,169,427,154,432" id="Bayern" alt="selected_bayern.png" onclick="checkState('Bayern')" />
		<area shape="poly" coords="79,355,52,344,49,332,51,324,36,319,17,321,26,310,6,300,8,273,69,242,81,262,77,272,81,283,68,295,75,303,84,299,94,311" id="Rheinland-Pfalz" alt="selected_rheinland.png" onclick="checkState('Rheinland-Pfalz')"/>
		<area shape="poly" coords="11,265,73,236,79,242,77,259,85,254,87,240,108,222,104,212,126,201,131,189,118,155,106,153,96,153,99,170,80,171,83,160,76,154,63,162,45,159,-1,177,-1,232,3,257" alt="selected_nordrhein.png"  id="Nordrhein-Westfalen" onclick="checkState('Nordrhein-Westfalen')" />
		<area shape="poly" coords="42,136,32,118,42,117,53,84,44,77,47,60,73,59,79,75,94,56,130,67,153,81,198,100,190,108,177,108,170,116,180,147,163,156,164,174,143,183,133,191,130,175,123,173,115,187,109,184,122,164,109,128,89,126,90,144,72,146,75,135,64,129,54,141" alt="selected_niedersachsen.png"  id="Niedersachsen" onclick="checkState('Niedersachsen')"/>
		<area shape="poly" coords="14,319,37,315,48,321,51,345,29,345,16,322" id="Saarland" alt="selected_saarland.png" onclick="checkState('Saarland')" />
		<area shape="poly" coords="95,188,116,182,124,171,132,173,129,188,135,191,142,186,149,197,145,229,106,255,109,276,100,288,81,279,87,267,77,256,67,259,62,252,74,242,70,235,75,214,99,202" alt="selected_hessen.png" id="Hessen" onclick="checkState('Hessen')"/>
		<area shape="poly" coords="158,265,158,246,168,232,152,212,179,198,189,208,212,222,233,241,237,235,244,235,249,245,238,249,235,260,225,270,206,268,186,279,161,267" alt="selected_thueringen.png" id="Thueringen" onclick="checkState('Thueringent')"/>
		<area shape="poly" coords="230,264,247,278,266,266,314,240,333,242,339,223,336,205,328,202,311,204,300,214,277,213,269,198,242,202,244,227,251,227,255,239,245,244,246,254" alt="selected_sachsen.png" id="Sachsen" onclick="checkState('Sachsen')"/>
		<area shape="poly" coords="165,174,199,199,218,210,221,200,215,191,217,177,249,171,250,162,242,155,220,145,220,111,200,101,187,108,177,103,166,109,182,147,163,154" alt="selected_anhalt.png" id="Sachsen-Anhalt" onclick="checkState('Sachsen-Anhalt')" />
		<area shape="poly" coords="216,115,214,103,228,94,266,101,290,86,299,99,321,93,298,123,323,131,330,144,328,156,332,171,329,181,332,197,311,199,289,210,274,200,266,189,267,182,264,175,237,159,239,124" alt="selected_brandenburg.png" id="Brandenburg" onclick="checkState('Brandenburg')" />
		<area shape="poly" coords="176,94,191,85,185,70,198,50,243,31,263,14,290,14,299,38,322,63,326,88,315,91,307,93,295,96,287,83,261,102,228,92,209,101,219,111" alt="selected_vorpommern.png" id="Mecklenburg-Vorpommern" onclick="checkState('Mecklenburg-Vorpommern')"/>
		<area shape="poly" coords="112,65,105,3,147,2,200,38,189,55,186,70,193,77,179,91,170,88,164,72,149,80" alt="selected_holtstein.png" id="Schleswig-Holstein" onclick="checkState('Schleswig-Holstein')"/>
</div>

<script type="text/javascript" charset="utf-8" defer="defer">
jQuery("area").each(function() {
	jQuery(this).mouseover(function() {
		var lan = jQuery(this).attr("alt");
		jQuery("#Deutschlandkarte").attr("src","images/" + lan).fadeIn();
	});
	
	jQuery(this).mouseout(function(){
		jQuery("#Deutschlandkarte").attr("src","images/map_germany.png").fadeIn();
	});
});
</script>

<script type="text/javascript" charset="utf-8" defer="defer">
jQuery("area").each(function(i, element) { 
   element.click(checkState());
});

function checkState() {
  console.log($(this).id);
};
</script>

</body>
</html>
Habe das jetzt so jedoch bleibt der ausgewählte nicht ausgewählt wenn ich das Feld verlasse.
Wie kann ich jetzt document.write(DAS AKTULLE BUNDESLAND) machen?
02/12/2013 18:31 Mila Kunis#4
Hallo,

Würde mich auch interessieren habe aktuell ein ähnliches Problem.

Mit freundlichen Grüßen
Mila Kunis
02/12/2013 18:33 MrPuschel#5
Welche Probleme bestehen denn noch?