Kleine Frage bezüglich Javascript

smaxxx · 22. April 2017

Hallo,

Ich habe eine kleine Frage über Javascript.
Ist es möglich, das man nur auf verschiedene Teile eines Bildes klicken kann?
z.B ein Bild eines Wohnzimmers mit nen Schrank.
Der User klickt auf den Schrank, ein Video spielt ab wie der Schrank geöffnet wird (muss ja natürlich aufgenommen werden mit Stativ und co.) und eine Audiodatei spielt ab.

Ist dies möglich? Wenn ja, was muss ich googlen um das zu "erlernen"? Habe jetzt spontan keinen Begriff dazu gefunden.
Ich bedanke mich über jegliche Hilfe.

CanColeman · 22. April 2017

Es gibt verschiedene Möglichkeiten, wie man das umsetzen könnte.

Was mir spontan einfällt wäre, das Bild in Einzelteile zu schneiden und über das Bild zu platzieren.
Mit einem Klick-Event hättest du dann die Möglichkeit eine Audio abzuspielen.

Edit:
Mit Canvas: http://www.williammalone.com/a…ascript-sprite-animation/

maddin · 22. April 2017

Dafür kannst du <map> und <area> nutzen, und dann via JS die Video/Audio Datei abspielen. Hier gibts ein Beispiel wie man <map> und <area> nutzt.

smaxxx · 22. April 2017

Zitat von maddin

Dafür kannst du <map> und <area> nutzen, und dann via JS die Video/Audio Datei abspielen. Hier gibts ein Beispiel wie man <map> und <area> nutzt.

Danke!
Gibts irgendwo ein Developer Tool oder sowas, wo man in ein Bild die Koordinaten rausfinden kann?

IPrototypeI · 22. April 2017

Kannst du mit der entwicklerkonsole oder firebug machen. jedoch gibt es noch genug weitere extensions oder entwicklerkonsolen als browser-plugin

smaxxx · 22. April 2017

Habs einfach mit Photoshop gemacht, da ich mich nicht so wirklich mit der Entwicklerkonsole auskenne.
Danke euch allen!
jedoch hab ich noch eine Frage dazu bekommen:
Wie schaffe ich es, sobald der User auf die <area> klickt, das eine GIF sich in der Mitte des Bildes für ca 3 Sek eine GIF abspielt, danach wieder verschwindet?
href öffnet ja einen Link..

IPrototypeI · 22. April 2017

wie maddin bereits geschrieben hat , musst du in diesem Fall eine javascript-funktion ausführen.

Bsp:

Code

<a href="javascript:exampleMethod("String-Parameter", 1, 1.0);">

alternativ kannst du auch der map eine id geben und ein onClick listener anhängen müsste auch gehen, was du präferierst

smaxxx · 22. April 2017

Okay, ich habs jetzt zwar geschafft das wenn man drauf klickt, sich die GIF öffnet, jedoch in einen neuen Fenster. Es sollte in der mitte des Bildes erscheinen, wie gesagt.
Wie kriege ich das hin?

IPrototypeI · 22. April 2017

Du musst schon das bild einfügen und mit css zentrieren

Hier ein beispiel mit einem text
<a href = "javascript:start();">Click</a>

HTML

<html>
	<a href = "javascript:start();">Click</a>

	<div id = "gif" style="display:none;">Text</div>
<script>
	function start() {
		document.getElementById("gif").style.display = "block";
		setTimeout(function(){ 
			document.getElementById("gif").style.display = "none";
		}, 3000);
	}
</script>
</html>

Alles anzeigen

breadfish.de 12. März 2022