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
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é
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:
katy
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.
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é
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:
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
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é
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é,
den Code für das kleine Bild kannst du beliebig oft verwenden, du musst nur die Bilddateinamen ändern.
katy
<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:
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é
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
katy
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