Ajaxschmiede.de

Christian Effenberger veröffentlichte auf seiner Seite netzgesta.de ein Skript um sehr cool aussehende Lupeneffekte relativ einfach in eigene Homepage einzubauen.

Alles was man dazu benötigt ist sein loupe.js, das aktuell in Version 1.3 vorliegt und für nicht-kommerielle und private bzw. Schulungszwecke frei verfügbar ist.

Zum Einbau müssen die folgenden Zeilen Code in den Head-Bereich eingefügt werden:

// only if the image "loupe.png" is not in the current path
<script type="text/javascript">var loupePath="imagepath/";</script>
// else only this lines...
<script src="loupe.js" type="text/javascript"></script>
<!--[if gte IE 6]>
<script type="text/javascript">var loupePath="vml/";</script>
<script type="text/javascript" src="vml/loupe.js"></script>
<![endif]-->

Um die Lupenfunktion hinzuzufügen, wird ein onload=”initLoupe(this.id);”-Ereignis auf ein von einem div umschlossenes Bild gesetzt.

<img src="..." id="..." onload="initLoupe(this.id);" alt="..." width="356" height="205" />

Die Lupengrafik lässt sich problemlos ersetzen und den eigenen Vorlieben und Website-Motiven anpassen.

loupe.js funktioniert in allen größeren Browsern (Firefox 1.5+, Opera 9+, Safari und IE 6+). Ältere Browser ignorieren die Anweisungen einfach.