Gruppen

Top Gruppen: Windows 7; Windows Vista; Windows XP; Textverarbeitung; Excel; DSL; Internet Browser; E-Mail/Outlook
Betriebsysteme: Windows classik; Linux; BS-Sonstige
Software: Datenbanken; Bildbearbeitung; Audio/mp3/Video; Security/Viren; SW-Sonstige
Hardware: Mainboard/CPU; Grafikkarten; Peripherie; Laptop/Notebook; HW-Sonstiges
Netzwerk: Telefon,ISDN,Modem; W-Lan; NW-Sonstiges
Programmierung: PHP,ASP,Perl...; Java,C++...; Webseiten/HTML
Sonstiges: PC-Sonstiges; Plauderecke; SN Intern; Test

/ Forum / Skripte(PHP,ASP,Perl...)

Skripte(PHP,ASP,Perl...)

Fragevon Frangender vom 17.07.2019, 19:32 Options

Javascript: Bereiche ein/ausblenden

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.


<fieldset>
    <legend><img src="Bild1">text1</legend>
-   --text---

</fieldset>
<fieldset>
   <legend><img src="Bild1">text2></legend>
   --text----
</fieldset>

Antwort schreiben

Antwort 1 von opelfahrer vom 17.07.2019, 21:36 Options

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 vom 17.07.2019, 22:34 Options

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.
Für die Verwendung von innerHTML gibts keine Notwendigkeit. Wenn nur PCDATA ausgetauscht wird reicht firstChild.data.

Antwort 3 von Supermax vom 17.07.2019, 22:59 Options

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:

<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.

Hinweis

Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..

Neue Einträge

Tipp einschicken

News einschicken