Visualizzazione dei risultati da 1 a 2 su 2
  1. #1

    Coordinate mouse non rispettate per zoom

    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

  2. #2

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.