Demo Dynamic HTML - Scroller de texto al paso del ratón

HTMLpoint.com

Scroller de texto con el ratón

Compatibilidad: Ms Internet Explorer, Netscape

Excelente demo que genera una ventana independiente dentro del documento. Dicha ventana puede contener imágenes y texto que se deslizan al pasar el cursor del ratón por encima de las imágenes externas de la misma. Otro botón permite volver al punto superior de la ventana. ¡Prueba!.

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

<HTML>
<HEAD>

<TITLE>Demo Dynamic HTML: ejemplo práctico </TITLE>

<SCRIPT>

function tmt_scrollLayerBy(bersaglio, dx, dy, vel) {
    if (document.layers) {
        turi = document.layers[bersaglio];
        var cl = turi.clip.left;
        var ct = turi.clip.top;
        var cr = turi.clip.right;
        var cb = turi.clip.bottom;
        var l = turi.left;
        var t = turi.top;
        turi.clip.left = cl + dx;
        turi.clip.top = ct + dy;
        turi.clip.right = cr + dx;
        turi.clip.bottom = cb + dy;
        turi.top = t - dy;
        turi.left = l - dx;
    } else {
        if (document.all) {
            turi = eval("document.all." + bersaglio + ".style");
            if (turi.clip) {
                var clipv = turi.clip.split("rect(")[1].split(")")[0].split("px");
                var ct = Number(clipv[0]);
                var cr = Number(clipv[1]);
                var cb = Number(clipv[2]);
                var cl = Number(clipv[3]);
                var l = turi.pixelLeft;
                var t = turi.pixelTop;
            }
            ncl = cl + dx;
            nct = ct + dy;
            ncr = cr + dx;
            ncb = cb + dy;
            turi.pixelTop = t - dy;
            turi.pixelLeft = l - dx;
            eval("turi.clip = 'rect(' + nct + ' ' +  ncr + ' ' + ncb + ' ' + ncl +')'");
        }
    }
    tmt_scrollalo = setTimeout("tmt_scrollLayerBy('" + bersaglio + "'," + dx + "," + dy + "," + vel + ")", vel);
}

function tmt_stopScroll() {
    if (tmt_scrollalo) {
        clearTimeout(tmt_scrollalo);
    }
}

if (document.layers) {
origWidth = innerWidth;
origHeight = innerHeight;}
function reDo() {
if (innerWidth != origWidth || innerHeight != origHeight)
location.reload();}
if (document.layers) onresize = reDo;

</SCRIPT>

</HEAD>

<BODY bgcolor="white" >

<div id="scroller" style="position:absolute; width:50px; left: 130px; top: 160px"> 
<div align="center">
<a href="#" onMouseOver="tmt_scrollLayerBy('scrollo',0,3,5)" onMouseOut="tmt_stopScroll()"><img name="scroller01" src="scroller01.gif" border="0" alt="Su"></a>
<a href="#" onClick="location.reload()"><img name="scroller02" src="scroller02.gif" alt="Inizio" border="0" vspace=12></a>
<a href="#" onMouseOver="tmt_scrollLayerBy('scrollo',0,-3,5)" onMouseOut="tmt_stopScroll()"><img name="scroller03" src="scroller03.gif" border="0" alt="Giù"></a>
</div>
</div>

<div id="scrollo" style="position:absolute; width:320px; height:200px; left: 280px; top: 150px; clip: rect(0 300 150 0)">

HTMLpoint<BR>
HTMLpoint<BR>
HTMLpoint<BR>
HTMLpoint<BR>
HTMLpoint<BR>
HTMLpoint<BR>
HTMLpoint<BR>
HTMLpoint<BR>
HTMLpoint<BR>
HTMLpoint<BR>
HTMLpoint<BR>
HTMLpoint<BR>
HTMLpoint<BR>
HTMLpoint<BR>

</div>

</body>
</html>

[Baja en un único archivo .zip, las imágenes y demás archivos necesarios
para el funcionamiento de las demo de esta sección]