gegrafische Auswahl über mehrere Seiten - javarea.de Forum powered by javarea.de

Archivlink: javarea.de Forum > (X)HTML & CSS (allgemein) > gegrafische Auswahl über mehrere Seiten

Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > gegrafische Auswahl über mehrere Seiten

Pages: [1]

geschrieben von Herbert1204 am 25.06.2009 - 18:09

Ich habe wieder einmal ein Problem.
Ich möchte eine Seite erstellen, wo die Besucher über mehrere Seiten eine geografische Auswahl treffen können. Weil die Auswahlmöglichkeit sehr umfangreich ist, müssen die Länder und Städte in Tabellen geschrieben werden.
Ich habe den Skript für die Auswahl der Bundesländer unten einmal hingeschrieben. Könnt Ihr mir den Skript so verändern, dass ich vier Auswahlmöglichkeiten habe? Ich bedanke mich im Voraus schon einmal recht herzlich.

Beschreibung der Seiten
Wenn der Cursor das Wort Deutschland berührt, soll sich darunter eine Tabelle mit den verlinkten 16 Bundesländer öffnen. Das funktioniert so auch.
Wenn der Cursor das Wort Deutschland oder die Tabelle darunter wieder verlässt, soll die Tabelle wieder verschwinden. Das funktioniert so leider nicht.

Mit dem Anklicken eines Bundeslandes wird die nächst Seite aufgerufen. Auf dieser Seite steht neben Deutschland dann das aufgerufene Bundesland. Nun soll durch Berühren des Wortes Deutschland die Tabelle mit den Bundesländer öffnen.
Wenn das Bundesland berührt wird, soll sich eine Tabelle mit den Landkreisen des Bundeslandes öffnen. Hier sind die Landkreise selbstverständlich verlinkt.
Mit dem Anklicken eines Landkreises wird die nächst Seite aufgerufen. Auf dieser Seite steht neben Deutschland dann das aufgerufene Bundesland und der aufgerufene Landkreis.
Durch Berühren des Landkreises soll eine Tabelle mit den Städten und Gemeinden des Landkreises angezeigt werden.
Größere Städte sollen noch einmal in Stadtteile aufgeteilt werden.

Beispiel: Deutschland – Niedersachsen – Region Hannover – Stadt Hannover

Bei jeder Berührung soll sich die dazugehörige Tabelle öffnen.

<script>
function showIt(t) {
v = t.value;
if(v == 'vt') {
document.getElementById('opt_vt').style.display = 'block';
}

}
</script>

<table cellspacing="0" width="760" bordercolordark="white" bordercolorlight="black" border="1">
<td width="185" align="left" valign="middle" height="30">

<a value="vt" onmouseover="showIt(this)">
Deutschland</a>
</td>
<td width="185" align="left" valign="middle" height="30">
Niedersachsen
</td>
<td width="185" align="left" valign="middle" height="30">
Region Hannover
</td>
<td width="185" align="left" valign="middle" height="30">
Stadt Hannover
</td>
</tr>
<tr>
<td width="760" align="left" valign="top" colspan="4">

<table cellspacing="0" width="630" bordercolordark="white" bordercolorlight="black" cellpadding="0">
<tr>
<td width="150" align="left" valign="top">
<a href="http://">Baden-Württemberg</a><a href="http://"> 
<a href="http://">Bayern</a><a href="http://"> 
<a href="http://">Berlin</a><a href="http://"> 
<a href="http://">Brandenburg</a><a href="http://"> </a>
</td>
<td width="190" align="left" valign="top">
<a href="http://">Bremen</a><a href="http://"> 
<a href="http://">Hamburg</a><a href="http://"> 
<a href="http://">Hessen</a><a href="http://"> 
<a href="http://">Mecklenburg-Vorpommern</a><a href="http://"> </a>
</td>
<td width="150" align="left" valign="top">
<a href="http://">Niedersachsen</a><a href="http://"> 
<a href="http://">Nordrhein-Westfalen</a><a href="http://"> 
<a href="http://">Rheinland-Pfalz</a><a href="http://"> 
<a href="http://">Saarland</a><a href="http://"> </a>
</td>
<td width="140" align="left" valign="top">
<a href="http://">Sachsen</a><a href="http://"> 
<a href="http://">Sachsen-Anhalt</a><a href="http://"> 
<a href="http://">Schleswig-Holstein</a><a href="http://"> 
<a href="http://">Thüringen</a>
</td>
</tr>
</table>
</td>
</tr>
</table>

