Zoom en una imagen

haven · #1 (**permalink**) 21/08/2003, 05:16

Hola a todos, la verdad es que no se si esto se puede hacer en javascript, pero bueno.
Se trata de que tengo una imagen con dos máquinas y lo que quiero es que al pasar el ratón por encima, es cuando me aparece la lupa, esa zona por la que estoy pasando se amplia en otra zona de la página, un ejemplo sería este:

La imagen de la izquierda es la imagen de baja resolución y la de la derecha es lo que se ve al pasar la lupa por encima

alguien sabe como podría hacerse esto????

Un saludo

Rafael · #2 (**permalink**) 21/08/2003, 13:47

Alguna vez vi eso en un sitio de scripts gratis, con frames.
Voy a buscar.
Si era con JavaScript.

Pregunta a los moderadores:
¿Se permite poner una liga a ese sitio?.

haven · #3 (**permalink**) 22/08/2003, 02:19

Gracias Rafael, me interesa mucho esto, de hecho lo he estado buscando en muchas páginas y no lo he encontrado, por eso te lo agradecería. Al final lo he hecho con flash, pero ya te digo que me gustaría saber como se hace en javascript.

Un saludo

Bravenap · #4 (**permalink**) 22/08/2003, 03:43

A ver si te interesa este pequeño ejemplo que acabo de hacer. No está del todo ajustado pero podría funcionar. Espero que no te tarde mucho en cargar porque la imagen es un poquito pesada.

http://personales.ya.com/pyrus/pruebas

Un saludo.

Bravenap · #5 (**permalink**) 22/08/2003, 03:47

Se me olvidaba. Sólo funciona de momento para IE, así que si alguien quiere hacerlo compatible también para NS, pues adelante.

Un saludo.

tunait · #6 (**permalink**) 22/08/2003, 04:14

Já! qué cojonudo

Oye, está chulísimo

<off-topic>

por qué acabamos llamando todos "pruebas" al directorio donde colgamos los ejemplos...</off-topic>

furoya · #7 (**permalink**) 23/08/2003, 03:14

Hola todos :

vi este mensaje cuando recién se publicó y me demoré un poco en responder; puede que algo de lo escrito esté desactualizado por los mensajes previos.

haven : Éso generalmente lo hacen los programas de zoom que se instalan sobre los navegadores. Pero es bastante fácil simular el mismo el efecto.

Te puedo dar dos o tres sugerencias, no todas de javascript, tú eliges y te pasas al foro que más te convenga. Voy a suponer que si te estás metiendo con algo así, ya sabes bastante de páginas web ( seguramente más que yo ).

La primera opción es la que ya usaste ( Flash ). He visto que se puede hacer un verdadero zoom y así no tienes la necesidad de andar creando simulaciones.

La segunda es que hagas una imagen-mapa, y le des las coordenadas por donde pasar el puntero para que cambie la imagen de la derecha. Y ya que estamos con el puntero, IE6+ te permite cambiar el cursor por uno tuyo, pero las demás versiones y navegadores no. Por ahora te conviene usar una imagen junto al puntero.

Me puse a buscar algo sobre mapeo, porque no lo hice nunca en mi vida; el ejemplo que preparé funciona desde el disco en IE5.5, puede que haya que ajustarlo para verlo en cualquier otro browser.

Código:

<HTML>
<HEAD>
<SCRIPT>

function Mover(imagen){
var equis=window.event.x; 
var ye=window.event.y;
document.getElementById('lupa').style.posTop=ye;
document.getElementById('lupa').style.posLeft=equis;
document.getElementById('lupa').style.visibility='visible';
document.images['zoom'].src=imagen;
document.getElementById('original').style.cursor='crosshair';
}
function Salir(){
document.getElementById('original').style.cursor='';
document.getElementById('lupa').style.visibility='hidden';
}
</SCRIPT>
</HEAD>
<BODY> 
<img style="position:absolute; top:0; left:0; 
visibility:hidden; width:20px" id="lupa" 
src="http://www.forosdelweb.com/images/a/header_busqueda.gif"> 

