Hallo Uschi,
ja, Joachim ist ein rafiniertes Kerlchen!
Ein Blick in der Quellcode verrät folgendes:
(Ich habe es 1 zu 1 übernommen)
QUELLTEXT
<p>Sie sehen jetzt den Grafikbetrachter, wie die folgende <a onclick=
"doSection(f21)" class="sidebar" href="#nowhere" title=
"Klicken Sie, um den Abschnitt zu öffnen/schließen.">Abbildung</a>
zeigt.</p>
<div style="margin-left: 2em">
<div class="sidebartext" id="f21" style="display: none"
onclick="noSection(f21)">
<img src="../image/image_viewer.gif" width="596" height=
"366" border="0" alt="Grafikbetrachter">
</div>
Der Text der zum Bild wird, wird verlinkt mit einem Verweis auf einem Anker auf der gleichen Seite (hier: #nowere). Damit sich das Bild an der richtigen Stelle (hier in einem DIV Container) positioniert, bekommt es eine ID (f21). Angesteuert wird es aber dennoch mit ein kleines JavaScript.
QUELLTEXT
function doSection (secNum){
//display the section if it's not displayed; hide it if it is displayed
if (secNum.style.display=="none"){secNum.style.display=""}
else{secNum.style.display="none"}
}
function noSection (secNum){
//remove the section when user clicks in the opened DIV
if (secNum.style.display==""){secNum.style.display="none"}
}
Class sidebar und sidebartext beinhalten:
QUELLTEXT
a.sidebar {
color : #339933;
font-weight : bold;
text-decoration : none;
cursor : hand;
background : transparent;
}
/* Only use this for sidebars that ARE in a list */
DIV.sidebartext {
position: relative;
left: -22px;
height: 72px;
width: 300px;
margin-top: .6em;
margin-right: 3em;
margin-left: 0;
margin-bottom: .6em;
padding-top: .75em;
padding-right: 6px;
padding-left: .75em;
padding-bottom: .75em;
cursor: hand;
border-left: 4pt solid #339900;
background-color: #F0F0F0;
}
So, ich glaube damit ist das Geheimnis gelüftet
cu
Conny (der hoffentlich nichts vergessen hat...)