geschrieben von zippy am 27.06.2009 - 00:20

Hast die Seite irgendwo online? In deinem Quelltextabschnitt fehlen Teile, Styles, usw.
Nirgends ein onmouseout, auch keine Funktion, welche die Tabelle verschwinden lässt. Und wenn du die Tabelle erscheinen lässt, und dann von "Deutschlanf" zur Tabelle gehst, würde sie nach deiner Beschreibung verschwinden, bevor man in der Tabelle etwas wählen könnte.

Und nochwas: <a> hat mE kein Attribut value.

geschrieben von Gast am 28.06.2009 - 02:00

Hallo Zippy
Vielen Dank für Deine Nachricht. Leider habe ich Deine Antwort nicht richtig verstanden Hier ist der Link zu der Seite: http://www.talk-and-meet.com/Deutschland.htm

Wie Du dort sehen kannst, öffnet sich beim Berühren des Wortes Deutschland die Tabelle wie gewünscht. Nur wenn der Cursor die Tabelle verlässt, wird die Tabelle nicht geschlossen. Desweiteren sollen bei allen Wörtern, die neben Deutschland stehen, die dazu gehörige Tabelle öffnen.

geschrieben von zippy am 28.06.2009 - 07:58

Zitat von: Gast am 28.06.2009 - 02:00

Da ist jetzt was eigenartiges passiert:
-wenn ich auf den Link in der Benachrichtigungsmail klixe, komm ich zu dieser Seite ohne www, sehe den Gastbeitrag, kann mich aber weder anmelden, noch antworten
- rufe ich die Seite ohne www auf, funzt das Cookie, aber ich sehe den zitierten Gastbeitrag nicht.

Zur Sache: Mir wird unter obiger Adresse nur der obige, unvollständige Quelltext angezeigt. Da passiert gar nix, wie auch zu erwarten war. Dennoch:

Wenn du ein Element beim Verlassen des Cursors unsichtbar machen möchtest, musst du das hinein schreiben. Die Aktion heißt "onmouseout". Beispiel:

	HTML-Quelltext
1:	<div id="divid" style="display:none" onmouseout="this.style.display='none'"><table> etc. ...

Das mit den Attributen: <a> hat meines Wissens kein Attribut "value". Eigentlich brauchst du für deienn Zweck gar keinen Anker (=a). Es sollte aber dennoch funktionieren, zB so:

	HTML-Quelltext
1:	<a style="cursor:wieduwlllst" onmouseover="document.getElementById('divid').style.display='block'">Deutschland</a>

geschrieben von Herbert1204 am 28.06.2009 - 13:25

Hallo Zippy
Erst einmal Vielen Dank für Deine schnelle Antwort. Leider habe ich Deine Antwort nicht ganz verstanden.
Ich habe jetzt den Code, so wie ich es verstanden habe, verändert und erweitert. Siehe http://www.talk-and-meet.com/Deutschland.htm
Jetzt funktioniert es folgendermaßen:
Wenn der Cursor Deutschland berührt öffnet sich die richtige Tabelle.
Wenn der Cursor Niedersachsen berührt öffnet sich zusätzlich die richtige Tabelle.
Wenn der Cursor Region Hannover berührt öffnet sich zusätzlich die richtige Tabelle.
Wenn der Cursor Hannover berührt öffnet sich zusätzlich die richtige Tabelle.
Wenn der Cursor Niedersachsen, Region Hannover, Hannover berührt, öffnet sich erst gar keine Tabelle, und wenn der Cursor Deutschland berührt, öffnen sich alle Tabellen gleichzeitig. Außerdem habe ich das onmouseout wahrscheinlich an die falsche Stelle gesetzt, denn die Tabellen werden schon bei Berührung geschlossen.

