Tutorial: Mouseover Bildzoom

 

 

Vorschau

Zoom mit Rahmen:

 

Zoom ohne Rahmen

 

 

Schwierigkeitsgrad

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

 

 

Tutorial

 

 

1. CSS Code einfügen (einmalig)

Bild zum Vergrößern anklickenBild zum Vergrößern anklicken

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:

<style type="text/css">

.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:

<style type="text/css">

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

 

 

2. Bilddateien hochladen

Bild zum Vergrößern anklickenBild zum Vergrößern anklicken

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 (siehe Bild) bis zum Maximum.

 

Speichern.

 

 

3. Bildadressen herauskopieren

Bild zum vergrößern anklickenBild zum vergrößern anklicken

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

Bild zum vergrößern anklickenBild zum vergrößern anklicken

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.

<div class="zoomimage-container">
<a class="zoomimage-std" href="http://google.de"><img src="http://bildlink1.jpg" alt="" onmouseover="javascript:document.getElementById('zoomimage1').style.visibility='visible'" /></a> <a href="http://google.de" class="zoomimage-zoom" id="zoomimage1" onmouseout="javascript:document.getElementById('zoomimage1').style.visibility='hidden'" name="zoomimage1"><img src="http://bildlink2.jpg" alt="" /></a>
</div>

 

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

Bild zum Vergrößern anklickenBild zum Vergrößern anklicken

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.

 

<style type="text/css">
.cc-m-hgrid-column .n {overflow: visible;}
</style>

 

 

7. Die Tutorialsammlung unterstützen

 

Unterstützt die Tutorialsammlung, damit es auch weiterhin Jimdo Tutorials gibt!

Z.B. indem ihr auf "gefällt mir" drückt oder meine Hauptseite besucht.

 

      

 

 

Kommentar schreiben

Kommentare: 10
  • #1

    prig thai (Samstag, 21 April 2012 20:33)

    Toll, vielen herzlichen Dank für dieses Tutorial

  • #2

    S.H. (Sonntag, 22 April 2012 11:48)

    danke, werde ich gleich mal ausprobieren

  • #3

    Delf Hanschke (Sonntag, 22 April 2012 22:19)

    Danke, ich bin ein echter Jimdo-Fan. In unserem Möbel-Shop unter http://www.moebel-guenstig.info/tische/ habe ich so etwas auch eingebaut.

  • #4

    alviarezrh (Mittwoch, 25 April 2012 16:05)

    excelente.

  • #5

    Georg Lavreysen (Dienstag, 12 Juni 2012 00:21)

    nur ein Wort: SUPER :-)

  • #6

    gruenhoch4 (Sonntag, 29 Juli 2012 12:18)

    danke!! super tool - auch für nicht html wissende gut erklärt!

  • #7

    strasserlandtechnik (Montag, 01 Oktober 2012 20:58)

    Fragee: kann man es auch so machen das es nach rechts aufpopt?

    PS: perfekte Seite hasd mir schon sehr gehofen mit deinen tuts!

  • #8

    Jimdo Tutorials (Freitag, 12 Oktober 2012 19:47)

    Du meinst nach links? Versuche einmal das "left" im Code durch "right" zu ersetzen - ich habe es allerdings selbst nicht probiert....

    Gruß, JimdoFriend Fabian

  • #9

    Céline Stäuble (Freitag, 19 Oktober 2012 11:52)

    Hey! Gibt es auch eine Möglichkeit, die Bilder in Produktübersichten per mouseover zu zoomen?

  • #10

    Jimdo Tutorials (Dienstag, 23 Oktober 2012 10:21)

    @Céline Stäuble
    Du meinst im Jimdo-Shop Modul? Das ist ein von Jimdo festgelegtes Objekt, hier lässt sich am HTML Code leider nichts mehr ändern, daher ist das auch nicht machbar.