TJPZoom, es una utilidad con la cual podemos generar una lupa con Javascript y CSS, ampliando una sección de una imagen por la que vayamos pasando el ratón. El efecto depende de la cálidad de la imagen, pero se pueden obtener resultados muy curiosos.
El fichero javascript, se añade a nuestro proyecto de la siguiente forma.
<head>
<script type="text/javascript" src="http://valid.tjp.hu/zoom2/tjpzoom.js"></script>
</head>
Y para que trate nuestras imagenes hemos de indicarlo de la siguiente forma.
<div style="float:left" onmouseover="zoom_on(event,pic width,pic height,'pic url');" onmousemove="zoom_move(event);" onmouseout="zoom_off();"><img src="pic url" alt="tjpzoom picture title" style="padding:0;margin:0;border:0" /></div>
<div style="clear:both;"></div>
Rellenando con los valores que deseemos. Siendo:
pic width el tamaño width de la imagen.
pic height el tamaño height de la imagen.
pic url la ruta de la imagen.
Ejemplo:
Con una imagen de 300x239 ubicada en http://tjp.hu/barakk/images/200201152147.jpg tendríamos lo siguiente.
<div style="float:left" onmouseover="zoom_on(event,300,239,'http://tjp.hu/barakk/images/200201152147.jpg');" onmousemove="zoom_move(event);" onmouseout="zoom_off();"><img src="http://tjp.hu/barakk/images/200201152147.jpg" alt="tjpzoom picture title" style="padding:0;margin:0;border:0" /></div>
<div style="clear:both;"></div>
1 comentarios, 0 referencias
+
#