Foros del Web » Creando para Internet » HTML »

Imagenes que hagan de scroll

Estas en el tema de Imagenes que hagan de scroll en el foro de HTML en Foros del Web. Hola gente!! Sabéis si hay alguna forma de hacer que, dos imagenes (por ejemplo una de una flecha hacia arriba y otra de una flecha ...
  #1 (permalink)  
Antiguo 27/09/2004, 18:13
Avatar de renton  
Fecha de Ingreso: enero-2004
Ubicación: BCN (PPCC)
Mensajes: 573
Antigüedad: 13 años, 10 meses
Puntos: 1
Imagenes que hagan de scroll

Hola gente!!
Sabéis si hay alguna forma de hacer que, dos imagenes (por ejemplo una de una flecha hacia arriba y otra de una flecha hacia abajo) puedan hacer de Scroll?
Es decir, si clickas o pasas el ratón por encima de la imagen de la flecha hacia arriba, el Scroll sube. Y al revés con la otra imagen
Lo he visto hecho en Flash pero, en HTML o Javascript es posible?

Mil Gracias!!
__________________
"No et limites a contemplar aquestes hores que ara venen, baixa al carrer i participa.
No podran res davant un poble unit, alegre i combatiu!!"
  #2 (permalink)  
Antiguo 07/10/2004, 14:12
 
Fecha de Ingreso: junio-2003
Mensajes: 8
Antigüedad: 14 años, 5 meses
Puntos: 0
Hola Renton:
Te paso el código tomado de "http://javascriptsource.com"
***inicio***
<HTML>
<!-- TWO STEPS TO INSTALL PAGE SCROLLER:

1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->

<HEAD>

<style type="text/css">
#item {position:absolute; visibility:hidden; left:0px}
</style>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Brian Gosselin ([email protected]) -->
<!-- Web Site: http://www.bgaudiodr.iwarp.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var isNS=(document.layers);
var _all=(isNS)? '' : 'all.' ;
var _style=(isNS)? '' : '.style' ;
var _visible=(isNS)? 'show' : 'visible';
var w_x, w_y, item, okscroll=false, godown;
function init(){
item=eval('document.'+_all+'item'+_style);
getwindowsize();
item.visibility=_visible;
scrollpage();
}
function getwindowsize() {
w_x=(isNS)? window.innerWidth-5 : document.body.clientWidth;
w_y=(isNS)? window.innerHeight : document.body.clientHeight;
(isNS)? item.clip.width=42: item.width=42;
(isNS)? item.clip.height=20 : item.height=20;
moveitem();
}
function resizeNS() {
setTimeout('document.location.reload()',400);
}
function moveitem() {
if (isNS) {
item.moveTo((pageXOffset+w_x-70),(w_y+pageYOffset-50))
}else{
item.pixelLeft=document.body.scrollLeft+w_x-70;
item.pixelTop=w_y+document.body.scrollTop-50;
}
}
window.onload=init;
(isNS) ? window.onresize=resizeNS : window.onresize=getwindowsize ;
function scrollpage() {
status = '';
if (okscroll) {
if (godown) {
(isNS)? window.scrollBy(0,4) : window.scrollBy(0,4) ;
} else {
(isNS)? window.scrollBy(0,-4) : window.scrollBy(0,-4) ;
}
}
moveitem();
setTimeout('scrollpage()', 40);
}
// End -->
</script>
</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document -->

<BODY>

<div id="item">
<a href="javascript:void(0)" onMouseover="okscroll=true; godown=true"
onMouseout="okscroll=false"><img src="down.gif" border="0"></a><a href="javascript:void(0)"
onMouseover="okscroll=true; godown=false" onMouseout="okscroll=false"><img src="up.gif"
border="0"></a>
</div>

<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

</BODY>
</HTML>
*** fin ***
Solo tenés
  #3 (permalink)  
Antiguo 07/10/2004, 14:14
 
Fecha de Ingreso: junio-2003
Mensajes: 8
Antigüedad: 14 años, 5 meses
Puntos: 0
Hola Renton:
Te paso el código tomado de "http://javascriptsource.com"
***inicio***
<HTML>
<!-- TWO STEPS TO INSTALL PAGE SCROLLER:

1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->

<HEAD>

<style type="text/css">
#item {position:absolute; visibility:hidden; left:0px}
</style>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Brian Gosselin ([email protected]) -->
<!-- Web Site: http://www.bgaudiodr.iwarp.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var isNS=(document.layers);
var _all=(isNS)? '' : 'all.' ;
var _style=(isNS)? '' : '.style' ;
var _visible=(isNS)? 'show' : 'visible';
var w_x, w_y, item, okscroll=false, godown;
function init(){
item=eval('document.'+_all+'item'+_style);
getwindowsize();
item.visibility=_visible;
scrollpage();
}
function getwindowsize() {
w_x=(isNS)? window.innerWidth-5 : document.body.clientWidth;
w_y=(isNS)? window.innerHeight : document.body.clientHeight;
(isNS)? item.clip.width=42: item.width=42;
(isNS)? item.clip.height=20 : item.height=20;
moveitem();
}
function resizeNS() {
setTimeout('document.location.reload()',400);
}
function moveitem() {
if (isNS) {
item.moveTo((pageXOffset+w_x-70),(w_y+pageYOffset-50))
}else{
item.pixelLeft=document.body.scrollLeft+w_x-70;
item.pixelTop=w_y+document.body.scrollTop-50;
}
}
window.onload=init;
(isNS) ? window.onresize=resizeNS : window.onresize=getwindowsize ;
function scrollpage() {
status = '';
if (okscroll) {
if (godown) {
(isNS)? window.scrollBy(0,4) : window.scrollBy(0,4) ;
} else {
(isNS)? window.scrollBy(0,-4) : window.scrollBy(0,-4) ;
}
}
moveitem();
setTimeout('scrollpage()', 40);
}
// End -->
</script>
</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document -->

<BODY>

<div id="item">
<a href="javascript:void(0)" onMouseover="okscroll=true; godown=true"
onMouseout="okscroll=false"><img src="down.gif" border="0"></a><a href="javascript:void(0)"
onMouseover="okscroll=true; godown=false" onMouseout="okscroll=false"><img src="up.gif"
border="0"></a>
</div>

<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

</BODY>
</HTML>
*** fin ***
Solo tenés que conseguirte un par de .gif con la imágen que desees.
  #4 (permalink)  
Antiguo 07/10/2004, 16:28
 
Fecha de Ingreso: octubre-2004
Mensajes: 10
Antigüedad: 13 años, 2 meses
Puntos: 0
Uff... el que te ha pasado Rosarino es simplemente perfecto....

Aqui tienes una mas tosca y limitada contribucion:

<a href="javascript:scrollBy(0,10);">UP</a>

Para el otro sentido seria poner -10 en lugar de 10.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:27.