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