Scorrimento immagine dentro un riquadro

**ghini76** · 05-03-2004, 22:47

Ciao a tutti,
ho fatto questo script...

codice:

<head>
<title>Nuova pagina 1</title>
<SCRIPT LANGUAGE="JavaScript">
<!--

n = (document.layers) ? 1:0
ie = (document.all) ? 1:0

function init() {
	if (n) block = document.ImageDiv
	if (ie) block = ImageDiv.style
	block.xpos = parseInt(block.left)
	block.active = 0
}

function move_left() {
	if (block.active) {
		block.xpos -= 5
		block.left = block.xpos
		setTimeout("move_left()",30)
	}
}
function move_right() {
	if (block.active) {
		block.xpos += 5
		block.left = block.xpos
		setTimeout("move_right()",30)
	}
}

//-->
</SCRIPT>
</head>

<body topmargin="0" leftmargin="0" onLoad="init()">


</p>



SINISTRA

DESTRA
</p>

<div align="center" ID="Mask" style="position:absolute; left:50px; top:250px; width:200px; height:150px">
	<div ID="ImageDiv" style="position:absolute; left:50; top:250; width:30">
		[img]..\images\logohp1.gif[/img]
	</div>
</div>
</body>

...che mi permette di muovere a destra e sinistra un'immagine cambiando le coordinate assolute del DIV che la contiene (ImageDiv). Volevo però che lo scorrimento di questa immagine fosse limitato da un riquadro... come se quell'immagine si muovesse dietro alla pagina e il riquadro fosse un "buco" sulla pagina... quindi l'immagine raggiunto il bordo non si deve bloccare ma proseguire venendo troncata della parte sporgente.

SPERO TANTO DI ESSERMI SPIEGATO!!!

Ho provato a racchiudere il DIV dell'immagine in altro DIV ma non funziona.

Avete consigli?

Ciao e grazie

**Luxx100** · 06-03-2004, 23:50

L'idea è simpatica, i due livelli, uno nell'altro, stanno bene così:
per vedere l'immagine scorrere in un riquadro, questo deve essere visibile, giusto? Quindi diamo un bordo a tuo DIV Mask, ad es.:

codice:

border: 1px solid black;

il bordo puo anche essere diverso: ridge, groove, etc.
poi se vuoi l'effetto che chiedevi devi aggiungere sempre allo style di Mask questo attributo:

codice:

overflow: hidden

quindi il tuo DIV 'contenitore' sarà:

codice:

<div align="center" ID="Mask" style="position:absolute; left:50px; top:250px; width:200px; height:150px">

Ho aggiunto poi una funzione che ferma lo scorrimento dell'immagine quando arriva a 10px dal bordo dx o sx della Mask, va raffinata ma per ora rende l'idea, ecco quindi la tua pagina rivisitata

codice:

<HTML>

<HEAD>
<TITLE>SINISTRA DESTRA</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--
n = (document.layers) ? 1:0
ie = (document.all) ? 1:0

function init() {
	if (n) block = document.ImageDiv
	if (ie) block = ImageDiv.style
////////////////////////////////////////////////
// nuove variabili inserite ////////////////////
	if (n) W = parseInt(document.Mask.width)
	if (n) L = parseInt(document.Mask.left)
	if (ie) W = parseInt(Mask.style.width)
	if (ie) L = parseInt(Mask.style.left)
	marginRight = W+L  /* margine destro del DIV contenitore */
/////////////////////////////////////////////	 	
	block.xpos = parseInt(block.left)
	block.active = 0
}

function move_left() {
	if (block.active) {
		block.xpos -= 5
		block.left = block.xpos
		setTimeout("move_left()",30)
	}
}
function move_right() {
	if (block.active) {
		block.xpos += 5
		block.left = block.xpos
		setTimeout("move_right()",30)
	}
}

