Bild Anzeigen Und Ausblenden, ohne Java Script Einstellungen

[amethyst]

Hallo,

ich hab mir gerade mal die Hilfe von Joachim angesehen und geschaut, wie er es ermöglicht hat, dass Abbildungen nur auf Mauklick aufgemacht werden, was natürlich enorm Ladezeiten spart. Er benutzt JS.

Ich mag kein Java und vermeide es möglichst. Hat jemand eine Idee, wie man das mit CSS verwirklichen kann?

Gruß Uschi

[Conny]

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 &ouml;ffnen/schlie&szlig;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...)