Per JS einem Bild einen Link zuweisen

[andre97]

Moin liebes Forum,

folgendes kleines Problem habe ich zur Zeit:
ich will unter einer bestimmten Bedingung (in dem Fall eine bestimmte Anzahl an Bildern) ein kleines Bild anzeigen lassen und das entsprechend verlinken.

Ein Bild anzeigen lassen, bekomme ich hin - nur weiß ich mir gerade nicht mit der Verlinkung zu helfen. Schließlich soll dort nicht immer ein Link sein, sondern nur, wenn es wirklich benötigt wird.

Ich bin auch gerne für andere Lösungen zu haben ...

Danke.

[Felix Riesterer]

Lieber andre97,

Ein Bild anzeigen lassen, bekomme ich hin -

so? Dann lass doch mal sehen! Dann kann man Dir auch weiterhelfen.

Liebe Grüße,

Felix Riesterer.

[andre97]

Lieber andre97,

Ein Bild anzeigen lassen, bekomme ich hin -

so? Dann lass doch mal sehen! Dann kann man Dir auch weiterhelfen.

Code ist nicht geschrieben, würde es aber so machen:

  
altes_bild = new Image();  
altes_bild.src = "bild1.gif";  
neues_bild = new Image();  
neues_bild.src = "bild2.gif";  
  
<a onMouseOver="self.document.testbild.src=neues_bild.src"  
   onMouseOut="self.document.testbild.src=altes_bild.src"  
   href="#">  
<img border="0" src="bild1.gif" name="testbild"></a>

der Code stammt jetzt von hier, enstpricht aber meiner Vorgehensweise.

So und dort soll nun noch ein neuer Link gesetzt werden ...

[Felix Riesterer]

Lieber andre97,

altes_bild = new Image();
altes_bild.src = "bild1.gif";
neues_bild = new Image();
neues_bild.src = "bild2.gif";

soweit sehe ich da kein wirkliches Problem... bis auf die Frage, warum Du zwei neue Bildobjekte erstellst, wenn Du sie im Dokumentenbaum nicht auch einfügst. Nur um die Bild-Datei(en) "vorzuladen"? Das muss nicht sein - zumindest nicht bei Deinem im Ausgangsposting beschriebenen Vorhaben.

<a onMouseOver="self.document.testbild.src=neues_bild.src"
   onMouseOut="self.document.testbild.src=altes_bild.src"
   href="#">
<img border="0" src="bild1.gif" name="testbild"></a>[/code]

Hier sehe ich eher ein Problem. Erstens hätte es gereicht, hier direkt die URL einzutragen (anstatt extra zwei ansonsten ungenutzte Bildobjekte zu erstellen), und zweitens ist es aus meiner Sicht nicht unproblematisch, Elemente über ihr name-Attribut anzusprechen, da nicht verboten ist, Elemente mit identischen Namen auszustatten. Bei IDs ist das anders. Der Wert eines id-Attributes muss dokumentenweit einmalig sein, der Wert eines name-Attributes dagegen nicht!

Damit ist das, was Du im Ausgangsposting angeblich erreichen wolltest, _nicht_ erreicht. Wolltest Du nicht ein _zusätzliches_ Bild im Dokument anzeigen, wenn eine bestimmte Anzahl an anderen Bildern gegeben ist? Und wie prüfst Du da genau auf die Erfüllung dieser von Dir genannten Bedingung?

der Code stammt jetzt von hier, enstpricht aber meiner Vorgehensweise.

Hast Du einmal in Erfahrung gebracht, wie alt dieser Code ist, und ob er heutigen Gegebenheiten überhaupt noch gerecht wird?? Dort spricht man allen Ernstes noch von Netscape 4.x und Netscape 3.0!!

Tut mir leid, das so schreiben zu müssen, aber ich habe den Eindruck, dass Du Dich SELF noch nicht genügend mit einer Lösungsstrategie befasst hast, und sattdessen hier im Forum Deine Arbeit durch einen genügend Dummen erledigen lassen willst. Das ist nicht SELF, und wird hier auch nicht so gerne gesehen!

Liebe Grüße,

