Ciao ragazzi.
Lo script seguente l'ho recuperato da un post del forum, che ora non trovo più.
L'ho adattato e il risultato ottenuto mi soddisfa. In pratica creo un effetto zoom su un'immagine, sfruttandone una copia.
Il mio problema, è che se scrollo la pagina, le coordinare reuperate vengono sballate.
Questo è lo script
codice:
<script language="JavaScript" type="text/javascript">
<!--
function display(boh,evOb){
var element;
//recupero le variabili dal layer1
tmpX=evOb.clientX - findPosX(boh) - 1;
tmpY=evOb.clientY - findPosY(boh) - 1;
//le visualizzo sul form
document.Show.MouseX.value=tmpX;
document.Show.MouseY.value=tmpY;
//ora le duplico per rapportarle all'immagine più grande
ztmpX=(tmpX*2);
ztmpY=(tmpY*2);
//in base alla loro posizione faccio muovere il layer2
if(tmpX<250){
document.getElementById('zoom').style.left="-"+ztmpX+'px';}
if(tmpY<250){
document.getElementById('zoom').style.top="-"+ztmpY+'px';}
}
//questedue funzioni sono state prese e copiate.
function findPosX(obj){
var curleft=0;
if(document.getElementById || document.all){
while (obj.offsetParent){
curleft += obj.offsetLeft;
obj = obj.offsetParent;
}
}
else if (document.layers){
curleft += obj.x;
}
return curleft;
}
function findPosY(obj){
var curtop=0;
if(document.getElementById || document.all){
while (obj.offsetParent){
curtop += obj.offsetTop;
obj = obj.offsetParent;
}
}
else if (document.layers){
curtop += obj.y;
}
return curtop;
}
//-->
</script>
questo invece è la parte in html
codice:
<div id="layer1" onmousemove="display(this,event);" >[img]foto.jpg[/img]</div>
<div id="layer2"><div id="zoom">[img]foto.jpg[/img]</div></div>
<form action= "" name="Show" class="show">
<input type= "text" name= "MouseX" value= "0" /> X
<input type= "text" name= "MouseY" value= "0" /> Y
<input type= "text" name= "MouseXX" value= "0" /> XX
<input type= "text" name= "MouseYY" value= "0" /> YY
</form>
tutto funziona finchè non devo scrollare la pagina.
Se volete provarlo, inserite una foto di 600x600px,
e con i css, assegnate questi valori:
codice:
#layer1{
width:300px;
height:300px;
background:#cc6600;
}
#layer1 img {
width:300px;
height:300px;
}
#layer2{
position:relative;
background:#00ff99;
width:100px;
height:100px;
overflow:hidden;
}
#zoom{
position:absolute;
margin:0px;
padding:0px;
}
sapete dirmi qualcosa?
Grazie