Boton "adelante" fija sobre texto

sputnik · #1 (**permalink**) 19/06/2003, 13:06

Hola!

Como es posible fijar una imagen sobre un texto que se mueve con el scroll??

Es que quiero poner un botón de adelante, pero me gustaría que estuviese accesible todo el tiempo y para eso tendría que ser estático.

Alguien puede ayudarme??

Gracias!!

regui · #2 (**permalink**) 19/06/2003, 13:40

si he entendido bien, tu quieres tener un texto y que de fondo haya una imagen que simule un botón no?
Porque no lo metes dentro de una tabala y de fondo del td le pones la imagen y en el td el texto?
Creo que es lo que quieres, si no es eso explicanos un poco mejor.

sputnik · #3 (**permalink**) 19/06/2003, 13:44

mmm no
Quiero tener un texto, y sobre este un botón (que será un gif d eimagen) que en cuanto clickees encima pase de página. Es decir, un botón de adelante.

La cuestión es que el texto está dentro de un iframe y el botón no quiero ponerlo al final de todo el texto, sino que cuando tu desplaces el scroll y el texto se mueva el botón vaya de acorde.

Algo así como un anclaje. No se si me explico. El caso es que no tengo ni idea de como hacerlo

regui · #4 (**permalink**) 19/06/2003, 13:55

Perdona, pero no termino de entender, cuando dices una imagen encima de un texto, no te refieres a capas verdad? te refieres a colocación por orden, primero el botón y luego el texto no?
Entonces que es lo que quieres hacer, poner la imagen y luego el texto verdad? Pues solo tienes que poner la imagen dentro del IFRAME pero delante del texto.
A lo mejor sigo sin enterarme de lo que quieres hacer, si no es eso me lo dices.

sputnik · #5 (**permalink**) 19/06/2003, 14:02

Creo que va a ser lo de las capas.

Lo que yo queria decir es que el texto se desplazase y el boton permaneciese en la misma posicion de pantalla. Encima del texto, superpuesto, de manera que todo el texto cuando se desplaza va quedando debajo del botón

Algo asi como cuando fijas el backgorund pero con una imagen pequeña, que además tiene función y que tiene que estar por delante.

Si sigo sin explicarme buscare un ejemplo en alguna pagina, es que ahora no recuerdo donde lo he visto.

tunait · #6 (**permalink**) 19/06/2003, 14:15

El botón lo quieres arriba o abajo? derecha o a la izquierda?

regui · #7 (**permalink**) 19/06/2003, 14:16

Ok, ya entiendo perfectamente lo que quieres hacer. Lo que se me ocurre es que pongas el botón justo encima del IFRAME, pero fuera, asi el scroll está en el IFRAME pero no mueve el botón.

sputnik · #8 (**permalink**) 19/06/2003, 18:22

Uf, me sentía mal viendo que no me explicaba.

Si lo pongo fuera del iframe rompe el diseño, y además, para cada página que se cargue el enlace será diferente

El botón lo quiero abajo a la izquierda abajo.

regui · #9 (**permalink**) 20/06/2003, 03:11

Y no puedes hacer un poco menos alto el IFRAME y poner el botón? Es que poner el botón dentro del IFRAME va a hacer que se mueva obligatoriamente. A no ser que lo pongas en una capa y hagas que esa capa siempre esté fija, pero eso tiene que ser por javascript, a ver si alguien conoce un script para que la capa no se mueva cuando mueves el scroll.

tunait · #10 (**permalink**) 20/06/2003, 03:55

Te paso el script versión completa, por si decides finalmente ponerlo en otra posición.

Mete tu botón de adelante en una capa y dale por id "boton"

<div id="boton" style="position:absolute; width:20px; height:24px; z-index:1"><img src="botoncillo.gif" width="24" height="25"></div>

Luego pon esto entre <head> y </head>

<script language="JavaScript">
//Script por Tunait!
var anchoImagen=24 //define aquí la anchura de tu imagen
var altoImagen=30 //define aquí la aletura de tu imagen

