Seite 1 von 1

Onclick mit Javascript

Verfasst: Mi 30. Nov 2022, 10:00
von stobi_de
Hallo,
ich habe es schon gemacht aber ich finde es dummerweise nicht mehr.
In meinem "Luxusprojekt" https://afripix.de/pfrommer-bau habe ich dieses schwarze Bild mit der weißen Hauszeichnung (das kommt noch besser). Der Kunde hätte nun gerne, dass bei einem Click auf einen Button ein Hausbild erscheint, wo der entsprechende Teil farbig ist. Ja, gute Idee.
Ich muss halt für jeden Teil ein komplettes Haus machen mit einem bunten Teil, alle überanderlegen und entweder mit Display oder z-index umändern.

Aber ich finde nicht mehr, wie das ging.
Irgendwo hier gab es ein Beispiel dazu.
Die Schrift als Button machen, und mit OnClick und BildID als Übergabeparameter.... dummte Kiel...

Frank

Re: Onclick mit Javascript

Verfasst: Mi 30. Nov 2022, 10:06
von Tommy Herrmann
Moin,

ist das vielleicht eine Möglichkeit - wie bei dem Mädel (schwarz-weiß nach farbig) ganz unten auf der Seite:

https://www.mobirise-tutorials.com/Test ... l#info3-45

... da habe ich einfach zwei Blöcke fixiert, sodass diese Eindruck entsteht:

background-attachment: fixed;


Das "onclick" Event verwendet man so:

https://www.w3schools.com/jsref/event_onclick.asp

Re: Onclick mit Javascript

Verfasst: Mi 30. Nov 2022, 10:24
von stobi_de
Irgendwie fehlt mir gerade nur die Syntax, wie ich "Projektentwicklung" als Button definiere und dann mit OnClick = "Bildshow('IDProjektentwicklung')" mache.
Im Java gibt es dann einfach
document.getElementById(IDBild).style.display = 'block';

Besser wäre irgendwie ein fadeIn....hm...

Re: Onclick mit Javascript

Verfasst: Mi 30. Nov 2022, 10:35
von Tommy Herrmann
musst Du dann nicht nur diese ID an den Button (oder Link) dran schreiben?

Code: Alles auswählen

<button id="IDBild" onclick="myFunction()">Click me</button>

Re: Onclick mit Javascript

Verfasst: Mi 30. Nov 2022, 10:41
von Tommy Herrmann
Eigentlich brauchst Du doch da nur die ID, denn die wird doch im JavaScript angesprochen und ist ja immer einmalig.

Vielleicht hilft Dir das hier mit den Button "PLAY / PAUSE" weiter:

https://www.mobirise-tutorials.com/MP3-Music.html

Code: Alles auswählen

<script>
 function aud_play_pause() {
  var myAudio = document.getElementById("myAudio");
  if (myAudio.paused) {
   myAudio.play();
  } else {
   myAudio.pause();
  }
 }
</script>

Code: Alles auswählen

<audio id="myAudio" autoplay="" loop="">
 <source src="./music/Land-Of-Wizards.mp3" type="audio/mpeg">
 <source src="./music/Land-Of-Wizards.ogg" type="audio/ogg">
 Dieser HTML5 Player wird von Deinem Browser nicht unterstützt.
</audio>

Code: Alles auswählen

<!-- Button on / off -->
<div onclick="aud_play_pause()">
      <a class="btn btn-primary" href="javascript:void(0);">PLAY / PAUSE</a> 
</div>