Supportnet Computer
Planet of Tech

Supportnet / Forum / Webseiten/HTML

Beim Klick auf kleine Bilder gehen sie an anderer Stelle groß auf





Frage

Hallo, ich versuche verzweifelt eine Art Diashow zu basteln. Ich habe verschiedene Bilder unter einem Großen Bild. Ich möchte gerne wenn ich auf eines der kleinen Bilder klicke, das es groß im großen Bild darüber aufgeht. Hier ist mein Code: <center> <a href="http://www.kneisel-hamburg.de;indexURL=0#photoshow" onclick="supersize(); return false;"><img src="http://www.kneisel-hamburg.de/eBay/bilder/dhl.gif" height="400px"></a><br><br> <a href="http://www.kneisel-hamburg.de;indexURL=0#photoshow" onclick="update('http://www.kneisel-hamburg.de/eBay/bilder/dhl.gif', 0, true); return false;"><img src="http://www.kneisel- hamburg.de/eBay/bilder/dhl.gif" height="65px"></a> <a href="http://www.kneisel-hamburg.de;indexURL=1#photoshow" onclick="update('http://www.kneisel-hamburg.de/eBay/bilder/dhl.gif', 1, true); return false;"><img src="http://www.kneisel- hamburg.de/eBay/bilder/dhl.gif" height="65px"></a> <a href="http://www.kneisel-hamburg.de;indexURL=2#photoshow" onclick="update('http://www.kneisel-hamburg.de/eBay/bilder/dhl.gif.jpg', 2, true); return false;"><img src="http://www.kneisel- hamburg.de/eBay/bilder/dhl.gif" height="65px"></a></center> -------------------------------------------------------------------------------------------- Was mache ich falsch?!? Bitte um hilfe... Gruß André

Antwort 1 von SnakeBite334

Hier nochmal der Code. Ging oben nicht richtig zu formatieren. Sorry

<center>
<a href="http://www.kneisel-hamburg.de;indexURL=0#photoshow" onclick="supersize(); return false;"><img src="http://www.kneisel-hamburg.de/eBay/bilder/dhl.gif" height="400px"></a><br><br>
<a href="http://www.kneisel-hamburg.de;indexURL=0#photoshow" onclick="update('http://www.kneisel-hamburg.de/eBay/bilder/dhl.gif', 0, true); return false;"><img src="http://www.kneisel-hamburg.de/eBay/bilder/dhl.gif" height="65px"></a>
<a href="http://www.kneisel-hamburg.de;indexURL=1#photoshow" onclick="update('http://www.kneisel-hamburg.de/eBay/bilder/dhl.gif', 1, true); return false;"><img src="http://www.kneisel-hamburg.de/eBay/bilder/dhl.gif" height="65px"></a>
<a href="http://www.kneisel-hamburg.de;indexURL=2#photoshow" onclick="update('http://www.kneisel-hamburg.de/eBay/bilder/dhl.gif.jpg', 2, true); return false;"><img src="http://www.kneisel-hamburg.de/eBay/bilder/dhl.gif" height="65px"></a></center>


Antwort 2 von katy

Hallo André,

deu verwendest 2 JavaScript-Funktion (supersize und update), die kein Bestandteil von JavaScript sind. Also musst du sie entweder selbst geschrieben oder irgendwoher kopiert haben. Ohne diese Funktionen zu kennen lässt sich zu deinem Code nichts sagen.

katy

Antwort 3 von SnakeBite334

Hallo Katy,
ja habe Ausschnitte kopiert und abgeändert. Gibt es keine einfache Lösung?! Habe solche Scripte schon öfters gesehen, leider kenne ich aber den genauen Namen des Scriptes nicht.
Dachte das geht einfach und ich bin nur zu doof.

Kann mir jemand helfen?!

Danke

André

Antwort 4 von katy

Hallo André,

also fehlen dir die beiden Funktionen? dann geht das so natürlich nicht.

