Supportnet / Forum / Skripte(PHP,ASP,Perl...)
Javascript: Bereiche ein/ausblenden
Frage
Hallo,
ich hänge gerade an folgendem Javascript:
Der Inhalt meiner Seite ist in verschiedene Bereiche aufgeteilt, die jeweils mit einem <fieldset> umrandet sind.
Beim Laden der Seite sollt jetzt nur das <fieldset> ohne den Inhalt angezeigt werden. Vor dem Text der Legende befindet sich das "Bild1".
Clickt nun der User auf das Bild1, erscheint der Inhalt des fielsets. Gleichzeitig wird Bild1 durch Bild2 ersetzt. Ein erneutes Klicken des Bildes macht diesen Vorgang rückgängig.
Ich hoffe jemand hat einen Plan wie dies zu realisieren wäre.
Vielen Dank für Eure Antworten.
[code]
<fieldset>
<legend><img src="Bild1">text1</legend>
- --text---
</fieldset>
<fieldset>
<legend><img src="Bild1">text2></legend>
--text----
</fieldset>
[/code]
Antwort 1 von opelfahrer
meinst du so in etwa?
<html><head></head><body>
<fieldset>
<legend><a href="javascript:swap(0)">
<img name="bild" src="Bild1.jpg"></a>text1</legend>
<div name="field"></div>
</fieldset>
<fieldset>
<legend><a href="javascript:swap(1)">
<img name="bild" src="Bild1.jpg"></a>text2</legend>
<div name="field"></div>
</fieldset>
<script type="text/javascript">
var txt=new Array();
for(n=0;n<2;n++) txt[n]=new Array();
for(n=0;n<2;n++) txt[n][1]="";
txt[0][2]="---text1---";
txt[1][2]="---text2---";
var pic=new Array();
for(n=0;n<2;n++) pic[n]=new Array();
for(n=0;n<2;n++) pic[n][1]="Bild1.jpg";
for(n=0;n<2;n++) pic[n][2]="Bild2.jpg";
function swap(n){
txt[n][0]=txt[n][1];
txt[n][1]=txt[n][2];
txt[n][2]=txt[n][0];
pic[n][0]=pic[n][1];
pic[n][1]=pic[n][2];
pic[n][2]=pic[n][0];
document.getElementsByName("bild")[n].src=pic[n][1];
document.getElementsByName("field")[n].innerHTML=txt[n][1];
}
</script>
</body></html>
Antwort 2 von rfb
Zitat:
document.getElementsByName("field")[n].innerHTML=txt[n][1];
DIVs kennen kein name-Attribut, also wird diese Methode nicht zuverlässig arbeiten. Für sowas gibts IDs.document.getElementsByName("field")[n].innerHTML=txt[n][1];
Für die Verwendung von innerHTML gibts keine Notwendigkeit. Wenn nur PCDATA ausgetauscht wird reicht firstChild.data.
Antwort 3 von Supermax
Ich würde den Inhalt des Fieldsets einfach in ein DIV einschließen und dieses mit vorerst mit dem CSS-Attribut "display:none" versehen.
Also:
und der zugehörige JavaScript-Code:
Der Code ist jetzt aus dem Gedächtnis getippt, also eventuell fehlende Klammern etc. bitte entschuldigen.
Dieser Code sollte zumindest auf FF 2.0, IE 7, Opera 9.x funktionieren.
Also:
<fieldset><legend><img id="fieldset1icon" src="..." onclick="toggle(this,'fieldset1content');">...</legend><div id="fieldset1content" style="display:none;">.....</div></fieldset>und der zugehörige JavaScript-Code:
function toggle(image,refid) {
var thediv = document.getElementById(refid);
if (thediv.style.display == 'none') {
// wenn es nicht sichtbar ist
thediv.style.display = 'block'; // sichtbar machen
image.src = 'verbergen.gif';
} else {
// wenn es bereits sichtbar ist
thediv.style.display = 'none'; // unsichtbar machen
image.src = 'anzeigen.gif';
}
}Der Code ist jetzt aus dem Gedächtnis getippt, also eventuell fehlende Klammern etc. bitte entschuldigen.
Dieser Code sollte zumindest auf FF 2.0, IE 7, Opera 9.x funktionieren.