Bilderzoom mit JavaScript und Html

Ein Foto mit einer Lupe betrachten

Entwickelt von János Pál Tóth http://valid.tjp.hu/tjpzoom/

Es kann einen Bildausschnitt vergrößern ohne die Ladezeit einer Seite zu beeinflussen. Der vergrößerte Ausschnitt wird erst geladen, wenn man mit der Maus über das Bild fährt. Mit gedrückter linker Maustaste kann man die Lupe vergrößern.

In meinem Fall habe ich die Seite mit include in Doctype XHTML eingebunden. Das Javascript tjpzoom.js wurde mit einem Editor geöffnet und kopiert. Dann zwischen den JavaScript-Block auf der includeten Seite eingefügt.

<script type="text/javascript">
 /*<![CDATA[*/

/*]]>*/
 </script>

Einbinden des Vorschaubildes und des hochaufgelösten Bildes.

<div id="lupe">
<img src="bildlupe/klein.jpg" onmouseover="TJPzoom(this,'bildlupe/gross.jpg')" alt="Haus" />
</div>

Der Ordner dropshadow wurde in das Hauptverzeichnis kopiert.

Die Stylheet Anweisung im zentralen Stylesheets(CSS) einfügen.

#lupe img{
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 float: none;  /* für ie7 notwendig */
	}

Die Einstellungsparameter findet man am Ende des JavaScripts.
var TJPzoomwidth=160; Breite der Lupe var TJPzoomheight=120; Höhe der Lupe var TJPzoomamount=4; Anfangsvergrößerung var TJPzoomamountmax=12; Maximale Vergrößerung
Man kann statt des Id-Attributes auch das Class- Attribut verwenden. z.B.
die CSS-Anweisung:
.Lupe img{ float: none;}. Der Vorteil von Klassen z.B.
<div class="lupe">
ist, dass man sie innerhalb einer Webseite mehrfach verwenden kann. Dabei können im IE 7 Probleme auftauchen. Siehe Problemlösungen beim Internet Explorer 7.

Fragen beantwortet & Tipps zum Webdesign

Wichtig !!

Die Serversoftware Mowes Portable von der Firma CH Software hat die Geschäftstätigkeit zum 7. November 2012 eingestellt.
Ein gleichwertiges Programm ist: EasyPhp