Grafik tauschen

phawi · 11. Dez. 2016

Hi zusammen,
ich bastel nun schon ne Weile an einem Problem rum, das eigentlich nicht so schwer sein kann

also wenn mir jemand hier einmal weiterhelfen könnte, wäre ich euch wirklich sehr dankbar.

Ich habe einen grafischen Button. Drücke ich darauf, soll der Status einer div box zwischen sichtbar und unsichtbar hin- und hergeschaltet werden.
Gleichzeitig soll der Grafische Button ebenfall zwischen zwei verschiedenen Bildern hin-und hergeschaltet werden.

Das ein- und ausblenden der div Box klappt, das mit der Grafik nur einmal. Danach ändert sie sich nichtmehr zurück:

Code:

<html>
<head>
    
    <script> 
    function change() { 
    var mydiv = document.getElementById("suchemobilversion"); 
    mydiv.style.display = (mydiv.style.display=='block'?'none':'block'); 

    var mylogo = document.getElementById("sucheschalter"); 
    mylogo.src = (mylogo.src=='logo.svg'?'mehr.svg':'logo.svg'); 
    }
        
    </script> 
    
    </head>
<body>
    
    
        
    <div >
        <a href="#" onclick="javascript:change()"><img id="sucheschalter" src="mehr.svg"></a>
    </div> 
        
        
        
    <div style="display:none;" id="suchemobilversion">(Suchleiste)</div>



    
    
</body>

</html>

Wäre über Hilfe wirklich verdammt froh!

Gruß
Phawi

kkapsner · 11. Dez. 2016

Lass dir einfach mal in der Console ausgeben, was du aus mylogo.src herausbekommst, dann wirst du sehen, warum das nicht funktioniert.

PS: href="#" ist sinnfrei und erzeugt gerne Probleme. Lass' das einfach weg und mach' die Formatierung mit CSS.
PPS: das "javascript:" im onclick ist unnötig... das komplette <a> ist einfach unnötig, da du den Handler ja direkt auf dem <img> platzieren kannst.

phawi · 11. Dez. 2016

Hi kkapsner,
vielen dank für deine Antwort =)

habs mit deinem Tipp tatsächlich geschafft. Funktioniert perfekt, dennoch frage ich mich, das muss doch einfacher gehen, oder? Bzw. Ist meine Lösung ok?

Ich prüfe nun nichtmehr, ob .src = der grafik entspricht, sondern prüfe ob .src den grafiknamen enthält.
Dann ersetze ich nichtmehr komplett .src, sondern nutze replace um nur den alten grafik namen aus .src zu ersetzen.

Code:

<html>
<head>
    
    <script> 
    function change() { 
    var mydiv = document.getElementById("suchemobilversion"); 
    mydiv.style.display = (mydiv.style.display=='block'?'none':'block'); 

    var mylogo = document.getElementById("sucheschalter"); 
    mylogo.src = (mylogo.src.indexOf("logo.svg") != -1?mylogo.src.replace("logo.svg", "mehr.svg"):mylogo.src.replace("mehr.svg", "logo.svg")); 
        
    }
    
        
    </script> 
    
    </head>
<body style="background-color:grey">
    
    
        
    <div >
<img onclick="change()" id="sucheschalter" src="mehr.svg">
    </div> 
        
        
        
    <div style="display:none;" id="suchemobilversion">(Suchleiste)</div>



    <input type="text" id="feld">
    
</body>

</html>

Gruß
Phawi

kkapsner · 13. Dez. 2016

Kann man schon so machen. Ich würde das etwas anders machen:

Code:

    function change() { 
		var mydiv = document.getElementById("suchemobilversion");
		var displayed = mydiv.style.display === 'block';
		mydiv.style.display = displayed? 'none': 'block'; 

		var mylogo = document.getElementById("sucheschalter"); 
		mylogo.src = displayed? "mehr.svg": "logo.svg"; 
    }

- bzw. ganz anders und einfach nur eine CSS-Klasse auf einem umfassenden Element wechseln:

Code:

<!DOCTYPE html>
<html>
<head>
	<title>Suche</title>
	<script> 
	function change() { 
		document.getElementById("suche").classList.toggle("mehr");
	}	 
	</script> 
	<style>
	body {
		background-color: grey
	}
	#suche #suchemobilversion, #suche .logo, #suche.mehr .mehr {
		display: none;
	}
	#suche.mehr #suchemobilversion, #suche.mehr .logo {
		display: initial;
	}
	</style>
	</head>
	<body style="background-color:grey">
		<div id="suche">
			<div>
				<span onclick="change()"><img class="mehr" src="mehr.svg"><img class="logo" src="logo.svg"></span>
			</div>
			<div id="suchemobilversion">(Suchleiste)</div>
		</div>
		<input type="text" id="feld">
	</body>
</html>

Grafik tauschen

phawi

New member

kkapsner

Super Moderator

phawi

New member

kkapsner

Super Moderator