Javascript Bildwechsel

[Absolute Anfängerin]

Ich bin dran an meiner Website, auf der es eine Bildergalerie gibt. Der Bilderwechsel funktioniert wunderbar. Allerdings happert es mit dem Untertitel-Wechsel, den ich analog wie der Bildwechsel machen wollte, aber nicht klappt. Vielleicht kann mir jemand den Fehler in meinem Code zeigen:

Dies ist der html Bereich mit dem Bild und der Unterschrift:

<img src="images/architecture/taegernstrasse_1.png" id="image_switch" width:"1000" height:"586" alt="Portfolio"><br>
<img src="images/pfeil_rechts.jpg" style="cursor: pointer; float:right;" onclick="switch_image(0)" onclick="switch_text(0)" alt="" height="30" width="30">
<img src="images/pfeil_links.jpg" style="cursor: pointer; float:right;" onclick="switch_image(1)" onclick="switch_text(1)" alt="" height="30" width="30">
<p1 id="text_switch">Unterschrift 1</p1>

Dazu gibt es die zwei Javascript Funktionen switch_image, welches super funktioniert und switch_text, welches ich irgendwie nicht zum funktionieren bringe. Hier das javascript:

	var images = new Array(
	'images/architecture/taegernstrasse_1.png',
	'images/architecture/olympiastadion_berlin.png',
	'images/architecture/schule_leutschenbach.png',
	'images/architecture/flat_iron_building.png',
	'images/architecture/leutschenbach_sued.png',
	'images/architecture/glattpark_1.png',
	'images/architecture/zoelly_hochhaus.png',
	'images/architecture/eth_lee.png',
	'images/architecture/glattpark_2.png',
	'images/architecture/buehlerwiese_innen.png'
	);

	var current_index_image = 0;

	function switch_image(direction) {
	var countimage = images.length;
	current_index_image += (direction ? 1 : -1);
	if (current_index_image == countimage) {
	current_index_image = 0;
	} else if (current_index_image < 0) {
	current_index_image = countimage - 1;
	}
	document.getElementById('image_switch').src = images[current_index_image];
	}

	var text = new Array(
	"Unterschrift 1",
	"Überschrift 2",
	"Überschrift 3",
	"Überschrift 4",
	"Überschrift 5",
	"Überschrift 6",
	"Überschrift 7",
	"Überschrift 8",
	"Überschrift 9",
	"Überschrift 10"
	);

	var current_index_text = 0;

	function switch_text(direction) {
	var counttext = text.length;
	current_index_text += (direction ? 1 : -1);
	if (current_index_text == counttext) {
	current_index_text = 0;
	} else if (current_index_text < 0) {
	current_index_text = counttext - 1;
	}
	document.getElementById('text_switch').src = text[current_index_text];
	}

[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 🖖

[Der Martin]

Hallo,

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

warum für Pfeile überhaupt Grafiken nehmen? Wenn sie nicht sehr speziell aussehen sollen, würde ich Text-Pfeile verwenden, etwa U+21D0/U+21D2 oder U+21E6/U+21E8. Dann lassen sie sich in Größe und Farbe auch leicht an wechselnde Designs anpassen.

Ciao,
 Martin

[Gunnar Bittersmann]

@@Der Martin

warum für Pfeile überhaupt Grafiken nehmen? Wenn sie nicht sehr speziell aussehen sollen, würde ich Text-Pfeile verwenden

Wenn man damit zufrieden ist, was die System-Schriftarten zu bieten haben, dann ja.

Wenn es etwas anderes sein soll, wäre das Laden einer Schriftart aus dem Web wegen zweier Pfeile keine gute Idee. Für Icons ist SVG das beste Mittel der Wahl.

Dann lassen sie sich in Größe und Farbe auch leicht an wechselnde Designs anpassen.

Bei SVG ebenfalls.

LLAP 🖖

[Absolute Anfängerin]

Vielen Dank euch schon mal für die Antworten!

Also die Pfeile sind jpgs, weil sie genau so aussehen sollen :-)

Da lässt sich im Code sicherlich noch einiges optimieren. Für mich wichtig wäre im Moment, dass ich die Unterschriften zum Laufen bringe. Figcaption hab ich auch schon angeschaut, aber es hilft mir nicht ganz weiter mit dem javascript zusammen. Ich müsste ja irgendwie jedes Bild mit der Unterschrift zu einem Figcaption gruppieren, und dann alle Bilder mit Unterschrift im Javascript array zusammenfassen?

[Gunnar Bittersmann]

@@Absolute Anfängerin

Also die Pfeile sind jpgs, weil sie genau so aussehen sollen :-)

