mit 'onClick' DIV erscheinen lassen?

[Publisher]

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]

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

 

[Furien]

<a onClick="document.getElementById('IdDesDivs').style.visibility= 'visible'">DIV anzeigen</a>

Davor natürlich per CSS das DIV mit visibility:hidden; unsichtbar machen ;)

 

[HTMLooser]

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]

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?

<table class="mitarb_portrait" style="height: 360px;" border="0" cellspacing="0" cellpadding="0" width="400">
<tbody>
<tr>
<td><a onclick="document.getElementById('mitarb1').style.visibility= 'visible'"><img src="uploads/images/mitarb/1.jpg" alt="René Keller" /></a></td>
<td><a onclick="document.getElementById('mitarb2').style.visibility= 'visible'"><img src="uploads/images/mitarb/2.jpg" alt="René Keller" /></a></td>
<td><a onclick="document.getElementById('mitarb3').style.visibility= 'visible'"><img src="uploads/images/mitarb/3.jpg" alt="René Keller" /></a></td>
<td><a onclick="document.getElementById('mitarb4').style.visibility= 'visible'"><img src="uploads/images/mitarb/4.jpg" alt="René Keller" /></a></td>
<td><a onclick="document.getElementById('mitarb5').style.visibility= 'visible'"><img src="uploads/images/mitarb/5.jpg" alt="René Keller" /></a></td>
</tr>
</tbody>
</table>

<div id="mitarb1">mitarbeiter1</div>
<div id="mitarb2">mitarbeiter2</div>
<div id="mitarb3">mitarbeiter3</div>
<div id="mitarb4">mitarbeiter4</div>
<div id="mitarb5">mitarbeiter5</div>

#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;
}

 

[Furien]

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

 

[Publisher]

Hallo, hm geht leider nicht. Stimmt der Code?

<td><a onclick="document.getElementById('mitarb1').style.visibility= 'visible'" onblur="this.style.visibility= 'hidden'"><img src="uploads/images/mitarb/1.jpg" alt="René Keller" /></a></td>
<td><a onclick="document.getElementById('mitarb2').style.visibility= 'visible'" onblur="this.style.visibility= 'hidden'"><img src="uploads/images/mitarb/2.jpg" alt="René Keller" /></a></td>
<td><a onclick="document.getElementById('mitarb3').style.visibility= 'visible'" onblur="this.style.visibility= 'hidden'"><img src="uploads/images/mitarb/3.jpg" alt="René Keller" /></a></td>
<td><a onclick="document.getElementById('mitarb4').style.visibility= 'visible'" onblur="this.style.visibility= 'hidden'"><img src="uploads/images/mitarb/4.jpg" alt="René Keller" /></a></td>
<td><a onclick="document.getElementById('mitarb5').style.visibility= 'visible'" onblur="this.style.visibility= 'hidden'"><img src="uploads/images/mitarb/5.jpg" alt="René Keller" /></a></td>

 

[mustang]

hast du vorher auch im css visibility schon gesetzt?

 

[Furien]

Fail by me
darfst natürlich nicht this. machen sondern onblur="document.getElementById('mitarb1').style.visbility = 'hidden'"

 

[Publisher]

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

<tr>
<td><a onclick="document.getElementById('mitarb1').style.visibility= 'visible'" onblur="document.getElementById('mitarb1').style.visbility = 'hidden'"><img src="uploads/images/mitarb/1.jpg" alt="René Keller" /></a></td>
<td><a onclick="document.getElementById('mitarb2').style.visibility= 'visible'" onblur="document.getElementById('mitarb2').style.visbility = 'hidden'"><img src="uploads/images/mitarb/2.jpg" alt="René Keller" /></a></td>
<td><a onclick="document.getElementById('mitarb3').style.visibility= 'visible'" onblur="this.style.visibility= 'hidden'"><img src="uploads/images/mitarb/3.jpg" alt="René Keller" /></a></td>
<td><a onclick="document.getElementById('mitarb4').style.visibility= 'visible'" onblur="this.style.visibility= 'hidden'"><img src="uploads/images/mitarb/4.jpg" alt="René Keller" /></a></td>
<td><a onclick="document.getElementById('mitarb5').style.visibility= 'visible'" onblur="this.style.visibility= 'hidden'"><img src="uploads/images/mitarb/5.jpg" alt="René Keller" /></a></td>
</tr>