Contenido

Lupa con JS y CSS

3 mar

+ 1

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.

zoom.JPG

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>

javascript, efectos

  • está curiosa la aplicación esta, yo le daría una buena utilidad: por ejemplo, ahora que se han puesto de moda las página con banners para anunciar empresas.. esta utilidad podría servir para aumentar el número de anuncios por cm2 … jajaja..
    interesante si señor…

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.