mit 'onClick' DIV erscheinen lassen?

Publisher · 20. August 2010 um 15:44

Hallo Zusammen

Ich möchte gerne so eine Bildergalerie mit JS realisieren http://kit.ch/keller-immo/team/rene-keller da ich nicht für jede person eine eigene Seite erstellen möchte.

Ich habe noch wenig Erfahrung in JS, kann mir aber vorstellen dass man was mit onClick dabei erreichen kann. Wie man Elemente Positioniert ist kein Problem, mit CSS habe ich viel zu tun.

Wie könnte der JS Befehl auf einen Bild-Link aussehen damit ich einen zb. ausgeblendeten DIV anzeigen Lasse? Wenn man ein anderes anklickt, muss natürlich das andere ausgeblendet werden.

Aus diesem Grund ein Div, da auch Text darin erscheinen soll, nicht nur ein IMG.

Oder kann man das noch einfacher lösen?

Vielen Dank jetzt schon.

yss · 20. August 2010 um 20:02

Schau dir mal diesen Beitrag an:
Mouseover/Onclick Problem
In der von mir geposteten Beispielseite/Code findest du die Antwort auf deine Frage

Furien · 20. August 2010 um 20:29

<a onClick="document.getElementById('IdDesDivs').style.visibility= 'visible'">DIV anzeigen</a>Davor natürlich per CSS das DIV mit visibility:hidden; unsichtbar machen

HTMLooser · 21. August 2010 um 19:14

ich löse solche dinge immer mit

function outline(id)
{
  document.getElementById(id).style.float = 'left';
 if(document.getElementById(id).style.display == 'none')
 {
  document.getElementById(id).style.display = 'block';
 }
 else
 {
  document.getElementById(id).style.display = 'none';
 }
}
 
<a href="#" onmouseover="outline('ID'); return false;"> </a>
<div id="ID" style="display:none"></div>
 
<a href="#" onmouseover="outline('ID2'); return false;"> </a>
<div id="ID2" style="display:none"></div>
 
<a href="#" onmouseover="outline('ID3'); return false;"> </a>
<div id="ID3" style="display:none"></div>

und so weiter

Publisher · 23. August 2010 um 15:37

Vielen Dank für die Antworten.

Ich habe es nun so erstellt wie Furien es beschrieben hatte. Nun habe ich aber das problem dass wenn ich auf ein schon angesehenes wieder klicke, ist immernoch das vorherige sichtbar.

Busco Reinigung AG - Portrait

Die oberen 5 Icons wurden vorläufig gemacht.

Wie kann ich nun machen das ich wieder auf vorherige switchen kann?

[HTML]

[/HTML][HTML]

mitarbeiter1

mitarbeiter2

mitarbeiter3

mitarbeiter4

mitarbeiter5

[/HTML][PHP]#mitarb1 { visibility:hidden; background:white; height:300px; width:150px; position:absolute; top:407px; left:550px; } #mitarb2 { visibility:hidden; height:300px; width:150px; background:white; position:absolute; top:407px; left:550px; } #mitarb3 { visibility:hidden; height:300px; width:150px; background:white; position:absolute; top:407px; left:550px; } #mitarb4 { visibility:hidden; height:300px; width:150px; background:white; position:absolute; top:407px; left:550px; } #mitarb5 { visibility:hidden; height:300px; width:150px; background:white; position:absolute; top:407px; left:550px; }[/PHP]

Furien · 23. August 2010 um 18:58

Könntest zu jedem noch ein onblur="this.style.visibility =‚hidden‘ " machen.

Publisher · 24. August 2010 um 07:13

Hallo, hm geht leider nicht. Stimmt der Code?

[HTML]

[/HTML]

mustang · 24. August 2010 um 07:22

hast du vorher auch im css visibility schon gesetzt?

Furien · 24. August 2010 um 12:54

Fail by me
darfst natürlich nicht this. machen sondern onblur=„document.getElementById(‚mitarb1‘).style.visbility = ‚hidden‘“

Publisher · 30. August 2010 um 08:03

Es geht immernoch nicht. Der Code stimmt aber schon oder? Habe mal die ersten 2 IDs so zugewiesen

[HTML]

[/HTML]