| |
Efecto lupa sobre una imagen
Efecto lupa sobre una imagen, pero nada de applets, todo con javascript.
Jugamos con las capas, tenga cuidado con el tamaño de la imagen, si tiene distinto tamaño modifique width y height en todas las propiedades de la capa.
Entre head y body el siguiente código...
<script language="JavaScript">
n=(document.layers) ? 1:0;
ie=(document.all) ? 1:0;
var square;
function init() {
if (n) square = document.layer2;
if (ie) square = layer2.style;
document.onmousemove = mouseMove;
if (n) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
function mouseMove(e) {
if (n) {var x=e.pageX; var y=e.pageY}
if (ie) {var x=event.x; var y=event.y}
status = "x:"+x+" y:"+y;
if (x>99 && x<301 && y>99 && y<401) {
x1=(x-100)*2*165/200;
y1=(y-100)*2*265/300;
square.left = 165-x+((x-100)/200)*70;
square.top = 165-y+((y-100)/300)*70;
if (ie) {
square.clip = "rect("+(y1)+" "+(x1+70)+" "+(y1+70)+" "+(x1)+")";
}
else {
square.clip.top = y1;
square.clip.left = x1;
square.clip.right = (x1+70);
square.clip.bottom = (y1+70);
}
square.visibility="visible";
}
else {
square.visibility="hidden";
}
}</script>
Este sería el ejemplo de BODY para una imagen llamada cieloandal.jpg...
<body bgcolor="#B9E927" onload="init()" topmargin="0">
<div id="layer1"
style="position:absolute; left:100px; top:100px; width:200px; height:300px; z-index:1;">
<p><img src="cieloandal.jpg" width="200" height="300" border="0"></p>
</div><div id="layer2"
style="position:absolute; left:50px; top:50px; width:512px; height:711px; z-index:2; background-color:white;clip:rect(0,0,0,0); layer-background-color:rgb(255,255,255);">
<p align="left"><img src="cieloandal.jpg" width="400" height="600" border="0"></p>
</div>
</body>
autor: amc
email o web: amc@califato.net
Fecha articulo: 31/03/2002
|
|