Felix Riesterer.

[suit]

Das ist nicht SELF, und wird hier auch nicht so gerne gesehen!

schlechten tag erwischt?

[Felix Riesterer]

Lieber suit,

Das ist nicht SELF, und wird hier auch nicht so gerne gesehen!
schlechten tag erwischt?

ja. Ist mein Posting wirklich so hart?

Liebe Grüße,

Felix Riesterer.

[andre97]

Hallo Felix,

also zunächst nochmal das Problem bzw. die Frage und anschließend, wie ich es lösen würde.

Ich möchte eine Galerie erstellen, bei der es ein Hauptbild gibt und die anderen Bilder aus dem entsprechenden Ordner als Thumbnails unterhalb angezeigt werden. Sollten es mehr als 20 Thumbsnails sein, so soll an der rechten Seite ein weiter-Button erscheinen, der zur nächsten Bilder-Matrix führt und so weiter. Gibt es auch noch Thumbnails rückwärts, so soll natürlich auch auf der linken Seite ein zurück-Button erscheinen.

Folgendes habe ich bereits (z.T. im Ansatz) gelöst:
Die Slideshow selber habe ich zu einem großen Teil von hier und (nach dem Verstehen) auch soweit abgeändert, dass ich sie für meine Zwecke nutzen kann. Anschließend habe ich mich mit der dynamischen Erstellung der Thumbnails beschäftigt und kann nun entsprechend der Anzahl der Bilder im Ordner über eine Schleife diese auch laden und als neue div-Elemente einfügen.

Jetzt kommt mein eigentliches Problem:
Wie oben bereits beschrieben, sollen nicht mehr als diese 20 Thumbnails angezeigt werden, die Anderen erreicht man dann über den weiter-Button. Nun dachte ich mir, dass ich das über ein Array lösen kann, bei dem je nachdem, um welche Bilder-Matrix es sich handelt, die entsprechenden Thumbnails angezeigt werden.
Alternativ dazu kann man vielleicht auch alle Thumbnails vorladen und diese dann nur noch in den entsprechenden divs austauschen.

So - mein eigentliches Problem ist jetzt, dass dieser weiter- und zurück-Button ja jedesmal quasi eine neuen Link bekommen muss, um zur nächsten Bilder-Matrix zu gelangen. Vielleicht kann man das über eine Zählvariable oder Ähnliches lösen, das habe ich aber noch nicht ausprobiert.

Was ich mir hier erhofft habe, war keine Komplettlösung mit dem Quelltext und ich kann mich dann entspannt zurücklehnen - das sicherlich nicht. Ich wollte vielleicht eine Idee oder einen Ansatz, wie ich den oben beschriebenen Vorgang vielleicht lösen kann. Den Eindruck, der bei dir aufkam wollte ich sicherlich nicht erzeugen!

[Felix Riesterer]

Lieber andre97,

Was ich mir hier erhofft habe, war keine Komplettlösung mit dem Quelltext und ich kann mich dann entspannt zurücklehnen - das sicherlich nicht. Ich wollte vielleicht eine Idee oder einen Ansatz, wie ich den oben beschriebenen Vorgang vielleicht lösen kann. Den Eindruck, der bei dir aufkam wollte ich sicherlich nicht erzeugen!

ich habe Dich ganz offensichtlich unterschätzt. Das tut mir leid. Deine Problembeschreibung war aber dergestalt, dass ich Dir mangelnde Kenntnis, bzw. mangelnden Einsatz unterstellen musste...

Nun zu "eine Idee oder einen Ansatz". Meine Meinung: Nimm kein JavaScript zum Navigieren durch die Galerie. Nimm entweder statische HTML-Dateien, oder generiere Deine Galerie serverseitig. Das Betrachten der Vollansichten mag dann über ein JavaScript bequemer gemacht werden, jedoch sollte die Seite auch ohne JavaScript benutzbar bleiben.

Kannst Du Dir eine rein serverseitige Lösung vorstellen?

Liebe Grüße,

Felix Riesterer.

[andre97]

