JavaScript Bild und Button bei Klick gleichzeitig ändern und wieder zurück

noobsonly · 14. Juni 2014

Hi, ich brauche eure Hilfe. Und zwar habe ich folgende Scripte gefunden.

Erstellung eines Buttons mit Swap-Funktion:

Code:

<a id="element1" onClick="javascript:changeText(1)">Öffnen</a>

function changeText(idElement) {
 var element = document.getElementById('element' + idElement);
  if (idElement === 1 || idElement === 2) {
     if (element.innerHTML === 'Öffnen') element.innerHTML = 'Schließen';
        else {
            element.innerHTML = 'Öffnen';
    }
  }
}

Erstellung eines Bildes mit Swap-Funktion:

Code:

<img src="bild1.jpg" class="img-swap">


$(function(){
  $(".img-swap").live('click', function() {
    if ($(this).attr("class") == "img-swap"){
      this.src = this.src.replace("bild1.jpg","bild2.jpg");
    } else {
      this.src = this.src.replace("bild2.jpg","bild1.jpg");
    }
    $(this).toggleClass("bild1.jpg");
  });
});

Wenn ich damit einen Button und ein Bild erstelle, funzt es super. Jetzt möchte ich, dass bei einem Klick auf den Button nicht nur der Text verändert wird, sondern gleichzeitig noch ein Bild. Habe schon stundenlang gegoogelt und rumgebastelt, schaffe es aber einfach nicht, beides zu kombinieren. Hier nochmal die Übersicht, wie ich das meine

Situation 1. "Öffnen" und Bild 1 sichtbar -> Klick auf "Öffnen"
Situation 2: "Schließen" und Bild 2 sichtbar -> Klick auf "Schließen"
Situation 3: "Öffnen" und Bild 1 sichtbar

sianon · 14. Juni 2014

Hi,

falls ich dich richtig verstanden habe, würde es so funktionieren:

HTML:

<!DOCTYPE html>
<html>
	<head></head>
	<body>
		<button id="toggleState">&Ouml;ffnen</button>
		<img src="bild1.jpg" class="img-swap" width="200" />


		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		<script type="text/javascript">

			$('#toggleState').click(function(){
				var $elem = $(this),
					$img = $('.img-swap'),
					audio = $('#audiofile')[0];

				$elem.toggleClass('open');

				if($elem.hasClass('open')){
					$elem.html('Schlie&szlig;en');
					$img.attr('src', 'bild2.jpg');
					audio.play();
				}
				else{
					audio.pause();
					audio.currentTime = 0;
					$elem.html('&Ouml;ffnen');
					$img.attr('src', 'bild1.jpg');
				}
			});
 		</script>

 		<audio id="audiofile" preload="auto">
			<source src="audiofile.mp3" />			
		</audio>
	</body>
</html>

Edit: Oder sollte bei dem Klick auf das Bild der gleiche Vorgang angestoßen werden?
Edit2: Soundfile abspielen, während Bild2 angezeigt wird

noobsonly · 14. Juni 2014

Wahnsinn!!! Genau so habe ich mir das vorgestellt. Tausend Dank!

Wäre es da noch möglich eine Funktion einzubauen, dass immer wenn Bild 2 sichtbar ist noch ein kurzes Soundfile abgespielt wird? Das wäre dann der Oberhammer

sianon · 14. Juni 2014

Ich habe meine vorherige Antwort um den Teil mit der Audiodatei ergänzt

Edit: Browser mit HTML5 Support vorausgesetzt, in Chrome getestet.

noobsonly · 16. Juni 2014

Sehr cool, vielen Dank!!! Funktioniert einwandfrei.

Habe mir nun noch einen kleinen Klickcounter gebaut. Kann der so in das Script integriert werden, dass nur bei Betätigung des Buttons "Öffnen" ein Klick hochgezählt wird? Nach dem Motto: Du hast den Inhalt X Mal geöffnet.

Code:

<script type="text/javascript">
    var clicks = 0;
    function onClick() {
        clicks += 1;
        document.getElementById("clicks").innerHTML = clicks;
    };
    </script>

Habe schon versucht, es in die if/else Bedingung einzubauen, allerdings schaffe ich es nicht, dass wirklich nur jeder zweite Klick gezählt wird.

[ChAoZ] · 16. Juni 2014

noobsonly schrieb:
Habe schon versucht, es in die if/else Bedingung einzubauen, allerdings schaffe ich es nicht, dass wirklich nur jeder zweite Klick gezählt wird.

Warum nicht?
Einfach den Counter dann erhöhen wenn Button "Öffnen" geklickt wurde (IF Statement).
Und warum jeden zweiten Klick?

Daaron · 16. Juni 2014

Warum überhaupt so ein Klickzähler. Welchen Mehrwert hat so etwas für deine Besucher? Welchen Mehrwert hat es für dich? Unter welcher obskuren Situation könnte so ein Zähler nützlich sein?

noobsonly · 17. Juni 2014

Naja wenn ich in der if-Bedingung den Counter um 1 erhöhe, geht der Zähler beim Klick auf "Öffnen" auch um 1 nach oben. Wenn man auf "Schließen" drückt, setzt er den Zähler allerdings wieder auf 0 zurück. Wenn man dann wieder auf "Öffnen" klickt, gehts wieder von vorne los. Mit jedem zweiten Klick meinte ich, dass immer nur der Klick auf "Öffnen" gezählt wird.

Daaron · 17. Juni 2014

Die Frage bleibt: Welchen Mehrwert hat deine Funktion? Wenn du diese Frage nicht ehrlich und direkt beantworten kannst, dann lass sie weg.

noobsonly · 17. Juni 2014

Der Counter soll einfach nur als Gag im Zusammenhang mit dem Rest der Seite entstehen. Möchte an dieser Stelle nicht mein ganzes Webseiten-Konzept preisgeben.

Daaron · 17. Juni 2014

Prüf doch in deinem Clickhandler auf Vorhandensein der Klasse "open" beim Knopf...

Suche

JavaScript Bild und Button bei Klick gleichzeitig ändern und wieder zurück

noobsonly

Newbie

sianon

Lt. Junior Grade

noobsonly

Newbie

sianon

Lt. Junior Grade

noobsonly

Newbie

[ChAoZ]

Rear Admiral

Daaron

Fleet Admiral

noobsonly

Newbie

Daaron

Fleet Admiral

noobsonly

Newbie

Daaron

Fleet Admiral

Ähnliche Themen