Genauso verpixelt? (Oder hast du an hochauflösende Displays gedacht?)

Genauso verwaschen? (JPEG ist nicht für harte Kanten geeignet.)

Mit genau diesen Artefakten? (JPEG komprimiert nicht verlustfrei.)

Falsches Grafikformat

LLAP 🖖

[Absolute Anfängerin]

Du kannst mir glauben, mit Pixeln kenne ich mich aus.

Ich wäre also froh um Hilfe mit HTML...

[Gunnar Bittersmann]

@@Absolute Anfängerin

mit Pixeln kenne ich mich aus.

Ohne Pixel auch? Das ist hier der Punkt.

Und „kenne ich mich aus“ habe ich schon von einigen Pixelschubsern gehört, die sich mit dem Unterschied zwischen JPEG und PNG nicht auskannten.

LLAP 🖖

[Absolute Anfängerin]

Eher muss ich davon ausgehen, dass du keine Ahnung von html und Javascript hast, da du dich nur auf die Pfeile konzentrierst und nicht auf meine eigentlichen Fragen eingehst.

[JürgenB]

Hallo,

ich würde an deiner Stelle für den Wechsel von Bild und Text eine Funktion verwenden, die den Index ändert und dann Bild-SRC und Textbereich gemäß diesem Index ändert.

Gruß Jürgen

[Tabellenkalk]

Hallo,

ich würde an deiner Stelle für den Wechsel von Bild und Text eine Funktion verwenden, die den Index ändert und dann Bild-SRC und Textbereich gemäß diesem Index ändert.

In dem Zusammenhang könnte man dann auch darüber nachdenken, ob ein Textbereich eine src-Eigenschaft hat und was denn stattdessen zu nutzen wäre.

Gruß
Kalk

[JürgenB]

Hallo

ich würde an deiner Stelle für den Wechsel von Bild und Text eine Funktion verwenden, die den Index ändert und dann Bild-SRC und Textbereich gemäß diesem Index ändert.

In dem Zusammenhang könnte man dann auch darüber nachdenken, ob ein Textbereich eine src-Eigenschaft hat und was denn stattdessen zu nutzen wäre.

kannst das bitte mal etwas genauer erläutern?

Gruß Jürgen

[Tabellenkalk]

Hallo,

kannst das bitte mal etwas genauer erläutern?

Naja, unter den Element-Eigenschaften findet sich kein src-attribut wie es eine Absolute Anfängerin versucht hat zu verwenden:

document.getElementById('text_switch').src = text[current_index_text]; 

Gruß
Kalk

[JürgenB]

Hallo,

Naja, unter den Element-Eigenschaften findet sich kein src-attribut wie es eine Absolute Anfängerin versucht hat zu verwenden:

document.getElementById('text_switch').src = text[current_index_text]; 

ach so, ich dachte, das bezog sich auf meinen Vorschlag. Allerdings hättest du die Absolute Anfängerin auch darauf hinweisen müssen, das es nur ein onclick-Attribut geben darf:

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

Gruß Jürgen

[Tabellenkalk]

Hallo,

ach so, ich dachte, das bezog sich auf meinen Vorschlag.

ok, das hätte ich deutlicher machen können

Allerdings hättest du die Absolute Anfängerin auch darauf hinweisen müssen...

müssen? nö.

Bin froh, das mit dem src gesehen zu haben. Soll ich jedesmal dazuschreiben, dass ich eigentlich keine Ahnung von js habe?

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

Allerdings hättest du die Absolute Anfängerin auch darauf hinweisen müssen...

müssen? nö.

Natürlich hättest du das nicht müssen. Niemand hätte das. Da Absolute Anfängerin über so viel Durchblick verfügt, dass sie einschätzen kann, wieviel Ahnung andere von HTML haben, weiß sie das doch selbst!!1elf

Soll ich jedesmal dazuschreiben, dass ich eigentlich keine Ahnung von js habe?

Dass jedes Attribut in einem Tag nur einmal vorkommen darf, hat aber auch nicht wirklich was mit JavaScript zu tun.

LLAP 🖖

[Christian Kruse]

Hallo JürgenB,

ach so, ich dachte, das bezog sich auf meinen Vorschlag. Allerdings hättest du die Absolute Anfängerin auch darauf hinweisen müssen, das es nur ein onclick-Attribut geben darf:

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

Nein, er hätte den Hinweis auf addEventListener liefern müssen und darauf hinweisen sollen, dass die on*-Attribute deprecated sind ;-)

LG,
CK

[Tabellenkalk]

Hallo,

Nein, er hätte ... müssen

müssen? nö, ich poche auf mein Recht auf Unwissenheit!

Gruß
Kalk