<map id="mapeado">
<area shape="rect" coords="10,10,40,60" onmouseout="Salir()" 
onmousemove="Mover('http://www.forosdelweb.com/images/icons/icon3.gif')">
<area shape="rect" coords="40,20,110,60" onmouseout="Salir()" 
onmousemove="Mover('http://www.forosdelweb.com/images/smilies/biggrin.gif')">
<area shape="rect" coords="120,50,170,70" onmouseout="Salir()" 
onmousemove="Mover('http://www.forosdelweb.com/images/a/header_homepage.gif')">
</map>

<table border=1 align=center><td>
<img ismap usemap="#mapeado" id="original" 
src="http://www.forosdelweb.com/images/a/logo_header.gif"> 
</td><td>
<img id="zoom" width=100 height=100 
src="http://www.forosdelweb.com/images/a/blank.gif">
</td></table>

</BODY>
</HTML>

Algunos comentarios.

Recuerda que las coordenadas de área rectangular se cuentan desde la izquierda en sentido horario; así
coords="10,20,30,40"
serían
borde izquierdo del área a 10px desde el borde izquierdo de la imagen;
borde superior del área a 20px desde el borde superior de la imagen;
borde derecho del área a 30px desde el borde izquierdo de la imagen;
borde inferior del área a 40px desde el borde superior de la imagen;

En el ejemplo la lupa se mueve con el cursor, si cambias onmousemove por onmouseover la lupa ya no se mueve, solamente aparece, creando un efecto similar a la barra de imagen del IE6.

