HTML/JS Dateipfad ändern

  • Antworten:5
Marius 36
Marius
  • Forum-Beiträge: 424

06.07.2014, 15:30:55 via Website

Hallo :)
Ich suche eine Möglichkeit um den Dateipfad von einem Bild bei einem Klick auf einen Text zu ändern.

<img id="image_head" class="image" src="../images/avatar/fm/h/1.png" />

Wenn ich jetzt auf:

<p id="text_head" class="text">Kopf</p>

klicke, soll die src von image_head zu "../images/avatar/fm/h/2.png" geändert werden.

Wäre sehr nett, wenn mir jemand eine Lösung geben könnt. Danke :)

edit: Gut wäre es noch, wenn man erneut drauf klickt, dass dann das nächste Bild kommen würde mit /3.png usw. Sodass ein Kreislauf entsteht.

— geändert am 06.07.2014, 15:33:30

Antworten
Andy N. 78
Andy N.
  • Forum-Beiträge: 22.375

06.07.2014, 15:32:18 via App

Hallo Marius,

Ich habe deinen Thread mal rüber in unseren Entwickler-Bereich verschoben, da passt er etwas besser ;)

Viele Grüße,
Andy

OnePlus 3 (Resurrection Remix 5.8.2)
LG G Watch

Regeln | unsere Mods & Admins

Antworten
Marius 36
Marius
  • Forum-Beiträge: 424

06.07.2014, 15:34:52 via Website

Danke, warum muss der eigentlich immer nachträglich verschoben werden? Ich wähle immer am Anfang schon eine passende Kategorie aus.

Antworten
Pascal P. 64
Pascal P.
  • Admin
  • Forum-Beiträge: 11.286

06.07.2014, 16:49:48 via Website

3 Minuten suchen ist für dich schon zu viel?
Hier die Lösung pe JavaScript:

 <script type="text/javascript"> function changeImage(a) {
     document.getElementById("img").src=a; } </script>

Change your onclick attributes to include a string of the new image
source instead of a literal: 

onclick='changeImage( "1772031_29_b.jpg"   );

Dann musst du nur noch der Funktion changeImage deinen Pfad mitgeben.

LG Pascal //It's not a bug, it's a feature. :) ;)

Antworten
Marius 36
Marius
  • Forum-Beiträge: 424

08.07.2014, 15:21:51 via App

Das klappt ja dann nur bei zwei Bildern.

Antworten
Pascal P. 64
Pascal P.
  • Admin
  • Forum-Beiträge: 11.286

08.07.2014, 15:32:52 via Website

Warum du kannst doch der Funktion als 2. Parameter noch den id String übergeven, dann klappt das immer.
Mein Post sollte eigenlich nur ein Denkanstoss sein.

LG Pascal //It's not a bug, it's a feature. :) ;)

Antworten