Nur ein Bild zoomen, eine Alternative zur Lightbox - Februar 2013
Anlass
Für eine Seite wollte ich die dekorativen Bilder ähnlich wie in der Lightbox zoomen. Die Lightbox wollte ich nicht einsetzen, es sollte ein 'kleine' Lösung sein. Hierfür entstand ein Javascript Modul.
Bei Nachfragen zum Firefox Add-on 'Image Map Editor' kam der Wunsch, dass in der Lightbox-Darstellung auch die Image Maps funktionieren sollen. In der Lightbox-Funktion 'herumzufummeln' halte ich nicht für sinnvoll. Daraufhin untersuchte ich meine Zoom-Funktion, ob sie mit den Image Maps verträglich ist. Natürlich nicht, wäre ja auch zu schön gewesen.
Die Idee
Im Prinzip bestand die Möglichkeit, die Image-Maps in der Zoom-Funktion zu nutzen. Nur die Art der Implementierung verhinderte dies. Im Gegensatz zu Lightbox Implementierungen wird das große Bild unsichtbar im Quellcode angegeben und nicht dynamisch nachgeladen. Damit kann man Maps für das kleine und das große Bild definieren. Also machte ich mich an die Arbeit ...
Die Lösung
Eine Beschreibung
auch mehrzeilig möglich.
Das Bild links reagiert auf 'mouse over' und es erscheint ein Icon für die Zoom-Funktion. Klickt man auf das Bild, startet die Zoomfunktion. Alle Images und der Text werden im Quellcode angegeben. Nachteil könnte eventuell die Ladezeit werden, da auch das große Bild sofort geladen wird.
Im Quellcode sind einige Dinge zu beachten. Die Map muss die Attribute 'id' und 'name' haben, sonst funktionieren einige Browser nicht. Das <img> für das Icon muss sofort hinter dem <img> mit dem kleinen Bild platziert werden wegen der Überlagerung (wegen IE).
Hier der Quellcode für das Bild mit Zoom-Funktion:
<span class="hjbzoom" style="float:left;margin:4px 10px 10px 0px;width:200px;height:133px;">
<a onclick="javascript:HjbDdorfZoom.openZoom(this)">
<img class="hjbthumbimg" src="zoom/flowerpower-tn.jpg" width="200" height="133" alt="" title="kleines Bild" usemap="#bildklein"><img class="hjbzoomicon" src="zoom/hjbzoom.gif" width="24" height="24">
<img class="hjbzoomimg" src="zoom/flowerpower.jpg" width="800" height="533" alt="" title="großes Bild" usemap="#bildgross">
<span class="hjbzoomtext">Eine Beschreibung<br>auch mehrzeilig möglich.</span>
</a>
</span>
<map id="bildklein" name="bildklein">
<area shape="poly" coords="91,69,96,62,109,63,110,73,103,81,95,78" href="#" title="hier ist eine sensitive Fläche">
<area shape="rect" coords="25,14,85,36" href="#" title="hier ist eine sensitive Fläche">
<area shape="rect" coords="129,14,187,38" href="#" title="hier ist eine sensitive Fläche">
<area shape="circle" coords="47,91,35" href="#" title="hier ist eine sensitive Fläche">
</map>
<map id="bildgross" name="bildgross">
<area shape="poly" coords="365,276,383,247,434,251,438,293,412,323,378,311" href="#" title="hier ist eine sensitive Fläche">
<area shape="rect" coords="99,58,341,146" href="#" title="hier ist eine sensitive Fläche">
<area shape="rect" coords="514,57,747,151" href="#" title="hier ist eine sensitive Fläche">
<area shape="circle" coords="186,365,138" href="#" title="hier ist eine sensitive Fläche">
</map>
Im Header ist das Javacript-Modul und die CSS-Definition einzubilden:
<link rel="stylesheet" href="hjbzoom.css" type="text/css"> <script type="text/javascript" src="hjbzoom.js"></script>
Die Dateien gibt es hier: hjbzoom.js und hjbzoom.css
Das <span> Element wird für die Platzierung des Bildes innerhalb des Textes benutzt (float). Diese Seite habe ich mit folgenden Browsern getestet: Firefox 18.0.2, Chrome 24.0, Opera 12.14, Safari 5.1.7 und IE 8.0. Warum beim Chrome die Blätterecken in den Vordergrund kommen, ist mir unerklärlich, wie so manche Effekete in den Browsern (siehe auch sonstige Kennzeichnungen mit 'IE').
Die Maps erstellen
Die Areas in den Maps wurden natürlich mit dem 'Image Map Editor' erstellt. Da das große Bild unsitbar ist, sollte man vorher in den CSS-Definitionen für die Klassen .hjbzoomimg, .hjbzoomtext display auf block setzen. Wenn man mit den leeren Maps den 'Image Map Editor' aufruft werden das kleine und das große Bild markiert. Dann habe ich die Areas für das große Bild definiert und die Definitionen aus dem Clipboard eingefügt. Um die entsprechen skalierten Areas für das kleine Bild zu bekommen, habe ich ein Kreis mit Radius 0 angelegt (grüner Punkt), diesen markiert und im Dialogfenster für die x und y Koordinate die Größe es kleinen Bildes eingegeben. Das Ergebnis vom Clipboard in die Map für das kleine Bild eingefügt und den Null-Kreis gelöscht. FERTIG.
In der nächsten Version des 'Image Map Editor' wird das Bild automatisch sichtbar.