function posicion()
{
if(navigator.appName=="Netscape")
{
var anchoventana=window.innerWidth - 20;
var altoventana=window.innerHeight ;
var scrollarriba=window.pageYOffset;
var scrollizquierda=window.pageXOffset;
}
else
{
var anchoventana=document.body.clientWidth;
var altoventana=document.body.clientHeight;
var scrollarriba=document.body.scrollTop;
var scrollizquierda=document.body.scrollLeft;
}
var derecha = anchoventana-anchoImagen
var izquierda = scrollizquierda
var arriba = scrollarriba
var abajo = scrollarriba + (altoventana - altoImagen)

var posizquierda=derecha; //define si lo quieres a izquierda o derecha
var posarriba=abajo; //define si lo quieres arriba o abajo

document.getElementById('boton').style.top=posarri ba;
document.getElementById('boton').style.left=posizq uierda;
pepe=window.setTimeout('posicion()',50)
}
</script>

A body le añades .....

<body onload="posicion()">

Y te habría de funcionar

tunait · #11 (**permalink**) 20/06/2003, 05:10

.... y nos vamos al foro de javascript

sputnik · #12 (**permalink**) 21/06/2003, 03:03

GENIAL!!!!Gracias!! Era exactamente lo que quería!

Funciona perfectamente, lo que pasa es que ahora me aparece un scroll en la barra horizontal. Tiene que ver con las variables de posición que has creado??

Las puedo modificar para que no me aparezcao?? o tiene que ver con la posición de la capa donde esta el boton?

Saludos!

Bravenap · #13 (**permalink**) 21/06/2003, 03:53

Prueba a mover la capa del botón un poco más a la izquierda.
Por ejemplo:

var posizquierda=derecha-10; //define si lo quieres a izquierda o derecha

Suerte.

Bravenap · #14 (**permalink**) 21/06/2003, 04:05

Por cierto, este script de Tunait (

) está muy bien, pero puede que tenga un problemilla. La imagen parpadea al moverse el scroll porque tiene que ir cambiando la posición de la capa. No sé si aumentando la velocidad de la función, aunque ya está a 50 milisegundos.

Otra opción es que sea el contenido el que se mueva hacia arriba o hacia abajo al estar metido en una capa y sean dos imágenes del botón las que determinan si sube o baja. Evidentemente, la barra de desplazamiento ya no funciona. Hemos tratado en varias ocasiones este tema con diversos resultados. Búscalo por los foros.

De todas formas, si no quieres complicarte mucho la vida la de Tunait es sin duda la mejor solución, salvo por ese pequeño "inconveniente".

sputnik · #15 (**permalink**) 21/06/2003, 04:17

Lo de la posición creo que es culpa del estilo que he impuesto. Todas las primeras líneas tienen una sangría, y me parece que interpreta la capa de botón como una línea, con lo que la desplaza. Supongo que debe ir por ahí, pq he probado el script en un archivo de prueba que no tiene estilo y ya no sale el scroll horizontal.

No he entendido mucho eso de de las capas y lo de las dos imágenes del botón las que determinen si sube o baja. La verdad es que es la primera vez que uso esto de las capas (de hecho es la primera página decente que intento hacer), pero ya lo miraré como me indicas

Por el momento el script de tunait me parece maravilloso pq me ha solucionado el problema!!!! (gracias!!!!!!)

Bravenap · #16 (**permalink**) 21/06/2003, 04:25

Mira, me refiero a algo como esto:http://personales.ya.com/pyrus/scroll.htm . Pero no te preocupes si de momento con lo que ya tienes te vale, magnífico.

Un saludo.

sputnik · #17 (**permalink**) 21/06/2003, 05:02

Uaaaala!!! Pinta complicado!!

Me miraré el código, ya veo lo que querías decir. Ahora solo falta entender como va, jeje ^_^!

Saludos y Gracias!

tunait · #18 (**permalink**) 21/06/2003, 05:55

Hola de nuevo

Si quisieras usar la forma que propone bravenap de dejar el botón fijo y hacer que lo que se mueva sea el texto dentro de una capa no necesitas ningún script, basta con que a tu capa le pongas la propiedad overflow:auto y te pone una barra de scroll normal y corriente.

Con el script que te propone bravenap te quedará más bonito, eso sí, pero cuidado que no va en ns

saludooos