///////////////////////////////////////
/* funzione aggiuntiva per fermare 
lo scorrimento in prossimità dei bordi 
del DIV contenitore */
/////////////////////////////////////////
function stopIt(){
	if (block.xpos >= (marginRight-60)){  // ferma l'immagine a 10px dal bordo destro del contenitore
	block.active = 0
	}
	if (block.xpos <= (L-240)){ // ferma l'immagine a 10px dal bordo sinistro del contenitore
	block.active = 0
	}
// la stringa qui sotto serve solo per effettuare un controllo della posizione di "block" 
window.status=parseInt(block.xpos)

}
setInterval("stopIt()", 10) // ripete il controllo della posizione ogni 10 millisec
//-->
</SCRIPT>
</HEAD>

<BODY topmargin="20px" leftmargin="0px" onload="init();">



SINISTRA 
DESTRA 
<DIV align="center" ID="Mask" style="position: absolute; left: 50px; top: 250px; width: 200px; height:150px; border: 1px solid black; overflow: hidden">
   Sorpresa! <DIV ID="ImageDiv" style="position:absolute; left:0; top:0; width:200px">
      [img]Immagine1.jpg[/img]</DIV>
</DIV>
</BODY>
</HTML>

Visto che hai fissato degli spostamenti di 5 px, perchè possa funzionare lo stop, è ovvio che sia la Mask che l'immagine devono avere una dimensione orizzontale divisibile per 5.
Infine due consigli:
1 - evita di usare la parola 'block' per le variabili perchè come saprai 'block' è uno dei possibili stai del 'display' (none , block , inline) qiundi può creare confusione.
2 - tieni sufficientemente lontani i pulsanti di attivazione del movimento perchè nel passare dall'uno all'altro velocemante le due funzioni richiamate si sovrappongono dando luogo ad un fastidioso effetto tremolante.

**ghini76** · 16-03-2004, 14:43

Ciao,
finalmente ho avuto tempo per dare un'occhiata al tuo script...
grazie!
Mi hai dato lo spunto che mi mancava... infatti ho fatto qualche altra modifica allo script ora dovrebbe andare ancora meglio!!
Dagli un'occhiata e dimmi che ne pensi...

codice:

<html>
<HEAD>
<TITLE>SINISTRA DESTRA</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--
n = (document.layers) ? 1:0
ie = (document.all) ? 1:0
larimg=800

function init() {
	if (n) ImgBlock = document.ImageDiv
	if (ie) ImgBlock = ImageDiv.style
	if (n) W = parseInt(document.Mask.width)
	if (n) L = parseInt(document.Mask.left)
	if (ie) W = parseInt(Mask.style.width)
	if (ie) L = parseInt(Mask.style.left)
	marginRight = W+L  /* margine destro del DIV contenitore */
	ImgBlock.xpos = parseInt(ImgBlock.left)
	ImgBlock.active = 0
}

function move_left() {
	if (ImgBlock.active) {
		if (ImgBlock.xpos > (L-(larimg-150))) {
		ImgBlock.xpos -= 5
		ImgBlock.left = ImgBlock.xpos
		setTimeout("move_left()",30)
		}
	}
}
function move_right() {
	if (ImgBlock.active) {
		if (ImgBlock.xpos != 0) {
		ImgBlock.xpos += 5
		ImgBlock.left = ImgBlock.xpos
		setTimeout("move_right()",30)
		}
	}
}

function stopIt(){
	if (ImgBlock.xpos >= (marginRight-250)){  // ferma l'immagine a 10px dal bordo destro del contenitore
	ImgBlock.active = 0
	}
	if (ImgBlock.xpos <= (L-(larimg-250))){ // ferma l'immagine a 10px dal bordo sinistro del contenitore
	ImgBlock.active = 0
	}
}
setInterval("stopIt()", 10) // ripete il controllo della posizione ogni 10 millisec
//-->
</SCRIPT>
</HEAD>

<BODY topmargin="20px" leftmargin="0px" onload="init();">