Zunächst mal danke für die Antwort und ich muss wohl zugeben, dass hier wirklich ein Eindruck entstehen kann, der nicht so geplant war - tut mir leid, ich werde in Zukunft wohl etwas genauer sein müssen.

Ich wollte JavaScript benutzen, um "nette" Effekte, wie z.B. das sichtbare Sliden zwischen den Bildern zu erreichen. Nach meiner Kenntnis ist dies nicht durch statische HTML-Seiten zu erreichen - richtig?

Meinst du mit serverseitig, dass die Bilder in einer Datenbank abgelegt werden und entsprechend und nach Bedarf geladen werden?

Ich weiß um die Nachteile von JavaScript und bin mir auch dessen bewusst, dass es z.T. zu Problemen kommen kann, wenn sich Leute die Galerie anschauen wollen, aber ich möchte wirklich nur ungern auf die oben genannten Effekte verzichten - wenn es dafür aber andere Lösungen gibt, bin ich gerne bereit diese zu nutzen.
Mir geht es vor allem um diesen Slideeffekt. Überblendungen kann man soweit ich weiß auch mittels CSS lösen, aber nach wirklich vielen Galerien, die ich mir angeschaut habe, konnte ich noch keine Lösung finden, die das Sliden anders als mit JS löst.

Schöne Grüße,
André

[Felix Riesterer]

Lieber andre97,

und ich muss wohl zugeben, dass hier wirklich ein Eindruck entstehen kann, der nicht so geplant war - tut mir leid, ich werde in Zukunft wohl etwas genauer sein müssen.

tut mir auch leid, dass es zu Missverständnissen kam. Schwamm drüber.

Ich wollte JavaScript benutzen, um "nette" Effekte, wie z.B. das sichtbare Sliden zwischen den Bildern zu erreichen. Nach meiner Kenntnis ist dies nicht durch statische HTML-Seiten zu erreichen - richtig?

Dann möchte ich Dir diesen Artikel empfehlen, in dem ich das Erweitern einer statischen HTML-Datei mittels JavaScript vorführe. Du kannst sehr wohl eine Seite erstellen, deren Inhalte ohne JavaScript problemlos erreichbar sind, um sie dann mittels JavaScript mit Effekten "aufzuhübschen". Dazu ist mein Artikel eine etwas lang geratene Anleitung. Vielleicht findest Du den ein oder anderen Denkanstoß? Übrigens geht das noch viel krasser!

Meinst du mit serverseitig, dass die Bilder in einer Datenbank abgelegt werden und entsprechend und nach Bedarf geladen werden?

Nicht notwendigerweise. Ich könnte mir sehr gut auch eine statische HTML-Datei vorstellen, die ersatzweise Links zu den Bildern enthält, um sie dann mittels so Dingen wie die diversen Light-/Grey-/Shadow- oder sonstigen Boxen - oder eben mit Deinem Umblätterer zu animieren. Die Galerie darf aber auch gerne mittels einer serverseitigen Scriptsprache anhand der vorhandenen Bilddateien in einem Verzeichnis erstellt werden. Das macht vielleicht das Hinzufügen und Löschen der Bilder einfacher...

Ich weiß um die Nachteile von JavaScript und bin mir auch dessen bewusst, dass es z.T. zu Problemen kommen kann

Das ist doch schon eine gute Voraussetzung, um eine gut erreichbare Seite zu erstellen!

aber ich möchte wirklich nur ungern auf die oben genannten Effekte verzichten

Das muss auch nicht unbedingt sein. Nur müsstest Du vielleicht das Initialisieren mit einer anderen Herangehensweise lösen.

aber nach wirklich vielen Galerien, die ich mir angeschaut habe, konnte ich noch keine Lösung finden, die das Sliden anders als mit JS löst.

Wenn es browserübergreifend funktionieren soll, dann ist das tatsächlich wohl nur mit JavaScript zu machen - diese besonderen Überblendmöglichkeiten im IE einmal ausgenommen, und mögliche neue CSS-Features in einem zukünftigen CSS3 mangels browserseitiger Unterstützung ebenfalls beiseite gelassen.

Liebe Grüße,

Felix Riesterer.