nicht angemeldet
grosse Foto beim Anklicken einer kleinen Foto
0 0 
Matthias Apsel
0 0
0 0 
Der Martin
grosse Foto beim Anklicken einer kleinen Foto
Guten Tag,
ich würde gerne wissen, wie zu codieren ist, dass mit dem Anklicken einer kleinen Foto danach in einer neuen Seite die entsprechende grosse Foto angezeigt wird.
Kann das mit html gemacht werden oder muss ich dazu eine andere Sprache verwenden und unter welchem Stichwort finde ich das?
Vielen Dank.
-
Hallo,
ich würde gerne wissen, wie zu codieren ist, dass mit dem Anklicken einer kleinen Foto danach in einer neuen Seite die entsprechende grosse Foto angezeigt wird.
Dazu brauchts ganz einfach ein img-Element in einem a-Element.
Gruß
Kalk-
ich würde gerne wissen, wie zu codieren ist, dass mit dem Anklicken einer kleinen Foto danach in einer neuen Seite die entsprechende grosse Foto angezeigt wird.
Dazu brauchts ganz einfach ein img-Element in einem a-Element.
Besten Dank (an alle). Diese Variante ist mir eben bei einem Waldlauf auch eingefallen - und ich dachte mir, warum ich nicht vorher darauf gekommen bin. Manchmal sitzt man wohl zu lange vor dem Bildschirm und sieht die einfachen Dinge nicht mehr.
Im Prinzip möchte ich schon auch mal etwas anderes als html in meinen Code einbauen. Meine Frage geht in Richtung, wie kann ich z.b. eine Bildergalerie hinter einem Bild "verstecken", d.h. beim Anklicken eines Eingangsbildes kommt dann eine Serie weiterer Bilder zum diesem Thema/Ort etc., das Ganze um eine Site nicht mir Bildern zu überladen. Aber vorerst schaue ich das mit _einem Bild an, step by step bei mir, ich bin nur ein Amateur, nur ein halber.
bari.
-
Nachtrag, vergass noch zu sagen, beim element aside, en, ru, am besten zu sehen.
-
-
-
Om nah hoo pez nyeetz, bari!
ich würde gerne wissen, wie zu codieren ist, dass mit dem Anklicken einer kleinen Foto danach in einer neuen Seite die entsprechende grosse Foto angezeigt wird.
Kann das mit html gemacht werden oder muss ich dazu eine andere Sprache verwenden und unter welchem Stichwort finde ich das?
Wenn du ein neues Fenster öffnen möchtest:
<a href="Pfad_zum_großen_Bild" target="_blank"> <img src="Pfad_zum_kleinen_Bild" alt="Beschreibung, was zu sehen ist"> </a>Diese Variante hat zwei Nachteile: Es wird wirklich nur das Bild angezeigt (also das, was jeder Nutzer auch mit der rechten Maustaste könnte) und damit fehlt der alt-Text. Zudem lässt du dem Nutzer nicht die Wahl, ob er das Bild vielleicht nicht doch im Originalfenster öffnen möchte.
Ich empfehle deshalb ein HTML-Dokument zu erstellen, welches nur das Bild enthält oder besser das Bild, umgeben von einem zurück-führenden a-Element.
<a href="Pfad_zum_Dokument_mit_großen_Bild"> <img src="Pfad_zum_kleinen_Bild" alt="Beschreibung, was zu sehen ist"> </a>Außerdem gibt es noch schicke JavaScript-Lösungen, etwa lightbox.
Matthias
--
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Frau und fraunhofersche Linien.
-
Deinen Beitrag unterschreibe ich mit. Ich würde sogar weiter gehen:
Ich würde also das große Bild in einer eigenen Seite anzeigen:
<html> <head> <title>Tolles Bild</title> <script type="text/javascript">function jslink() { document.getElementById('backlink').href="javascript:history.back()" }</script> </head> <body onload="jslink()"> <a id="backlink" href="Pfad_zurück.html"> <img src="grosses_Bild.png" alt="Beschreibung, was zu sehen ist" /> <br />Zurück zum Artikel </a> </body> </html>"Aufhübschen" mit CSS.
Logisch wäre es, diese Ressource mit PHP oder Perl (oder was auch immer!) automatisch zu erzeugen. Ersetzt werden müsste nur: die Adresse "Pfad_zurück.html", der Titel, die "Beschreibung, was zu sehen ist" und natürlich die Adresse des Bildes...
-
Hallo Jörg,
ich hätte noch ein paar Fragen zu diesem Posting. Ich habe versucht, das nachzumachen aber es passiert nichts.Ich würde also das große Bild in einer eigenen Seite anzeigen:
du meinst deinen code in eine neue html-Seite schreiben? Müsste ich dann für jedes grosse (=originale) Bild eine eigene html-Seite machen? (wenn es so wäre, so ist das m.E. etwas viel Zusatzaufwand, wenn ich annehmen, dass ich etwa 30 Fotos so berücksichtigen möchte).
"Aufhübschen" mit CSS.
entfällt das, wenn ich die id="..." zur Übung weglasse?
Gruss
bari.-
Om nah hoo pez nyeetz, bari!
Müsste ich dann für jedes grosse (=originale) Bild eine eigene html-Seite machen? (wenn es so wäre, so ist das m.E. etwas viel Zusatzaufwand, wenn ich annehmen, dass ich etwa 30 Fotos so berücksichtigen möchte).
Ja, aber die Seiten sind ja im Prinzip dieselben. Der einzige Unterschied ist der URI des Bildes. Auch wenn du es nicht serverseitig (etwa mit PHP) machen kannst/willst, beschränkt sich der Aufwand nachher auf ein wenig kopieren und einfügen.
Matthias
-
Hallo Matthias,
Ja, aber die Seiten sind ja im Prinzip dieselben. Der einzige Unterschied ist der URI des Bildes. Auch wenn du es nicht serverseitig (etwa mit PHP) machen kannst/willst, beschränkt sich der Aufwand nachher auf ein wenig kopieren und einfügen.
ja, gut. Was ist denn der Unterschied, resp der Vorteil, zur Variante, wie ich es jetzt mit html gemacht habe (ebenso in der engl Variante). Wenn ich die Bilder wechseln möchte, so muss ich zusätzlich noch bei allen html-Dokumente bei jedem Bild den Link anpassen, das entfällt jetzt.
A propos js, das habe ich nicht hingekriegt, u.a. auch darum, da es mir nicht ganz klar ist, ob ich den Code im html-dokument oder resp auch in dem separaten dokument eintragen muss. Wenn ich mit js auch extra-html-js-documente machen muss, was ist denn damit der Vorteil?
Noch zum Code von Jörg: ich muss doch nur noch im dritten Teil die beiden Links eintragen, oder? und das käme dann in ein bestehendes html-dokument, oder ist das die eigentlich neue Seite (wie der Eingangssatz das vermuten lässt, aber eben, bei mir erschien nichts am Bildschirm).
Gruss, bari.
-
-
-
-
Wenn du ein neues Fenster öffnen möchtest:
<a href="Pfad_zum_großen_Bild" target="_blank">
<img src="Pfad_zum_kleinen_Bild" alt="Beschreibung, was zu sehen ist">
</a>> Diese Variante hat zwei Nachteile: Es wird wirklich nur das Bild angezeigt (also das, was jeder Nutzer auch mit der rechten Maustaste könnte) und damit fehlt der alt-Text. Zudem lässt du dem Nutzer nicht die Wahl, ob er das Bild vielleicht nicht doch im Originalfenster öffnen möchte. vielen Dank für die Lösung. Ich für mich möchte auf jeden Fall ein neues Fenster öffnen. By the way: das Öffnen einer neuen Site auf einen Link ist also von der Codierung einer site abhängig und nicht vielleicht durch eine Einstellung im Browser steuerbar? Denn ich störe mich praktisch jedesmal, wenn die urprüngliche Site verschwindet, wenn ich einen Link anklicke (lieber ein paar sites offen haben und dafür die übersicht behalten) Ich habe bisher diese Rechte-Maus-Tasten-Funktion nicht gekannt (und auch nicht gesucht). Und ich gehe mal davon aus, dass viele User sich einfach durch Websites klicken ohne erweiterte Möglichkeiten auszunutzen (oder zu suchen). Deshalb ist mir diese Lösung sympathisch. > Ich empfehle deshalb ein HTML-Dokument zu erstellen, welches nur das Bild enthält oder besser das Bild, umgeben von einem zurück-führenden a-Element. ~~~html <a href="Pfad_zum_Dokument_mit_großen_Bild"> <img src="Pfad_zum_kleinen_Bild" alt="Beschreibung, was zu sehen ist"> </a>Der Unterschied wäre also, dass ich damit einen alternativen Text hätte (alt="..."), wenn das Bild nicht erscheinen würde?
Außerdem gibt es noch schicke JavaScript-Lösungen, etwa lightbox.
sieht super aus, fast schon zu schön...
Gruss,
bari.-
Hallo,
vielen Dank für die Lösung. Ich für mich möchte auf jeden Fall ein neues Fenster öffnen.
möchten deine Besucher das auch?
Erfahrungsgemäß kann man sie in diesem Punkt grob in zwei Gruppen einteilen:A: Die Laienanwender, denen gar nicht bewusst ist, dass man Links auch in einem neuen Fenster bzw. einem neuen Tab öffnen könnte. Wenn man denen z.B. durch das Attribut target="_blank" zwangsweise ein neues Tab öffnet, nehmen sie das eventuell gar nicht bewusst wahr und wundern sich höchstens, warum der Zurück-Button nicht funktioniert.
B: Die Power-User, die um die Möglichkeit wissen, und von Fall zu Fall selbst entscheiden wollen (und können), ob sie einen Link in einem neuen Tab öffnen oder nicht. Die sind über ein erzwungenes neues Tab eventuell grantig, weil sie es nicht beeinflussen können.
By the way: das Öffnen einer neuen Site auf einen Link ist also von der Codierung einer site abhängig und nicht vielleicht durch eine Einstellung im Browser steuerbar?
Durch eine Einstellung im Browser kann man höchstens festlegen, _wie_ Links behandelt werden, die ein neues Fenster anfordern - ob sie tatsächlich eine komplett neue Browserinstanz öffnen oder nur ein neues Tab. Und nicht zu vergessen: Popup-Blocker, die -je nachdem, wie aggressiv sie eingestellt sind- das Öffnen eines neuen Fensters eventuell komplett unterdrücken.
Denn ich störe mich praktisch jedesmal, wenn die urprüngliche Site verschwindet, wenn ich einen Link anklicke (lieber ein paar sites offen haben und dafür die übersicht behalten)
Geht mir auch so. Deswegen haben ich mir im Lauf der Jahre angewöhnt, Links mit der mittleren Maustaste anzuklicken. Das öffnet den Link in allen mir bekannten Browsern (Opera, Firefox, IE, Chrome) in einem neuen Tab.
Ich habe bisher diese Rechte-Maus-Tasten-Funktion nicht gekannt (und auch nicht gesucht). Und ich gehe mal davon aus, dass viele User sich einfach durch Websites klicken ohne erweiterte Möglichkeiten auszunutzen (oder zu suchen). Deshalb ist mir diese Lösung sympathisch.
Mir nicht, und vielen unerfahrenen Usern wird es ähnlich gehen. Die Verwendung des Back-Buttons ist den meisten geläufiger als die Tatsache, dass man mehr als eine Seite gleichzeitig geöffnet haben könnte.
Mir selbst geht es dabei nicht so sehr um den Back-Button (den verwende ich sowieso so gut wie nie), sondern einfach darum, dass ich selbst entscheiden kann.Ich empfehle deshalb ein HTML-Dokument zu erstellen, welches nur das Bild enthält oder besser das Bild, umgeben von einem zurück-führenden a-Element.
Der Unterschied wäre also, dass ich damit einen alternativen Text hätte (alt="..."), wenn das Bild nicht erscheinen würde?Nicht nur das. Du kannst auch Merkmale wie Hintergrund, Rahmen, Fenstertitel etc. selbst bestimmen, während im anderen Fall der Browser selbst über diese Dinge entscheidet.
So long,
Martin--
Auf jeden Menschen auf der ganzen Welt entfallen statistisch gesehen etwa 3000 Spinnen, wie Wissenschaftler jetzt festgestellt haben.
Wer will meine haben? Denn ich will sie bstimmt nicht.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
[latex]Mae govannen![/latex]
B: Die Power-User, die um die Möglichkeit wissen, und von Fall zu Fall selbst entscheiden wollen (und können), ob sie einen Link in einem neuen Tab öffnen oder nicht. Die sind über ein erzwungenes neues Tab eventuell grantig, weil sie es nicht beeinflussen können.
Dann sind es keine Power-User. Ein Power-User hat ein(e) Einstellung/Extension/Addon/Script/.. aktiviert, mit der das ganze nervtötende target=_blank - Geraffel von vornherein entfernt wird. ;)
Ric.. äh, Kai
--
var jQuery = $(hit);
Unsere Identität entnehmen Sie bitte dem beigefügten Auszug aus den Personenstandsbüchern. Gegen die Assimilierung in unser Kollektiv ist nach dem ABGB (§666, Abs. 3/IV) kein Rechtsmittel zulässig. Wir bitten um Ihr Verständnis.
SelfHTML-Forum-Stylesheet
-
Hallo,
B: Die Power-User, die um die Möglichkeit wissen, und von Fall zu Fall selbst entscheiden wollen (und können), ob sie einen Link in einem neuen Tab öffnen oder nicht. Die sind über ein erzwungenes neues Tab eventuell grantig, weil sie es nicht beeinflussen können.
Ein Power-User hat ein(e) Einstellung/Extension/Addon/Script/.. aktiviert, mit der das ganze nervtötende target=_blank - Geraffel von vornherein entfernt wird. ;)
aber nicht, solange die Browser zu blöd sind, "böse" (d.h. von außerhalb kommende) Scripte getrennt von "guten" (also lokalen User-generierten) Scripts zu behandeln. Wenn ich JS deaktiviere, was meine gewollte Grundeinstellung ist, dann sind damit auch User-Scripts blockiert. Zu dumm ...
Ciao,
Martin--
Wer im Steinhaus sitzt, soll nicht mit Gläsern werfen.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
-
-
-
-