<DIV align="center" ID="Mask" style="position: absolute; left: 50px; top: 250px; width: 300px; height:150px; border: 1px solid black; overflow: hidden">
	<DIV ID="ImageDiv" style="position:absolute; left:0; top:0; width:800px">
		<map name="FPMap0">
			<area href="dett.asp?imgID=1" shape="rect" coords="10, 10, 100, 140">
			<area href="dett.asp?imgID=2" shape="rect" coords="110, 10, 200, 140">
			<area href="dett.asp?imgID=3" shape="rect" coords="210, 10, 300, 140">
		</map>
		[img]prova.jpg[/img]
	</DIV>
</DIV>
<DIV ID="pul_sx" style="position:absolute; left:25; top:250; width:25px height:150px;" onMouseOver="ImgBlock.active=1; move_right()" onMouseOut="ImgBlock.active=0">
	[img]../images/pulsx.gif[/img]
</DIV>
<DIV ID="pul_dx" style="position:absolute; left:350; top:250; width:25px height:150px;" onMouseOver="ImgBlock.active=1; move_left()" onMouseOut="ImgBlock.active=0">
	[img]../images/puldx.gif[/img]
</DIV>



</p>


</p>


</p>
</BODY>
</HTML>

In pratica ho allargato la finestra di scorrimento; ho modificato gli "stop" dello scorrimento in modo che non venga mostrato lo sfondo; ho cambiato i pulsanti per lo scorrimento...

Ciao e grazie dell'aiuto

**ghini76** · 16-03-2004, 15:28

forse l'ho otimizzata ancora un po'...
mi funziona lo stesso senza la funzione di stop... ho aggiunto lo stop in pratica direttamente nelle funzioni di move...
a me funziona! Se vuoi prova anche te...

codice:

<SCRIPT LANGUAGE="JavaScript">
<!--
n = (document.layers) ? 1:0
ie = (document.all) ? 1:0
larimg=2000

function init() {
	if (n) ImgBlock = document.ImageDiv
	if (ie) ImgBlock = ImageDiv.style
	if (n) W = parseInt(document.Mask.width)
	if (n) L = parseInt(document.Mask.left)
	if (ie) W = parseInt(Mask.style.width)
	if (ie) L = parseInt(Mask.style.left)
	marginRight = W+L  /* margine destro del DIV contenitore */
	ImgBlock.xpos = parseInt(ImgBlock.left)
	ImgBlock.active = 0
}

function move_left() {
	if (ImgBlock.active) {
		if (ImgBlock.xpos > (L-(larimg-250))) {
		ImgBlock.xpos -= 5
		ImgBlock.left = ImgBlock.xpos
		setTimeout("move_left()",30)
		}
	}
}
function move_right() {
	if (ImgBlock.active) {
		if (ImgBlock.xpos != 0) {
		ImgBlock.xpos += 5
		ImgBlock.left = ImgBlock.xpos
		setTimeout("move_right()",30)
		}
	}
}
//-->
</SCRIPT>

Ciao

**Luxx100** · 18-03-2004, 18:09

A parte le immagini che ovviamente io non ho, mi pare che vada bene, immagino che lo scorrimento 'bloccato' verso destra sia voluto.

Oltre che scambiare l'ordine dei pulsanti, io farei scorrere l'immagine anche verso destra, e poi bisognerebbe trovare il sistema per assegnare ad un terzo pulsante la funzione di 'ripristino' della posizione orginale, che ne pensi?

**ghini76** · 18-03-2004, 18:19

si potrebbe essere un'idea... ci proverò.

A me l'immagine scorre verso destra! A te no? Che browser utilizzi?

**Luxx100** · 19-03-2004, 02:02

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

codice:

<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>

e questo è il BODY

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">
   &lt;
   </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">
   &gt;
   </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>

Che dici, ci siamo?

**SpinoWeb** · 21-08-2005, 04:23

sono alla ricerca di uno script che faccia proprio questo, sapete dove posso trovarne uno funzionante?

Discussione: Scorrimento immagine dentro un riquadro

Strumenti discussione

Ricerca discussione

Visualizza

Scorrimento immagine dentro un riquadro

Permessi di invio