Tutorial: Mouseover Bildzoom

Vorschau

oder z.B. Vorschau

Schwierigkeitsgrad

normal - mehrere HTML/CSS Codes, jedoch genau erklärt

1. CSS Code einfügen (einmalig)

Geht auf eurer Jimdo-Page auf "Einstellungen" und dort auf "Head bearbeiten". Hier fügt ihr folgenden Code oben ein. Ihr müsst euch für einen der zwei Stile entscheiden (mit oder ohne Rahmen).

Diese Aktion muss nur beim ersten mal durchgeführt werden, bei allen weiteren Bildern kann direkt bei Schritt 2 Begonnen werden.

Code mit Rahmen:

.zoomimage-container {position: relative;}
.zoomimage-std {}
.zoomimage-zoom {visibility: hidden; position: absolute; background: #EEEEEE; padding: 5px; border: 1px solid #DDDDDD; z-index: 1; top: 0px; left: 0px;}
</style>

Code ohne Rahmen:

.zoomimage-container {position: relative;}
.zoomimage-std {}
.zoomimage-zoom {visibility: hidden; position: absolute; z-index: 1; top: 0px; left: 0px;}
</style>

2. Bilddateien hochladen

Erstellt eine neue versteckte Seite auf eurer Page, oder verwendet eine versteckte Seite, welche ihr bereits für andere Tutorials aus der Tutorial- sammlung verwendet.

Hier ladet ihr euer Bild in zwei Größen untereinander in den normalen Bilder-Modulen hoch: Einmal in der standard-Größe und einmal in der Größe, welche beim Mouseover angezeigt werden soll.

Am Besten bringt ihr die Grafiken schon vor dem Hochladen auf die gewünschte Größe (Auflösung) und vergrößert sie dann über das "+"-Symbol bis zum Maximum.

Speichern.

3. Bildadressen herauskopieren

Geht nun in den Ansichts-Modus dieser versteckten Seite. Hier kopiert ihr die Bildadressen (Bild-URLs) der zwei Bilder einzeln heraus und speichert sie auf eurem PC in einem Dokument zwischen.

Firefox: Rechsklick, "Bildadresse kopieren"

Chrome: Rechsklick, "Bild URL kopieren"

Internet Explorer: Rechsklick, "Eigenschaften", "Adresse" (diese auswählen und kopieren)

4. Mouseover Bildzoom einfügen

Nun kommen wir endlich zum eigentlich Bildzoom. Geht in den Bearbeiten-Modus eurer Jimdoseite an die Stelle, an welcher der das Bild mit dem Bildzoom erscheinen soll. Fügt dort ein neues "Widget/HTML" Modul ein.

In dieses Modul kopiert ihr folgenden Code, an welchem ihr einige Änderungen vornehmen müsst. Diese sind unten farbig beschriftet und erklärt.

http://bildlink1.jpg

Diesen Code-Schnipsel ersetzt ihr mit eurer ersten herauskopierten URL, welche die Bildadresse des kleinen Bildes ist

http://bildlink2.jpg

Diesen Code-Schnipsel ersetzt ihr mit eurer zweiten herauskopierten URL, welche die Bildadresse des großen Zoom-Bildes ist

http://google.de (2x)

Diese zwei Code-Schnipsel ersetzt ihr (beide müssen identisch sein) mit der Adresse, zu welcher das Bild verlinken soll. Soll das Bild nicht verlinken, könnt ihr diesen Code-Teil herauslöschen.

1

Diese Nummerierung müsst ihr mit jedem weiteren Zoombild erhöhen. Bei eurem ersten Zoombild kann hier also die "1" stehen bleiben. Wenn ihr auf der selben Seite ein zweites Zoombild einfügt, müssen hier alle vier 1en mit 2ern ersetzt werden. Beim dritten mit 3ern, usw. Wichtig, keins vergessen!

5. Speichern

Im HTML-Modul auf "Speichern" klicken. Die Vorschau kann unter Umständen nicht richtig funktionieren, einfach in den Ansichts-Modus der Seite gehen und schon seht ihr das Ergebnis. Fertig.

6. Probleme im Spalten-Modul

Fügt ihr ein Zoombild in ein Jimdo Spaltenmodul ein, wird es meist abgeschnitten. Das Zoombild sollte daher wenn möglich nicht in Spalten eingefügt werden. Könnt ihr nicht darauf verzichten, müsst Ihr zusätzlich folgenden Code unter "Einstellungen", "Head bearbeiten" einfügen. Das kann allerdings zu Problemen bei anderen vorhandenen Spalten führen, diese müssen direkt im Anschluss überprüft werden.