Ich möchte aber, dass bei einer Berührung die dazugehörige Tabelle sich öffnet und bei Nichtauswahl wieder schließt. Und es soll immer nur eine Tabelle angezeigt werden.

Ich hoffe, dass ich mich verständlich ausgedrückt habe. Hier noch einmal der Code

<table cellspacing="0" width="760" bordercolordark="white" bordercolorlight="black" border="1">

<td width="110" align="left" valign="middle" height="30">

<a style="cursor:opt_vt" onmouseover="document.getElementById('opt_vt').style.display='block'">
 Deutschland</a>

</td>
<td width="140" align="left" valign="middle" height="30">
<a style="cursor:opt_nt" onmouseover="document.getElementById('opt_nt').style.display='block'">Niedersachsen</a>

</td>
<td width="160" align="left" valign="middle" height="30">
<a style="cursor:opt_kt" onmouseover="document.getElementById('opt_kt').style.display='block'">Region Hannover</a>
</td>
<td width="200" align="left" valign="middle" height="30">
<a style="cursor:opt_lt" onmouseover="document.getElementById('opt_lt').style.display='block'">Hannover</a>
</td>
<td width="200" align="left" valign="middle" height="30">
Herrenhausen-Stöcken

</td>
</tr>
<tr>
<td width="760" align="left" valign="top" colspan="5">
<div id="opt_vt" style="display:none" onmouseout="this.style.display='none'">
<table cellspacing="0" width="630" bordercolordark="white" bordercolorlight="black">
<tr>
<td width="150" align="left" valign="top">
<a href="http://">Baden-Württemberg</a><a href="http://"> 
<a href="http://">Bayern</a><a href="http://"> 
<a href="http://">Berlin</a><a href="http://"> 
<a href="http://">Brandenburg</a><a href="http://"> </a>
</td>
<td width="190" align="left" valign="top">
<a href="http://">Bremen</a><a href="http://"> 
<a href="http://">Hamburg</a><a href="http://"> <a href="http://">Rheinland-Pfalz</a><a href="http://"> <a href="http://">Schleswig-Holstein</a><a href="http://"> 
<a href="http://">Thüringen</a>
</td>
</tr>
</table>

<div id="opt_nt" style="display:none" onmouseout="this.style.display='none'">
<table cellspacing="0" width="720" bordercolordark="white" bordercolorlight="black">
<tr>
<td width="180" align="left" valign="top">
<a href="http://">BS  - Stadt Braunschweig</a><a href="http://"> </a>
<a href="http://">H    - Region Hannover</a><a href="http://"> </a>
<a href="http://">HI   - Lkr. Hildesheim</a>
</td>
<td width="180" align="left" valign="top">
 
</td>
<td width="180" align="left" valign="top">
 
</td>
<td width="180" align="left" valign="top">
 
</td>
</tr>
</table>

<div id="opt_kt" style="display:none" onmouseout="this.style.display='none'">
<table cellspacing="0" width="630" bordercolordark="white" bordercolorlight="black">
<tr>
<td width="150" align="left" valign="top">
<a href="http://">Burgwedel</a><a href="http://"> </a>
<a href="http://">Hannover</a>
</td>
<td width="190" align="left" valign="top">
 
</td>
<td width="150" align="left" valign="top">
 
</td>
<td width="140" align="left" valign="top">
 
</td>
</tr>
</table>

<div id="opt_lt" style="display:none" onmouseout="this.style.display='none'">
<table cellspacing="0" width="630" bordercolordark="white" bordercolorlight="black">
<tr>
<td width="326" align="left" valign="top">
<a href="http://">Buchholz-Kleefeld</a><a href="http://"> </a>
<a href="http://">Herrenhausen-Stöcken</a><a href="http://"> </a>
</td>
<td width="150" align="left" valign="top">
 
</td>
<td width="140" align="left" valign="top">
 
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</table>

geschrieben von zippy am 30.06.2009 - 05:06

