Javascript Bildwechsel

[Gunnar Bittersmann]

@@Absolute Anfängerin

Vielleicht kann mir jemand den Fehler in meinem Code zeigen:

<img src="images/architecture/taegernstrasse_1.png" id="image_switch" width:"1000" height:"586" alt="Portfolio"><br>

Du musst Code hier im Forum als solchen markieren (</> über dem Eingabefeld), sonst wird das Posting verstümmelt. Hatte ich schon erwähnt … – oops, ich hatte ja versprochen, nicht mehr zu meckern. ;-)

Dann ist auch Syntax-Highlighting am Werk, was einen Fehler unschwer erkennen lässt: Zwischen Attributbezeichner und Wert muss ein = stehen, kein :.

<img src="images/pfeil_rechts.jpg" style="cursor: pointer; float:right;" onclick="switch_image(0)" onclick="switch_text(0)" alt="" height="30" width="30">

Stilangaben sollten nicht im HTML-Code stehen (also nicht style=…), sondern im Stylesheet.

Eventverarbeitung sollte nicht im HTML-Code stehen (also nicht onclick=…), sondern im JavaScript.

Damit die Pfeile bedienbar sind (auch per Tastatur, nicht nur per Maus), sollten es Buttons sein: z.B. <button><img …></button>.

Außerdem ist JPEG wohl ein ungeeignetes Format für Pfeile, für Pixelgrfixen wäre PNG angebracht; noch besser aber Vektorgrafiken: SVG.

<p1 id="text_switch">Unterschrift 1</p1>

Es gibt in HTML keinen Elementtypen p1.

Richtige wäre, die Bilder und ihre jeweiligen Unterschriften zu gruppieren:

<figure>
  <img …>
  <figcaption>…</figcaption>
</figure>

Die Pfeil-Buttons stehen außerhalb von figure.

Dein (oder das von anderen) JavaScript müsste nun Bilder und Unterschriften tauschen und ggfs. die Animation der figure-Elemente anstoßen (die dann selbst mit CSS läuft).

LLAP 🖖