Ho inserito due nuove variabili per far sì che lo stop dello scorrimento avenga sempre ai margini della Mask indipendentemente dalla larghezza di ImageDiv.
Ho messo l'immagine al centro della Mask come posizione di partenza.
Ho sostituito le immagini delle frecce (che ovviamente non ho) con due pulsanti (button).
I pulsanti spariscono e ricompaiono alternativamente quando l'immagine arriva al limite dx o sx.
Ho inserito un doppio-click sulla Mask per 'ripristinare' l'immagine al centro (o alla posizione originale), ma non sono ancora riuscito a perfezionare la funzione che dovrebbe fare ciò.
Ho aggiunto la possibilità di 'draggare' l'immagine nella Mask, vincolando il trascinamento all'asse X (lo script non è mio), però in questo caso andrebbe perfezionato il tutto per proseguire lo scorrimento.
Eccoti il codice:
nell'HEAD
e questo è il BODYcodice:<SCRIPT LANGUAGE="JavaScript"> <!-- n = (document.layers) ? 1:0 ie = (document.all) ? 1:0 function init() { if (n) ImgBlock = document.ImageDiv if (ie) ImgBlock = ImageDiv.style if (n) W = parseInt(document.Mask.width) if (ie) W = parseInt(Mask.style.width) if (n) L = parseInt(document.Mask.left) if (ie) L = parseInt(Mask.style.left) if (n) IW = parseInt(document.ImageDiv.width) // larghezza div Immagine if (ie) IW = parseInt(ImageDiv.style.width) // larghezza div Immagine ImgBlock.xpos = parseInt(ImgBlock.left) ImgBlock.active = 0 } function move_left() { if (ImgBlock.active) { if (ImgBlock.xpos > (L-(IW+L))) { // scorre fino a che il margine destro dell'immagine non coincide con il margine sx della maschera ImgBlock.xpos -= 5 ImgBlock.left = ImgBlock.xpos pul_dx.style.display='block' setTimeout("move_left()",30) } } // il pulsante sinistro scompare quando l'immagine è arrivata al limite sx if (ImgBlock.xpos <= (L-(IW+L))) { pul_sx.style.display='none' } } function move_right() { if (ImgBlock.active) { if (ImgBlock.xpos < (W)) { ImgBlock.xpos += 5 ImgBlock.left = ImgBlock.xpos pul_sx.style.display='block' setTimeout("move_right()",30) } } // il pulsante destro scompare quando l'immagine è arrivata al limite dx if (ImgBlock.xpos >= (W)) { pul_dx.style.display='none'; } } function resetImg() { alert('C\'ho provato, \nma non ci sono ancora riuscito!') } //--> </SCRIPT>
Che dici, ci siamo?codice:<BODY topmargin="20px" leftmargin="0px" onload="init();"> <DIV align="center" ID="Mask" onDblClick="resetImg()" style="overflow: hidden; position: absolute; left: 50px; top: 250px; width: 300px; height:150px; border: 1px solid black; background-color: #C0C0C0"> <FONT color="#FFFFFF">fai doppioclick qui per riportare l'immagine al centro</FONT> <DIV ID="ImageDiv" class="drag" style="position:absolute; left:-400px; top:0px; width:800px"> [img]immagine800x150.jpg [/img]</DIV> </DIV> <DIV ID="pul_sx" style="position:absolute; left:25; top:250; width:25px height:150px; padding-top: 62.5" onMouseOver="ImgBlock.active=1; move_left()" onMouseOut="ImgBlock.active=0"> <BUTTON name="Left" style="width: 25; height: 25; padding-bottom: 2"> < </BUTTON></DIV> <DIV ID="pul_dx" style="position:absolute; left:350; top:250; width:25px height:150px; padding-top: 62.5" onMouseOver="ImgBlock.active=1; move_right()" onMouseOut="ImgBlock.active=0"> <BUTTON name="Right" style="width: 25; height: 25; padding-bottom: 2"> > </BUTTON></DIV> <SCRIPT LANGUAGE="JavaScript"> <!-- // Metodo generico per rendere 'trascinabile" qualunque oggetto nella pagina /*********** l'oggetto o gli oggetti vanno contrassegnati con la classe "drag" : class="drag" ***************/ //Generic Drag Script- © Dynamic Drive var ie=document.all var ns6=document.getElementById&&!document.all var dragapproved=false var z,x,y function move(e){ if (dragapproved){ z.style.left=ns6? temp1+e.clientX-x: temp1+event.clientX-x // z.style.top=ns6? temp2+e.clientY-y : temp2+event.clientY-y // con questa modifica il livello si muove solo sull'asse x (by Luxx - Studio100%) return false } } function drags(e){ if (!ie&&!ns6) return var firedobj=ns6? e.target : event.srcElement var topelement=ns6? "HTML" : "BODY" while (firedobj.tagName!=topelement&&firedobj.className!="drag"){ firedobj=ns6? firedobj.parentNode : firedobj.parentElement } if (firedobj.className=="drag"){ dragapproved=true z=firedobj temp1=parseInt(z.style.left+0) // temp2=parseInt(z.style.top+0) x=ns6? e.clientX: event.clientX y=ns6? e.clientY: event.clientY document.onmousemove=move return false } } document.onmousedown=drags document.onmouseup=new Function("dragapproved=false") // document.write("<style type='text/css'> .drag {cursor :move} <\/style\>"); // attribuisce il cursore "move" alla classe drag (by Luxx - Studio100%) //--> </SCRIPT> </BODY>

Rispondi quotando