Aber so vielleicht:

<img src="bild.gif" id="leinwand" alt="Bildershow">
<!--  dies ist das große Bild -->

<img src="kleinbild_1.gif" alt="kleines Bild" onclick="document.getElementById('leinwand').src='grossbild_1.gif'">
<!--  beim Click auf dies Bild wird grossbild_1.gif anstelle des großen Bildes oben geladen -->



katy

Antwort 5 von SnakeBite334

Vielen Dank genau das habe ich gesucht!!!
Supi.

Antwort 6 von SnakeBite334

Hi Katy oder andere Leute die helfen können, eine Frage hätte ich noch.

Ist es möglich das man ein Link unter dem Großen Bild hat. Es soll folgendes beim Klick auf dem Link passieren. Es soll das Bild was Groß zu sehen ist nochmal im Popup aufgehen. Aber dann noch größer. Also immer das Bild welches groß zu sehen ist.

Vielen Dank

André

Antwort 7 von katy

du kannst sowas ergänzen im onclickk-Attribut:

onclick="document.getElementById('leinwand').src = 'grossbild_1.gif'; window.open('grossbild.gif','popup')"

allerdings frage ich mich wirklcih wozu das gut sein soll? Was soll's - genaueres über die Parameter, die bei PopUps verwendet werden können findest du bei SelfHTML

katy

Antwort 8 von SnakeBite334

Hi Katy, so klappt es leider nur zusätzlich als popup. Sprich jetzt lädt das Bild im Popup und wird groß angezeigt. Ich hätte das Popup aber gerne nur wenn man auf das große bild "leinwand" klickt, nicht auf das kleine. Sprich wenn man ein kleines Bild angeklickt hat, dann wird es auf der "leinwand" angezeigt. Und wenn man das noch größer sehen will das wenn man dann auf die "Leinwand" klickt, das das Bild dann im Popup größer wird.
Kann man das irgendwie lösen?!

Gruß

André

Antwort 9 von SnakeBite334

Habe vergessen zu erwähnen das ich mind. 3 oder 4 kleine Ansichten habe die auf der "Leinwand" laden sollen.

Antwort 10 von katy

Hallo André,

<img src="bild.gif" id="leinwand" alt="Bildershow" onclick="window.open(this.src,'popup')">
<!--  dies ist das große Bild -->


den Code für das kleine Bild kannst du beliebig oft verwenden, du musst nur die Bilddateinamen ändern.

katy

Antwort 11 von SnakeBite334

Hi Katy,
habe jetzt folgendes:

<img src="bild.gif" id="leinwand" alt="Bildershow" onclick="window.open(this.src,'popup','toolbar=0,location=0,directories=0,status=0,resizable=1,menubar=0,scrollbars=1,width=800,height=800')">
<!--  dies ist das große Bild -->


Ist es dabei möglich das Popup so aufgehen zu lassen, das es immer angepasst an das Bild ist?! (Die Bilder sind leider alle unterschiedlich groß)

Ist es möglich das der übliche "Link Finger" angezeigt wird, wenn ich über die Bilder fahre?! Da es ja jetzt quasi kein Link ist, fehlt mir der.

Ist es außerdem möglich das das Popup gemessen von der Desktopauflösung in der Mitte des Monitors aufgeht?!

Geht es das wenn man im Popup aufs Bild klickt, das es dann wieder zugeht? Und das unter dem Bild im Popup steht, zum schließen einfach auf das Bild klicken.

Kann man im Popup einbauen das man zum nächsten und vorherigen Bild geht!?

Vielen vielen Dank für deine Hilfe!!!
Wünsche dir einen schönen angenehmen Tag

André

Antwort 12 von katy

Hallo André,

das geht alles. Dafür gibt es im Netz ganz gut ausgereifte Lösungen, die sogenannten Lightboxen.

Um übrigens einem img-Element einen Link-Cursor zu verpassen genügt folgendes

<img .... style="cursor:pointer">


katy