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

    Script per lente di ingrandimento

    Vi posto qui uno script funzionante e per voi credo utile

    ------------------------------------------------------------------------------------------




    var isNav, isIE
    var offsetX, offsetY
    var selectedObj

    var enlargefactor=4

    var largewidth = 3800
    var largeheight = 1275
    var largeleft = 250
    var largetop = 400

    var miniwidth = Math.floor(largewidth/enlargefactor)
    var miniheight = Math.floor(largeheight/enlargefactor)
    var minileft = 50
    var minitop = 30

    var loupewidth = 70
    var loupeheight = 70
    var loupeleft = 120
    var loupetop = 110

    var difleft= largeleft-minileft
    var diftop= largetop-minitop

    var clippoints
    var cliptop = (miniheight-loupeheight)*enlargefactor
    var clipbottom = cliptop+(loupeheight*enlargefactor)
    var clipleft =(miniwidth-loupewidth)*enlargefactor
    var clipright = clipleft+(loupewidth*enlargefactor)


    if (parseInt(navigator.appVersion) >= 4) {
    if (navigator.appName == "Netscape") {
    isNav = true
    } else {
    isIE = true
    }
    }


    function setZIndex(obj, zOrder) {
    obj.zIndex = zOrder
    }

    function shiftTo(obj, x, y) {
    if (isNav) {
    obj.moveTo(x,y)
    } else {
    obj.pixelLeft = x
    obj.pixelTop = y
    }

    cliptop = (y-minitop)*enlargefactor
    clipbottom = cliptop+(loupeheight*enlargefactor)
    clipleft = (x-minileft)*enlargefactor
    clipright = clipleft+(loupewidth*enlargefactor)



    if (document.all)
    {
    clippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
    document.all.large.style.posTop=largetop-cliptop
    document.all.large.style.posLeft=largeleft-clipleft
    document.all.large.style.clip=clippoints
    }

    if (document.layers)
    {
    document.large.top=largetop-cliptop
    document.large.left=largeleft-clipleft
    document.large.clip.left = clipleft
    document.large.clip.right = clipright
    document.large.clip.top = cliptop
    document.large.clip.bottom = clipbottom
    }

    }



    function setSelectedElem(evt)
    {
    if (isNav)
    {
    var testObj
    var clickX = evt.pageX
    var clickY = evt.pageY

    for (var i = document.layers.length - 1; i >= 0; i--)
    {
    testObj = document.layers[i]

    if ((clickX > testObj.left) &&
    (clickX < testObj.left + testObj.clip.width) &&
    (clickY > testObj.top) &&
    (clickY < testObj.top + testObj.clip.height))
    {
    selectedObj = testObj
    setZIndex(selectedObj, 100)
    return
    }
    }
    }
    else
    {
    var imgObj = window.event.srcElement

    if (imgObj.parentElement.id.indexOf("loupe") != -1)
    {
    selectedObj = imgObj.parentElement.style
    setZIndex(selectedObj,100)
    return
    }

    }

    selectedObj = null

    return

    }



    function dragIt(evt)
    {
    if (selectedObj)
    {
    if (isNav)
    {
    shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY))
    }
    else
    {
    shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY -
    offsetY))
    return false
    }
    }
    }



    function engage(evt) {
    setSelectedElem(evt)

    if (selectedObj) {
    if (isNav) {
    offsetX = evt.pageX - selectedObj.left
    offsetY = evt.pageY - selectedObj.top
    } else {
    offsetX = window.event.offsetX
    offsetY = window.event.offsetY
    }
    }

    return false

    }




    function release(evt) {

    if (selectedObj) {

    setZIndex(selectedObj, 0)

    selectedObj = null

    }

    }




    function setNavEventCapture() {

    if (isNav) {

    document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)

    }

    }





    function init()
    {
    if (document.layers)
    {
    document.large.left=largeleft
    document.large.top=largetop

    document.mini.left=minileft
    document.mini.top=minitop

    document.loupe.left=loupeleft
    document.loupe.top=loupetop

    document.large.clip.left = 0
    document.large.clip.right = 0
    document.large.clip.top = 0
    document.large.clip.bottom = 0

    setNavEventCapture()

    }

    if (document.all)
    {
    document.all.large.style.posLeft=largeleft
    document.all.large.style.posTop=largetop

    document.all.mini.style.posLeft=minileft
    document.all.mini.style.posTop=minitop

    document.all.loupe.style.posLeft=loupeleft
    document.all.loupe.style.posTop=loupetop
    document.all.large.style.clip="rect(0 0 0 0)"
    }

    document.onmousedown = engage
    document.onmousemove = dragIt
    document.onmouseup = release

    }

    ------------------------------------------------------------------------------------------

    Questo permette di passare con una lente su in'immagine poco dettagliata e visualizzare in un riquadro la zona interessata dalla lente, ovviamente ingrandita.

    Però ci sono due incovenienti, intanto ve ne dico uno che è molto importante per me.

    Se utilizzate dei link con riferimenti alle pagine locali che avete creato voi, all'interno della pagina che utilizza lo script sopra, questi non funzioneranno; invece i link con riferimenti a pagine on line funzionano.

    Secondo me c'è qualcosa nello script che impedisce di aprire pagine locali.

    Spero che qualcuno possa aiutarmi

  2. #2
    è pò difficile trovare il problema in una marea di codice come in questo caso....
    ma soprattutto come è integrato nella pagina html? come si fà a provarlo, se non si sà come impostare eventi e su che nodi?
    «Non esiste mondo fuor dalle mura di Verona; ma solo purgatorio, tortura, inferno. Chi è bandito di qui, è bandito dal mondo e l'esilio dal mondo è morte...»
    - William Shakespeare -

  3. #3
    Giusto hai ragione. Si utilizza così:

    --------------------------------------------------------------------------------------------

    <HTML>
    <HEAD>
    <TITLE>Mappa necropoli</TITLE>

    <STYLE TYPE="text/css">
    #loupe {position:absolute;;left:-2000 ;top:0;}
    #mini {position:absolute;left:-2000;top:0;}
    #large {position:absolute;left:-2000;top:0;}




    </STYLE>

    <script language="javascript" src="script/lente1.js"></script>




    </HEAD>
    <BODY>
    <DIV ID="mini">[img]img/mappa_small.png[/img]</DIV>
    <DIV ID="large">[img]img/mappa.jpg[/img]</DIV>
    <DIV ID="loupe">[img]img/lente2.gif[/img]</DIV>



    <script type="text/javascript">
    init();

    </script>

    </BODY>

    </HTML>

    ------------------------------------------------------------------------------------------

    Ah una cosa: questo funziona bene in internet explorer; in firefox lo script neanche viene caricato.

  4. #4
    Vi ho allegato la lente: è una semplice gif fatta con paint shop pro.

    Potete crearla voi e metterne un'altra.
    Immagini allegate Immagini allegate

  5. #5
    Ho reso più semplice il codice dello script così:

    ------------------------------------------------------------------------------------------

    var offsetX, offsetY
    var selectedObj

    var enlargefactor=4

    var largewidth = 3800
    var largeheight = 1275
    var largeleft = 250
    var largetop = 400

    var miniwidth = Math.floor(largewidth/enlargefactor)
    var miniheight = Math.floor(largeheight/enlargefactor)
    var minileft = 50
    var minitop = 30

    var loupewidth = 70
    var loupeheight = 70
    var loupeleft = 120
    var loupetop = 110

    var difleft= largeleft-minileft
    var diftop= largetop-minitop

    var clippoints
    var cliptop = (miniheight-loupeheight)*enlargefactor
    var clipbottom = cliptop+(loupeheight*enlargefactor)
    var clipleft =(miniwidth-loupewidth)*enlargefactor
    var clipright = clipleft+(loupewidth*enlargefactor)


    function setZIndex(obj, zOrder) {
    obj.zIndex = zOrder
    }

    function shiftTo(obj, x, y) {

    obj.pixelLeft = x
    obj.pixelTop = y


    cliptop = (y-minitop)*enlargefactor
    clipbottom = cliptop+(loupeheight*enlargefactor)
    clipleft = (x-minileft)*enlargefactor
    clipright = clipleft+(loupewidth*enlargefactor)



    if (document.all)
    {
    clippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
    document.all.large.style.posTop=largetop-cliptop
    document.all.large.style.posLeft=largeleft-clipleft
    document.all.large.style.clip=clippoints
    }

    if (document.layers)
    {
    document.large.top=largetop-cliptop
    document.large.left=largeleft-clipleft
    document.large.clip.left = clipleft
    document.large.clip.right = clipright
    document.large.clip.top = cliptop
    document.large.clip.bottom = clipbottom
    }

    }



    function setSelectedElem(evt)
    {

    var imgObj = window.event.srcElement

    if (imgObj.parentElement.id.indexOf("loupe") != -1)
    {
    selectedObj = imgObj.parentElement.style
    setZIndex(selectedObj,100)
    return
    }



    selectedObj = null

    return

    }



    function dragIt(evt)
    {
    if (selectedObj)
    {


    shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY - offsetY))
    return false

    }
    }


    function engage(evt) {
    setSelectedElem(evt)

    if (selectedObj) {

    offsetX = window.event.offsetX
    offsetY = window.event.offsetY

    }

    return false

    }

    function release(evt) {

    if (selectedObj) {

    setZIndex(selectedObj, 0)

    selectedObj = null

    }

    }


    function init()
    {
    if (document.layers)
    {
    document.large.left=largeleft
    document.large.top=largetop

    document.mini.left=minileft
    document.mini.top=minitop

    document.loupe.left=loupeleft
    document.loupe.top=loupetop

    document.large.clip.left = 0
    document.large.clip.right = 0
    document.large.clip.top = 0
    document.large.clip.bottom = 0



    }

    if (document.all)
    {
    document.all.large.style.posLeft=largeleft
    document.all.large.style.posTop=largetop

    document.all.mini.style.posLeft=minileft
    document.all.mini.style.posTop=minitop

    document.all.loupe.style.posLeft=loupeleft
    document.all.loupe.style.posTop=loupetop
    document.all.large.style.clip="rect(0 0 0 0)"
    }

    document.onmousedown = engage
    document.onmousemove = dragIt
    document.onmouseup = release

    }

    -----------------------------------------------------------------------------------------

    Vi prego aiutatemi, è importante

  6. #6
    Guardate, non so perchè ne come ma copiando e incollando il codice in un altro file funziona tutto.

    Scusate per il disturbo

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.