La última sugerencia es que no uses un mapa sino una imagen cortada como un rompecabezas y metida en celdas de una tabla. Para las personas que la vean no va a haber diferencia, pero ésto te permite asignar eventos a cada parte ( en la imagen o en la celda ) y así cambiar el "zoom" de la derecha donde corresponda sin tener que medir coordenadas; algo como lo que hace Goooo[color=#FFDC00;]o[/color]g[color=#00CC00;]l[/color]e con su logo.

Por ahora no se me ocurre nada más. Vas a encontrar mejores escripts para cambiar imágenes y moverlas con el cursor entre los mensajes de este foro.

Suerte
furoya

SCALE http://www.conexion.com.py/~sgrillo
Splitz! http://www.b-zone.de

PD _ Bravenap : esa lupa está muy buena, después de verla casi no posteo mi código ...

Bravenap · #8 (**permalink**) 24/08/2003, 03:37

Lo primero, gracias a tunait y a furoya por las buenas críticas

. Y ya que me habéis picado, en cuanto pueda me pondré a retocarlo para hacerlo más preciso. Había pensado en usar capas en lugar de un iframe y sólo necesitaría saber cómo recuperar la posición del ratón para Netscape. Je, manos a la obra.

Cuantas más opciones se den, mejor, pero sinceramente, me parece que lo de usar un mapa de imágenes me parece demasiado complejo. Creo que podrían aparecer algunos problemas cuando se quiera usar para más imágenes.

Bueno, aunque haven se decida por Flash, yo seguiré con el temita en JS.

Hala, un saludo a todos.

PD.: tunait, se llama "pruebas" porque estaba haciendo unas pruebas y... bueno, una cosa llevo a la otra... y ya se sabe ¿no?

Bravenap · #9 (**permalink**) 24/08/2003, 08:47

Bueno, ya está completado.

Podéis ver el resultado en el mismo sitio de antes, pero no sé porqué, no se ve el icono de la lupa. Por lo tanto, os dejo otra opción:

http://www28.brinkster.com/horizontes/lupa.htm
http://personales.ya.com/pyrus/pruebas/lupa.htm

El código tiene las explicaciones para que se entienda un poco más. Espero que os guste.

Un saludo.

Rafael · #10 (**permalink**) 24/08/2003, 21:55

Bueno, a mi no me respondieron si podia poner una liga a un sitio externo, me limitaré a poner el código.
No trae el autor original, alguien se lo habrá quitado. En fin

Frame 1

<script>
Msoft=(navigator.appName.indexOf("Microsoft")!=-1)
if(document.layers) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=newPos;

function newPos(e){
X=(Msoft)?event.clientX:e.pageX
Y=(Msoft)?event.clientY:e.pageY
parent.Rframe.scroll(X*5-20,Y*5-20)
}
</script>
<body>
<img src=mapa.gif width=200><br>
OnMouseMove
</body>

Frame 2

<script>
Msoft=(navigator.appName.indexOf("Microsoft")!=-1)
if(document.layers) document.captureEvents(Event.MOUSEUP);
document.onmouseup=newPos;

function newPos(e){
X=(Msoft)?event.clientX:e.pageX
Y=(Msoft)?event.clientY:e.pageY
parent.Rframe.scroll(X*5-20,Y*5-20)
}
</script>
<body>
<img src=mapa.gif width=200><br>
OnMouseUp
</body>

Frame 3

<div style="position:absolute;width=1600;height:1300">
<img src=mapa.gif width=1600>
</div>

Archivo Frameset

<frameset cols="250,*">
<frameset rows="220,*">
<frame name="Lframe" src="cxLframe.htm">
<frame name="Lframe2" src="cxLframe2.htm">
</frameset>
<frame name="Rframe" src="cxRframe.htm">
</frameset>

Aparte de eso haay un formato interesante que es el FlashPix, para ponrt fotos de alta resolución en "multiresolución" o resolución selectiva. No es muy popular pero es interesante.

caricatos · #11 (**permalink**) 31/08/2003, 04:30

Hola a todos:

Bravenap: Felicidades por tu código... realmente me a gustado mucho, y lo de usar los "clips"... estaba por sugerirtelo cuando ví tu última página...

Con respecto a el cursor con netscape, hace algún tiempo hice un ejemplillo, y te voy a pasar el enlace para que lo veas: http://www.pepemolina.com/coordes/coordes.html

Espero que te sirva.

Saludos

Bravenap · #12 (**permalink**) 31/08/2003, 09:26

Hola a todos. Les echaré un vistazo a estos últimos códigos que parece que tienen muy buena pinta.

Lo que pasa es que ahora estoy en la recta final de exámenes y no voy a tener mucho tiempo.

Un saludo.

caricatos · #13 (**permalink**) 01/09/2003, 04:03

Hola otra vez:

Basándome en el enlace que te he mostrado anteriormente, preparé un script para ponerlo en el head y que esté listo para los 2 navegadores:

Código PHP:

  var _ns4 = (document.layers) ? true : false; 
var _ie = (document.all) ? true : false; 
var _ns6 = (document.getElementById && !_ie) ? true : false; 
var _coorX, _coorY; 
 
if (_ns6)    document.addEventListener("mousemove", mouseMove, true); 
if (_ns4)    {document.captureEvents(Event.MOUSEMOVE); document.mousemove = mouseMove;} 
if (_ie)    document.onmousemove = mouseMove; 
 
function mouseMove(e) 
{ 
    if (_ns4||_ns6)    {_coorX = e.pageX; _coorY = e.pageY;} 
    if (_ie)    {_coorX = event.x; _coorY = event.y;} 
    return true; 
} 
 
function ratitaX()    { 
    return _coorX; 
} 
 
function ratitaY()    { 
    return _coorY; 
}

La cuestión es ponerlo en un ficherito js y en el head poner algo así:

<script language=javascript src=ratita.js></script>

Lo de ratita es un nombre que le he dado por no usar mouse ni ratón (evitando nombres foráneos y tildes)

Bravenap: Sé que tu sabes como hacerlo, pero lo pongo para todos...

Puse un ejemplo en este sitio

Otra cosa para adaptarlo a netscape es lo de "pixelLeft/pixelTop" que no reconoce netscape...
Resulta que en ambos funciona offsetLeft/offsetTop, pero haciendo pruebas descubrí que en netscape y opera 7 funcionan muy bien, pero en el explorer parece que le suma un par de pixeles ¿?

Bueno, si te sirve algo de esto avisa.

Saludetes