1.) Der Quelltext ist leichter lesbar, wenn man beim Posten den Button "HTML-Code" verwendet
2.) Das ist hiniges html. Gemischt aus verschiedenen Generationen. Wenn du Styles verwendest, geht es zB auch so: style="font-family:arial;font-size:11pt;" und so weiter
3.) Die Container sind bei dir ineinander verschachtelt. Du machst zB einen Container sichtbar, der seinerseits in einem noch unsichtbaren Container liegt.
4.) Schlage vor, das ganze neu aufzubauen. Sokzessive und immer so, dass du dabei den Überblick behältst. Hier ein sehr einfach gehaltener Ansatz:

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37:

<?xml encoding="iso 8859-1" version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Klappdivs</title>
<script type="text/javascript">
function openclose(id){
if(document.getElementById(id).style.display=="block")document.getElementById(id).style.display="none";
else document.getElementById(id).style.display="block";
}	  
</script>
</head>
<body style="font-family:arial;font-weight:bold">
<div style="cursorointer;color:red;width:400px;" onclick="openclose('bundeslaender')">Deutschland
</div>
<div id="bundeslaender" style="display:none;color:blue;margin-left:20px;width:400px;">
<div style="cursorointer" onclick="openclose('bundesland1')">Bundesland 1</div>
<div id="bundesland1" style="display:none;color:green;margin-left:20px;">
Region1_1<br />
Region1_2<br />
Region1_3<br />
</div>
<div style="cursorointer" onclick="openclose('bundesland2')">Bundesland 2</div>
<div id="bundesland2" style="display:none;color:green;margin-left:20px;">
Region2_1<br />
Region2_2<br />
Region2_3<br />
</div>
<div style="cursorointer" onclick="openclose('bundesland3')">Bundesland 3</div>
<div id="bundesland3" style="display:none;color:green;margin-left:20px;">
Region3_1<br />
Region3_2<br />
Region3_3<br />	
</div>
</div>
</body>
</html>

geschrieben von zippy am 30.06.2009 - 05:07

Die Smileys im Quelltext sind Doppelpunkte mit p
Ist irgendwie passiert ...

geschrieben von zippy am 30.06.2009 - 05:11

Ohne Smileys:

1.) Der Quelltext ist leichter lesbar, wenn man beim Posten den Button "HTML-Code" verwendet
2.) Das ist hiniges html. Gemischt aus verschiedenen Generationen. Wenn du Styles verwendest, geht es zB auch so: style="font-family:arial;font-size:11pt;" und so weiter
3.) Die Container sind bei dir ineinander verschachtelt. Du machst zB einen Container sichtbar, der seinerseits in einem noch unsichtbaren Container liegt.
4.) Schlage vor, das ganze neu aufzubauen. Sokzessive und immer so, dass du dabei den Überblick behältst. Hier ein sehr einfach gehaltener Ansatz:

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37:

<?xml encoding="iso 8859-1" version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Klappdivs</title>
<script type="text/javascript">
function openclose(id){
if(document.getElementById(id).style.display=="block")document.getElementById(id).style.display="none";
else document.getElementById(id).style.display="block";
}	  
</script>
</head>
<body style="font-family:arial;font-weight:bold">
<div style="cursor:pointer;color:red;width:400px;" onclick="openclose('bundeslaender')">Deutschland
</div>
<div id="bundeslaender" style="display:none;color:blue;margin-left:20px;width:400px;">
<div style="cursor:pointer" onclick="openclose('bundesland1')">Bundesland 1</div>
<div id="bundesland1" style="display:none;color:green;margin-left:20px;">
Region1_1<br />
Region1_2<br />
Region1_3<br />
</div>
<div style="cursor:pointer" onclick="openclose('bundesland2')">Bundesland 2</div>
<div id="bundesland2" style="display:none;color:green;margin-left:20px;">
Region2_1<br />
Region2_2<br />
Region2_3<br />
</div>
<div style="cursor:pointer" onclick="openclose('bundesland3')">Bundesland 3</div>
<div id="bundesland3" style="display:none;color:green;margin-left:20px;">
Region3_1<br />
Region3_2<br />
Region3_3<br />	
</div>
</div>
</body>
</html>