CSS-Tutorial: PopUp-Bild ohne Javascript

[cru]

Dieses Tutorial beschreibt, wie PopUp-ähnliche Fenster mit Hilfe von CSS dargestellt werden können.
Hierzu ist kein Javascript notwendig!

Folgende Screenshots demonstrieren eine mögliche Darstellung:

Normales Artikelbild,
darunter ein Link um die vergrößerte Version anzeigen zu lassen.

Führt man den Mauszeiger über den Link öffnet sich mit Hilfe von CSS ein PopUp-ähnliches Fenster,
in welchem die vergrößerte Version des Bildes dargestellt wird.


Und so bauen Sie die Zoomfunktion in Ihren Shop ein:

Als erstes müssen die Styles für die Zoomfunktion angelegt werden. Öffnen Sie hierzu Ihre .css Datei mit einem Texteditor und fügen Sie folgende Zeilen hinzu:

Code: [Auswählen]


.zoomdiv {z-index:99;}
.zoomdiv a {display:block;}
.zoomdiv a span {display:none;}
.zoomdiv a:hover span {position:absolute; top:+200px; left: 40%; z-index:99;display:block;} /*Hier wird das Fenster positioniert; Nach persönlichen Vorstellungen anpassen*/
.zoomdiv a:hover span img {border: 1px solid #999999;}

Das Zoom-Bild wird später in einem span liegen (siehe Codezeile 3). Display: none; sorgt dafür, dass das Bild nicht sichtbar ist.
Wird der Mauszeiger nun über den Link bewegt (a:hover), greift die css-Eigenschaft .zoomdiv a:hover span.
Hier wird das Bild durch eine absolute Positionierung aus dem Textfluss der Seite herausgenommen und durch die Erhöhung des z-indexes in die oberste Ebene der Seite gehoben.
Als letzter Schritt wird das vorher ausgeblendete Bild durch das Attribut display: block; eingeblendet.


Nun kann die Zoomfunktion in die Detailseiten der Artikel eingebaut werden.
Hierzu sucht man im Code der Detailseite eine passende Stelle für den Link, mit welchem das Bild vergrößert werden soll, und fügt dort folgenden Code ein:

Code: [Auswählen]

<div class="zoomdiv">         
       <a href="javascript:void(0)">             
              <img src="../images/other/zoom.gif" alt="Bild vergr&ouml;&szlig;ern" border="0">    <!-- Hier wurde ein Bild als Link hinterlegt -->
              <span><img src="../__BILDZOOM__" alt="" border="0"></span>                          <!-- Das vergrößerte Bild liegt in einem benutzerdefinierten Feld -->
       </a>
</div>

Das div der Class zoomdiv umschließt den gesamten eingefügen Codeteil.
Im a-Element (Link zum einblenden) befindet sich zusätzlich zum Link das einzublendende Bild in einem span-Element.
Wird der Link mit den Mauszeiger überfahren wird genau dieses Element eingeblendet.
Verlässt man den Link nun wieder mit dem Mauszeiger, wird das span-Element wieder ausgeblendet.

Wenn man den Shop im Liveview-Betrieb startet und alle Bilder in die benutzerdefinierten Felder eingetragen hat, erscheint die Zoomansicht des Bildes, sobald man die Maus über den Link bewegt.

Möchte man das Bild an einer anderen Position anzeigen lassen, muss folgende Zeile der .css-Datei angepasst werden.

Code: [Auswählen]

.zoomdiv a:hover span {position:absolute; top:+200px; left: 40%; z-index:99;display:block;}
In diesem Fall ist das Bild 40% vom linken Rand und 200px vom oberen Rand des Browserfensters entfernt. (left: 40%; top: +200px;)


Sie wollen kein benutzerdefiniertes Feld anlegen und die Bilder per CSS skalieren?

Code: [Auswählen]

<div class="zoomdiv">         
       <a href="javascript:void(0)">             
              <img src="../images/other/zoom.gif" alt="Bild vergr&ouml;&szlig;ern" border="0">    <!-- Hier wurde ein Bild als Link hinterlegt -->
              <span>__dimage__</span>   <!-- Das Bild wird per CSS auf 120% skaliert -->
       </a>
</div>

Folgende Zeile zur .css-Datei hinzufügen:

Code: [Auswählen]

.zoomdiv a span img {width: 120%;}

Hier kann auf ein benutzerdefiniertes Feld verzichtet werden, indem das Detailbild verwendet wird und per CSS auf 120% seiner Größe skaliert wird.
Die Gefahr hierbei besteht jedoch darin, dass das Bild sehr unscharf wird!


mfg
cru


Linkback: https://www.shoppilot.net/pf/index.php?topic=953.0