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