HTML, CSS Bild anklicken und Text erscheint?

Hallo zusammen,

ich arbeite gerade an einer Webseite für die Schule. ( Anfänger )

Ich habe folgende Idee: ich habe ein Albumcover, auf dieses soll man draufdrücken können und es soll ein Text erscheinen ( die einzelnen Lieder vom Album ).

Weiß jemand wie ich das umsetzten kann?

Liebe Grüße

Answer 1

[Dory1]

css

.hidden { display: none; }

html

<img id="bild" src="//placehold.it/100x100">

<div id="text" class="hidden">
  Dein Text
</div>

<script>
  document.getElementById("bild").addEventListener("click", function() {
    document.getElementById("text").classList.toggle("hidden");
  });
</script>

Comments

[diealoex]

bei mir verschwindet das Bild :(

[Dory1]

@diealoex

Dann hast du vermutlich die IDs vertauscht.

Demo: https://jsfiddle.net/2fhjmrco/

Answer 2

[ChemMurdock]

Dupliziert aber Duplikate funktionieren nicht?

Hey ich hab das mal so ausprobiert und wollte es mehrfach untereinander einsetzen mit verschiedenen Bildern, das hat dazu geführt dass nur das erste Bild interaktiv ist. woran könnte das denn liegen, hab den block einfach kopiert und noch zwei mal eingefügt.

LG anon

Answer 3

[xXanne99Xx]

Ich würde da mit Pseudo-Klassen arbeiten. Das Element musst du mit display: none verstecken.

An deiner Stelle würde ich den Text anzeigen lassen, sobald man mit der Maus darüber fährt. Dafür kannst du die Pseudo-Klasse hover benutzen und änderst dann den display Wert.

Soll es beim klicken bleiben, kannst du active benutzen. Das wird eigentlich für Links verwendet. Alle mir bekannten Alternativen würden allerdings Javascript enthalten.

Woher ich das weiß: Hobby – Tenorhorn (10 Jahre), Klavier (7 Jahre), Gitarre (5 Jahre)