ausfahrbarer Text ...

[chrisexe]

Hallo zusammen,
habe hier eine sehr schöne Anleitung gefunden wie ich einen "aus- und einfahrbaren" Text hinkriege. Javascript: Verdeckte (versteckte) Textinfos oder Grafiken einblenden ausblenden aufklappen zuklappen | <noscript>...</noscript>-Bereich

so ganz funktioniert das bei mir aber doch nicht ... denn ich möchte das Rollover Bild (siehe Code unten) einbinden.

<div><a onclick="return tricker('1')" href="javascript:void(0)">
HIER SOLLTE DAS BILD STEHEN</a></div>
<div id="1" style="display:none">ausgefahrender Text</div>

<p><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('mehr lesen31','','mehr lesen rollover.jpg',1)"><img src="mehr lesen.jpg" alt="#Alternativtext" name="mehr lesen31" width="83" height="32" border="0" id="mehr lesen31" /></a></p>

<= das ist das besagte Bild ...

Würde mich auf einfache Antworten sehr freuen,
euer chrisexe

 

[T-sneak]

So anhand von deinem Code kann ich dir nicht sagen was falsch ist hast du vlt eine Beispielseite wo man das ganze mal anschauen kann?

Allerdings, falls du kein Javascript kannst, kann ich dir nur das hier empfehlen:

jQuery UI - Accordion Demos & Documentation

ist viel einfacher und schaut auch noch besser aus..

 

[chrisexe]

Danke für den Link, hab dann noch bisschen weiter gegoogelt ... und das gefunden: Effect.SlideDown &mdash; Scriptaculous Documentation
sehr empfehlenswert!

 

[T-sneak]

Ja Scriptaculous ist ja auch ein JS Framework wie jQuery

 

[chrisexe]

Etwas ist mir aber noch nicht ganz klar, wie in der Demo von dieser Seite Effect.SlideDown &mdash; Scriptaculous Documentation gezeigt sind dort 2 "Punkte" kann man die entfernen?

auch soll der mehr lesen Button die Aufgabe des ausklappens anstelle von "Click here for a demo" übernehmen (das schafft sogar ein Anfänger wie ich), aber ist es möglich das der Button nach dem aufklappens auch die Funktion des zuklappens übernimmt (natürlich mit geänderten Text, zB. zuklappen)?

<div id="slidedown_demo" style="display:none; width:600px; height:400px; background:#fff; text-align:left;">
  <div>
    mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr <img src="Beispiel Bild.jpg" width="200" height="150" /> mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text mehr text </div>
</div>
<ul>
  <li><a href="#" onclick="Effect.SlideDown('slidedown_demo'); return false;">Click here for a demo!</a></li>
  <li><a href="#" onclick="$('slidedown_demo').hide(); return false;">Reset</a></li>
</ul>

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image19','','mehr lesen rollover.jpg',1)"><img src="mehr lesen.jpg" name="Image19" width="83" height="32" border="0" id="Image19" /></a>
<p>&nbsp;</p>
</div>

Oder gibt es bessere Frameworks?
Viele Grüße

 

[T-sneak]

list-style : none; für die li setzen

 

[chrisexe]

danke, darauf hätte ich aber auch wirklich selbst kommen können :( ... die andere Sache kriegen aber wahrscheinlich nur absolute Experten hin, oder ist das mit einfachen mitteln möglich?

 

[T-sneak]

ja geht auch musst dir aber ne javascript funktion für schreiben. Der dann bei jedem Click drauf reagiert

z.b

if(offen=true){
schließen..
button text ändern
}else{
öffnen..
button text ändern
}

 

[chrisexe]

ein Freund von mir meinte, dass man deshalb einen "script-tag" nutzen könnte, also
<script>
...
</script>

stimmt das, denn er meinte ich solle einfach mal jemanden fragen, der sich damit auskennt ...

 

[threadi]

Wie man JavaScript in eine Seite einbindet wird z.B. hier beschrieben: SELFHTML: JavaScript / Einfhrung in JavaScript