Foros del Web » Programando para Internet » Javascript »

Zoom en una imagen

Estas en el tema de Zoom en una imagen en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/08/2003, 05:16
 
Fecha de Ingreso: febrero-2002
Ubicación: Navarra
Mensajes: 701
Antigüedad: 22 años, 9 meses
Puntos: 2
Zoom en una imagen

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
__________________
asp, php, .net, adaptandose a las necesidades
  #2 (permalink)  
Antiguo 21/08/2003, 13:47
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 8 meses
Puntos: 1826
Zoom

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?.

Última edición por Rafael; 21/08/2003 a las 13:56
  #3 (permalink)  
Antiguo 22/08/2003, 02:19
 
Fecha de Ingreso: febrero-2002
Ubicación: Navarra
Mensajes: 701
Antigüedad: 22 años, 9 meses
Puntos: 2
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
__________________
asp, php, .net, adaptandose a las necesidades
  #4 (permalink)  
Antiguo 22/08/2003, 03:43
Avatar de Bravenap  
Fecha de Ingreso: noviembre-2002
Ubicación: Los Arroyos, El Escorial, Madrid
Mensajes: 2.084
Antigüedad: 22 años
Puntos: 4
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.
__________________
¡¡NO A LA GUERRA!!
Si ponemos a nuestros mensajes títulos adecuados, la gente se animará más a abrirlos y resultarán más útiles en las busquedas. ¡No a los ayuuudaaa, urgenteee y similares!
  #5 (permalink)  
Antiguo 22/08/2003, 03:47
Avatar de Bravenap  
Fecha de Ingreso: noviembre-2002
Ubicación: Los Arroyos, El Escorial, Madrid
Mensajes: 2.084
Antigüedad: 22 años
Puntos: 4
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.
__________________
¡¡NO A LA GUERRA!!
Si ponemos a nuestros mensajes títulos adecuados, la gente se animará más a abrirlos y resultarán más útiles en las busquedas. ¡No a los ayuuudaaa, urgenteee y similares!
  #6 (permalink)  
Antiguo 22/08/2003, 04:14
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 23 años, 2 meses
Puntos: 381
Já! qué cojonudo

Oye, está chulísimo


<off-topic> por qué acabamos llamando todos "pruebas" al directorio donde colgamos los ejemplos...</off-topic>
  #7 (permalink)  
Antiguo 23/08/2003, 03:14
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años
Puntos: 317
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 ...
  #8 (permalink)  
Antiguo 24/08/2003, 03:37
Avatar de Bravenap  
Fecha de Ingreso: noviembre-2002
Ubicación: Los Arroyos, El Escorial, Madrid
Mensajes: 2.084
Antigüedad: 22 años
Puntos: 4
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?
__________________
¡¡NO A LA GUERRA!!
Si ponemos a nuestros mensajes títulos adecuados, la gente se animará más a abrirlos y resultarán más útiles en las busquedas. ¡No a los ayuuudaaa, urgenteee y similares!
  #9 (permalink)  
Antiguo 24/08/2003, 08:47
Avatar de Bravenap  
Fecha de Ingreso: noviembre-2002
Ubicación: Los Arroyos, El Escorial, Madrid
Mensajes: 2.084
Antigüedad: 22 años
Puntos: 4
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.
__________________
¡¡NO A LA GUERRA!!
Si ponemos a nuestros mensajes títulos adecuados, la gente se animará más a abrirlos y resultarán más útiles en las busquedas. ¡No a los ayuuudaaa, urgenteee y similares!
  #10 (permalink)  
Antiguo 24/08/2003, 21:55
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 8 meses
Puntos: 1826
Rafa

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.
  #11 (permalink)  
Antiguo 31/08/2003, 04:30
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 7 meses
Puntos: 1284
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
  #12 (permalink)  
Antiguo 31/08/2003, 09:26
Avatar de Bravenap  
Fecha de Ingreso: noviembre-2002
Ubicación: Los Arroyos, El Escorial, Madrid
Mensajes: 2.084
Antigüedad: 22 años
Puntos: 4
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.
__________________
¡¡NO A LA GUERRA!!
Si ponemos a nuestros mensajes títulos adecuados, la gente se animará más a abrirlos y resultarán más útiles en las busquedas. ¡No a los ayuuudaaa, urgenteee y similares!
  #13 (permalink)  
Antiguo 01/09/2003, 04:03
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 7 meses
Puntos: 1284
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"mouseMovetrue);
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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 07:17.