zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Text ein- und ausblenden + Bild wechseln

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.10.2018, 11:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2013
Beiträge: 15
Saxxon befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.10.2018, 12:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.979
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

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)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.10.2018, 12:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2013
Beiträge: 15
Saxxon befindet sich auf einem aufstrebenden Ast
Standard 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 12:28 Uhr)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Parent DIV soll mit der Höhe seines Childs wachsen Tekkla CSS 2 19.11.2009 18:27
DIV bis GANZ unten burnZ CSS 5 27.07.2008 13:14
Falsche Darstellung beim Internet Explorer LordAvalon CSS 4 09.04.2007 16:22
Webseite in IE/MAXTHON ok, in Firefox zerissen Midnight CSS 50 21.02.2006 10:34
Probleme mit Abständen zwischen div´s.... darvida CSS 4 09.07.2005 18:48


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:07 Uhr.