PopImage bzw Popup Image

[johann.001]

Hallo, und Grüß Gott
Sorry, wenn ich hier evtl falsch bin.

Ich versuche, in einer Tabelle mit 2 verkleinertenen Bildern die Bilder beim anklicken in Originalgröße anzuzeigen und mit weiterem Mausklick wieder zu verkleinern.
vergrößern geht, verkleinern nicht.
Vielleich kann jemand auf einfache Weise helfen.
Ich stehe momentan auf besagter Leitung
Danke!
Johann

hier mein Code:

<a href="bilder/konzert2006_2b.jpg" class="popImage"><img src="bilder/konzert2006_2b.jpg" alt="" height="90"

width="125"></a>

[misterunknown]

Moin,

Ich versuche, in einer Tabelle mit 2 verkleinertenen Bildern die Bilder beim anklicken in Originalgröße anzuzeigen und mit weiterem Mausklick wieder zu verkleinern.
vergrößern geht, verkleinern nicht.

Für eine derartige Funktionalität wirst du Javascript brauchen. Für CSS-Popups direkt in der Seite gibt es vorgefertigte Bibliotheken, die man verwenden kann, beispielsweise Highslide.
Man kann sich natürlich auch selbst ein Javascript bauen. Wenn es ein eigenes Fenster sein soll, kannst du mit der http://de.selfhtml.org/javascript/objekte/window.htm#open@title=open()-Methode des http://de.selfhtml.org/javascript/objekte/window.htm@title=window-Objektes arbeiten

<a href="bilder/konzert2006_2b.jpg" class="popImage"><img src="bilder/konzert2006_2b.jpg" alt="" height="90"

Wenn Javascript nicht in Frage kommt, gibt es noch die Möglichkeit, die Bilder in einem eigenen Fenster zu öffnen, indem du dem a-Element das http://de.selfhtml.org/html/verweise/definieren.htm#zielfenster@title=target-Attribut gibst. Das führt aber bei verschiedenen Browsern mit verschiedenen Einstellungen zu verschiedenen Verhaltensweisen.

Grüße Marco

[Gunnar Bittersmann]

@@misterunknown:

nuqneH

Wenn Javascript nicht in Frage kommt, gibt es noch die Möglichkeit, die Bilder in einem eigenen Fenster zu öffnen, indem du dem a-Element das http://de.selfhtml.org/html/verweise/definieren.htm#zielfenster@title=target-Attribut gibst.

Es gibt auch die Möglichkeit*, die Bilder im selben Fenster Fenster zu öffnen, indem du dem img-Element (oder einem Container) die :target-Pseudoklasse gibst.

Qapla'

* fähige Browser vorausgesetzt

[dave]

Hi,

Es gibt auch die Möglichkeit*, die Bilder im selben Fenster Fenster zu öffnen, indem du dem img-Element (oder einem Container) die :target-Pseudoklasse gibst.

Wobei hier das große Bild immer geladen wird, unabhängig davon ob es überhaupt angesehen werden will.
Bei 3 relativ kleinen Bildern wie in deinem Beispiel ist das auf sicherlich egal.

Bei einer ganzen Galerie die man auf einem Mobilen-Gerät durchschauen will (aber nur einzelnen in groß) ist das dann eher störend.

~dave

[johann.001]

Hi

erstmals vielen Dank für euere Tipps.
Aber es ist noch nicht das Richtige dabei

Mein Gedanke ist folgender:
die Bilder werden als Tumbnails (verkleinerte Originalfotos) angezeigt.
beim Mausklick werden sie in der Originalgröße angezeigt,
beim nächsten Mausklick werden sie wieder verkleinert auf der Originalseite angezeigt.
Popup-Fenster will ich vermeiden, es sei denn, sie bleiben immer im Vordergrund und passen sich der Bildgröße automatisch an.

Beispiele:
http://www.wkk-waldsassen.de/archiv2006.html
(Hier sind die Originalfotos hinterlegt;
da wird das Bild zwar vergrößert, aber nicht mehr verkleinert)

http://www.wkk-waldsassen.de/archiv2011.html
(Hier sind Tumbs und Originalfotos hinterlegt;
da wird das Bild im Popup angezeigt, aber das Popup verschwindet bei weiteren Seitenzugriffen im Hintergrund)

thx
johann.001

[Matthias Apsel]

Om nah hoo pez nyeetz, johann.001!

erstmals vielen Dank für euere Tipps.
Aber es ist noch nicht das Richtige dabei

Es ist das richtige dabei.

öffne statt des Bildes ein HTML-Dokument, welches das Bild enthält.

(Beseitige die Fehler des Validators und entsorge das Tabellenlayout)

Matthias

[misterunknown]

Moin,
also nicht, dass ich dir unterstellen will, dass du meinen Link nicht angeguckt und auf die Thumbnails geklickt hast, aber meines Erachtens ist das wirklich eine gute Möglichkeit für dich.

Die Möglichkeit ein HTML-Dokument zu öffnen, welches einen Link zurück zur Seite enthält ist auch gegeben.

Grüße Marco

[Matthias Apsel]

Om nah hoo pez nyeetz, johann.001!

<a href="bilder/konzert2006_2b.jpg" class="popImage"><img src="bilder/konzert2006_2b.jpg" alt="" height="90" width="125"></a>

bedeutet, du zeigst _nur_ das Bild im Browser an.

Du könnstest, stattdessen eine HTML-Seite verwenden, die auch wieder einen Link zur ursprünglichen Seite enthält, also auch <a href="Adresse der ursprünglichen Seite><img src=das verkleinerte bild></a>

Es wäre eine Lösung, die allerdings nicht besonders clever, dafür sehr leicht umsetzbar ist. Ich würde übrigens nur kleine Bilder laden, wenn ich nur kleine Bilder anzeigen möchte.

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz,

Noch einmal mein Lösungsansatz:

Die Seite mit den kleinen Bildern verlinkt auf mehrere Seiten, die alle ein großes Bild enthalten:

<a href="bild1.html"><img src="bild1_klein.jpg" alt="verkleinerte Ansicht eines schönen Bildes"></a>

Die Seite(n) mit einem großen Bild mit einem großen Bild verlink[t/en] zu der Seite mit den kleinen Bildern:

<a href="seite_mit_den_kleinen_bildern.html"><img src="bild1_grosz.jpg" alt"Schönes Bild"></a>

Matthias

[jophann.001]

hallo

danke, ich werde euere Tipps berücksichtigen.

Übrigens:
das andere Posting ist NICHT von mir.

Viele Grüße
johann