Ayuda Con Efecto Zoom En Imagen

dardd · #1 (**permalink**) 09/09/2003, 12:45

Saludos a todos los foreros,me he mirado lo del efecto lupa en una imagen,he probado pero en la imagen de la derecha en que tenia que salir aumentado no me sale nada(La ruta esta bien).Alguien me puede ayudar.Aqui esta el codigo:

Código PHP:

  <HTML> 
<HEAD> 
<TITLE> Efecto lupa </TITLE> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
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 BGCOLOR="#FFFFFF"> 
 
<img style="position:absolute; top:0; left:0;  
visibility:hidden; width:20px" id="lupa"  
src="cursor.ico">  
 
<map name="mapeado"> 
<area shape="rect" coords="0,0,3,143" onmouseout="Salir()" onmousemove="Mover('http://localhost/asp/php/javascripts/imagenes/americanpie/amppeq1.jpg')"> 
</map> 
 
<IMG ismap usemap="#mapeado" name="original" SRC="C:/asp/php/Javascripts/Imagenes/americanpie/ame3.jpg"> 
<img id="zoom" width=300 height=300 src="/imagenes/americanpie/ame2.jpg"> 
</BODY> 
</HTML>

Las coordenadas son de prueba esquina superior izquierda

dardd · #2 (**permalink**) 09/09/2003, 13:35

Ya esta claro, el problema esta en que la direccion de las imagenes en movor tienen que ser tipo URL.
Os lo cambio.

jarauta · #3 (**permalink**) 23/02/2010, 11:02

He intentado aplicar el códgo pero no me detecta bien las funciones javascript alguna idea?

<script language="JavaScript" type="text/javascript">
function Mover(imagen){
var equis=window.event.x;
var ye=window.event.y;
document.getElementById('lupa').style.posTop=ye;
document.getElementById('lupa').style.posLeft=equi s;
document.getElementById('lupa').style.visibility=' visible';
document.images['zoom'].src=imagen;
document.getElementById('zoom').style.visibility=' visible';
document.getElementById('original').style.cursor=' crosshair';
}
function Salir(){
document.getElementById('original').style.cursor=' ';
document.getElementById('lupa').style.visibility=' hidden';
document.getElementById('zoom').style.visibility=' hidden';
}
function Saludar(){
window.alert('Hola chica');
}
</script>
</head>
<body>
<map id="mapeado">
<area alt="mapa" shape="rect" coords="140,2,430,235" onmouseout="Salir()" onclick="Saludar()" onmouseover="Saludar()"/>
<area alt="mapa" shape="rect" coords="122,243,345,431" onmouseout="Salir()" onmouseover="Saludar()" onclick="Saludar()"/>
<area alt="mapa" shape="rect" coords="132,487,481,704" onmouseout="Salir()" onmouseover="Saludar()" onclick="Saludar()"/>
<area alt="mapa" shape="rect" coords="0,127,90,305" onmouseout="Salir()" onmouseover="Saludar()" onclick="Saludar()"/>
</map>
<img style="border:0px;" alt="ismap" usemap="#mapeado" ismap="ismap" id="original" src="images/mapa_completo.JPG"/>
<img style="visibility:hidden;" alt="zoom" id="zoom" width="700px" height="700px" src="images/documentacion.JPG"/>
<img style="position:absolute; top:0; left:0; width:16px; visibility:hidden;" alt="lupa" id="lupa" src="images/IconoLupa.JPG"/>
</body>

jarauta · #4 (**permalink**) 24/02/2010, 02:36

Solucionado en parte.

El código está bien para ejecutarlo con Internet Explorer pero no con mozilla Firefox que era con lo que estaba probando. Cuando lo tenga del todo lo comento.

caricatos · #5 (**permalink**) 24/02/2010, 02:54

Hola:

El tema original es del 2003, así que lo cerramos por viejo. Si se quiere tratar algo sobre este tema será mejor iniciar un tema nuevo y referenciarlo.

Saludos