Register for your free account! | Forgot your password?

Go Back   elitepvpers > Coders Den > Web Development
JavaScript Frage JavaScript Frage
You last visited: Today at 13:25

  • Please register to post and access all features, it's quick, easy and FREE!

Advertisement


Advertise with us!

JavaScript Frage

Discussion on JavaScript Frage within the Web Development forum part of the Coders Den category.

Reply
 
Old   #1
 
elite*gold: 0
The Black Market: 2/0/0
Join Date: Dec 2012
Posts: 143
Received Thanks: 3
JavaScript Frage

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
ReaperElite is offline  
Old 02/11/2013, 09:29   #2
 
elite*gold: 0
The Black Market: 4/0/0
Join Date: Apr 2005
Posts: 323
Received Thanks: 114
<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 . Was dein anderes Problem angeht weis ich nicht genau was du machen möchtest.
MrPuschel is offline  
Old 02/11/2013, 11:57   #3
 
elite*gold: 0
The Black Market: 2/0/0
Join Date: Dec 2012
Posts: 143
Received Thanks: 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?
ReaperElite is offline  
Old 02/12/2013, 18:31   #4
 
elite*gold: 0
The Black Market: 0/0/0
Join Date: Feb 2013
Posts: 8
Received Thanks: 3
Hallo,

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

Mit freundlichen Grüßen
Mila Kunis
Mila Kunis is offline  
Old 02/12/2013, 18:33   #5
 
elite*gold: 0
The Black Market: 4/0/0
Join Date: Apr 2005
Posts: 323
Received Thanks: 114
Welche Probleme bestehen denn noch?
MrPuschel is offline  
Reply

« MainEnable Problem/Frage | CSS3 Uhr »

Similar Threads Similar Threads
Javascript für ask.fm
08/18/2012 - Web Development - 0 Replies
Hallo , weiß einer wie ich ein Script erstelle das halt alle Fragen Liket? Hier ein Beispiel:Laura Lisa Schulte | ask.fm/LauraLisaSchulte Das ist das Ask.fm Profil von einer Freundin.Wenn man mit der Maus über den Daumen geht der des dann liket dann kommt der befehl:javascript:void(0) , in der webkonsole der: -- POST http://ask.fm/likes/LauraLisaSchulte/question/2800 0107589324/add Suche aber ein Script den ich einmal eingeben muss (Webkonsole oder Adresszeile)und der dann Überall den...
JavaScript Help !
06/04/2012 - General Gaming Discussion - 0 Replies
Hello Friends, I want to break a game, but I would break a locked unlock codes I do not know JavaScript JavaScript is locked for breaking codes Have a site or program?
[Frage] JavaScript-Code verschlüsseln
05/19/2012 - Web Development - 8 Replies
Kann man JavaScript-Codes so verschlüsseln, dass die meisten Leute es nicht schaffen ihn zu entschlüsseln? Ich hab jetzt schon eine Zeit lang die Suchmaschiene angeworfen, aber auf der einen Seiten steht es ist nicht möglich und auf der nächsten steht dann wieder es ist möglich.... Mfg
JavaScript
03/21/2012 - Web Development - 3 Replies
Wie kann man mit JavaScript machen das ... kommt und dann immer . dann . und bei 3 wieder von neu?
[S] Javascript Pro [B] EG
01/31/2012 - elite*gold Trading - 0 Replies
Yo.. Ich habe das Problem, dass die Videos auf meiner Seite "vor" die Werbung kommen. Dies ist bei Google chrome und Mozilla der Fall. Bei Opera klappt es. Suche jemanden der es beheben kann, kann EG bieten.



All times are GMT +2. The time now is 13:25.

elitepvpers - play less, get more - Top

Powered by vBulletin®
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
SEO by vBSEO ©2011, Crawlability, Inc.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Support | Contact Us | FAQ | Advertising | Privacy Policy | Terms of Service | Abuse
Copyright ©2024 elitepvpers All Rights Reserved.