[JürgenB]

Hallo Christian,

bei Anfängern hier im Forum stelle ich mir oft die Frage: Wollen die das WWW-Geschäft lernen, um das dann beruflich zu nutzen, oder geht es darum, nur die eigene Seite zu erstellen, also um eine einmalige Aktion.

Bei angehenden Profis hast du natürlich Recht, die müssen es von Anfang an richtig lernen. Bei Amateuren bin ich mir nicht sicher, ob dann die Einstiegshürde zu groß wird.

Gruß Jürgen

[Christian Kruse]

Hallo JürgenB,

Bei angehenden Profis hast du natürlich Recht, die müssen es von Anfang an richtig lernen. Bei Amateuren bin ich mir nicht sicher, ob dann die Einstiegshürde zu groß wird.

Die Grenze ist sicherlich schwer zu ziehen, ja. Oft schiesst man über das Ziel hinaus und überfordert Anfänger, da gebe ich dir recht.

Doch die Trennung JS/HTML/CSS ist IMHO etwas, das auch Anfänger und Amateure verinnerlichen sollten, denn das erspart einem auf lange Sicht viel Arbeit und Ärger.

LG,
CK

[Gunnar Bittersmann]

@@Christian Kruse

Nein, er hätte den Hinweis auf addEventListener liefern müssen und darauf hinweisen sollen, dass die on*-Attribute deprecated sind ;-)

Nein, hätte er nicht müssen, da ich das bereits tat.

LLAP 🖖

[Absolute Anfängerin]

Hallo Jürgen

Was heisst, es darf nur ein onclick-Attribut geben? Wie kann ich dann mit einem Click zwei Funktionen auslösen?

[MudGuard]

Hi,

Was heisst, es darf nur ein onclick-Attribut geben?

JEDES Attribut darf pro Element höchstens einmal vorkommen.

Wie kann ich dann mit einem Click zwei Funktionen auslösen?

Entweder, wie bereits erwähnt, die Funktionen nicht per onclick angeben, sondern mit addEventListener setzen, oder aber (nicht wirklich empfehlenswert), indem beide Funktionen nacheinander in dem einem onclick-Attribut aufgerufen werden.

cu,
Andreas a/k/a MudGuard

[Orlok]

Hallo

Was heisst, es darf nur ein onclick-Attribut geben?

Das heißt, es gibt nur ein Attribut mit dem Bezeichner onclick, dem man einen Wert zuweisen kann.

Wie kann ich dann mit einem Click zwei Funktionen auslösen?

Wie bereits erwähnt wurde, ist es schlechte Praxis, Event Handler über Attribute in HTML zu registrieren. Macht man es aber doch, ist zu berücksichtigen, dass der als String notierte Wert zum Funktionskörper einer anonymen Funktion geparst wird, das heißt, aus…

<element onclick="handler();"></element>

…wird:

element.onclick = function (event) {
  handler();
};

Wolltest du also (was du eigentlich nicht willst) zwei Handlerfunktionen auf diese Art registrieren, dann müsstest du schreiben:

<element onclick="handler1(); handler2();"></element>

Dann wären beide Funktionsaufrufe in der eigentlichen Handlerfunktion gekapselt.

Wie bereits gesagt ist dies aber schlechte Praxis, denn HTML und JavaScript sollten strikt voneinander getrennt werden!

Das bedeutet, Event Handler sollten grundsätzlich in JavaScript registriert werden, was entweder ebenfalls über Eigenschaftszuweisung möglich ist, oder aber – besser – unter Verwendung der Methode addEventListener, welche den großen Vorteil hat, dass mit ihr beliebig viele Handlerfunktionen für das selbe Element und den selben Eventtyp registriert werden können:

var element = document.getElementById('myElement');

element.addEventListener('click', handler1);
element.addEventListener('click', handler2);

Gruß,

Orlok

[Absolute Anfängerin]

Hallo Orlok

Ich hab glaub halbwegs verstanden, was du mir erklären willst. Ich hab jetzt die von dir beschriebene "unelegante" Variante probiert. Text wird aber immer noch nicht ersetzt.

<element onclick="handler1(); handler2();"></element>

Da ich nicht Javascript programmieren kann (verstehe gerade mal, was die Funktion image_switch macht), aber das irgendwie anders zu programmieren, ist für mich im Moment zu hoch. Im Moment sieht meine Website so aus, dass die Bildunterschrift im Bild, welches durch image_switch gesteuert wird, integriert ist. Daher meine Idee, dass image_switch doch zu einem text_switch umgeschrieben werden könnte. Aber wie gesagt, funktioniert nicht...

Trotzdem Danke für deine Ausführungen!