|
|||
Text ein- und ausblenden + Bild wechseln
Guten Tag,
ich möchte: per Klick auf ein Bildchen zusätzlichen Text ein- und ausblenden. Das geht gut (Beispiel). Jetzt soll beim Klick auch das Bild gewechselt werden. Da habe ich keinen Plan- Theoretisch weiss ich wie, kriegs aber mangels Erfahrung nicht hin. Danke... Code:
<!DOCTYPE HTML> <html> <head> <title></title> <script> function showText() { var obj = document.querySelector("#dunkel"); var zustand = obj.style.display; if(zustand == "none") { obj.style.display = "block"; } else { obj.style.display = "none"; } } </script> </head> <body> <a href="#" onclick="showText()"><img src="off.gif" width="20" height="20"/></a> <div id="dunkel" style="display:none;"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> </div> </body> </html> |
Sponsored Links |
|
|||
Was hast du denn selber schon probiert?
Auch ist es hier wohl semantisch besser, einen button und keinen Link zu verwenden, da ja nur etwas ein- und ausgeblendet wird. Bezüglich bild austauschen: Du kannst beide Bilder in zwei divs packen und dann die beiden divs auf display: block und none setzen. Alternativ kannst du auch die "src" vom Bild austauschen, dann muss es aber erst geladen werden (was unschön aussehen kann) |
Sponsored Links |
|
|||
Versuch
Die erste Variante mit display block/none wäre mir lieber- ich kriegs nicht hin...
Das ist eine Nav-Liste, da ist mir der Text wichtig, das Bildchen soll nur danebenstehen und zeigen, dass es noch etwas ein,- bzw. auszublenden gibt Ich habe versucht, das Beispiel mit dem hier zu verknüpfen... Aber JavaScript erschliesst sich mir nur sehr langsam... <html> <head> <script language="JavaScript" type="text/javascript"> function swapArrow(bild){ pfeilRechts = new Image(); pfeilRechts.src = "rechts.gif"; pfeilUnten = new Image(); pfeilUnten.src = "unten.gif"; if(bild.src.indexOf('rechts.gif') == -1){ bild.src = pfeilRechts.src; } else{ bild.src = pfeilUnten.src; } } </script> </head> <body> <img src="rechts.gif" width="15" height="15" onClick="swapArrow(this)"> </body> </html> Geändert von Saxxon (15.10.2018 um 13:28 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Parent DIV soll mit der Höhe seines Childs wachsen | Tekkla | CSS | 2 | 19.11.2009 19:27 |
DIV bis GANZ unten | burnZ | CSS | 5 | 27.07.2008 14:14 |
Falsche Darstellung beim Internet Explorer | LordAvalon | CSS | 4 | 09.04.2007 17:22 |
Webseite in IE/MAXTHON ok, in Firefox zerissen | Midnight | CSS | 50 | 21.02.2006 11:34 |
Probleme mit Abständen zwischen div´s.... | darvida | CSS | 4 | 09.07.2005 19:48 |