Insertar un Botón que se desplace

srgsus · #1 (**permalink**) 10/09/2011, 12:20

Hola a todos

Necesito mostrar una actualización de una página en mi sitio, pero no quisiera que fuera un "Pop-Up" por que muchos las tienen bloqueadas, en realidad la idea sería mostrar un botón fijo (que no se mueva con el desplazamiento de la página) posicionado en la mitad del margen derecho y que al accionarlo, se desplace hacia el centro y muestre una imagen o una leyenda que diga por ejemplo: "visite esta página", no se si es mucho pedir o si es problemático, o también si saben de alguna web que genere dicho código, mi problema es que no conozco nada de HTML y es por eso que les pido si me pueden ayudar, desde ya les agradezco la respuesta y disculpen la molestia que les pueda ocasionar.

Saludos.

RafaRG · #2 (**permalink**) 10/09/2011, 12:28

mira, esto te puede servir:

Código PHP:

  <head> 
<style type="text/css">
#id {
       position:absolute; top:50%; left: 30px;
       background-color: pon el color que quieras;
       width:ancho px;
       height:alto px;
       }
</style>
<script> 
function contenido(enla , etik) { 
  obj = document.getElementById(etik); 
    obj.style.display = (obj.style.display == 'block') ? 'none' : 'block'; 
  enla.innerHTML = (enla.innerHTML == '<img src="url" style="position:fixed; top:50%; left:0;">') ? '<img src="url" style="position:fixed; top:50%; left:0;">' : '<img src="url" style="position:fixed; top:50%; left:0;">'; 
} 
</script> 
</head> 

<body> 
<a href="#" onclick="contenido(this,'id'); return false" /><img src="url" style="position:fixed; top:50%; left:0;"></a> 
<div id="id" style="display:none"> 
Contenido que quieras poner (enlaces, fotos, etc)
</div> 
</body>

si tienes alguna duda del código, dímelo

srgsus · #3 (**permalink**) 10/09/2011, 13:07

Muchas gracias RafaRG, te agradezco, pero tengo algunas dudas:

1.- Donde dice Background-color: (pongo por ejemplo #ffffff esto va solo, me refiero sin comillas, y sin espacio, sin nada.

2.- En el alto y ancho, donde dice "px;" va pegado el numero.

3.- el nombre que se vera en el boton donde lo tengo que poner.

4.- Donde dice "url" lo cambio por la dirección de la página que pruiero mostrar. obviamente dentro de las comillas.

Disculpame mi ignorancia, pero necesito preguntartelo, muchas gracias nuevamente.

Saludos.

IsaBelM · #4 (**permalink**) 10/09/2011, 13:35

para fijar cualquier elemento, se usar css, la propiedad fixed
para que se desplace el elemento al producirse un evento sobre él y todo lo demás que quieres hacer, se usa javascript. para mostrar la imagen o leyenda. para desplazar el elemento (de una manera un poco brusca), las propiedades left o right

srgsus · #5 (**permalink**) 10/09/2011, 17:35

Gracias IsaBelM por contestar, pero lamentablemente no se HTML ni de codigos, trate de modificar el código que me puso RafaRG pero no pasa nada, es mas, me muestra un número de una línea en rojo, que no se como se soluciona ese error, a continuación muestro como quedo el codigo luego de los cambio que realice. (Los cambios están en rojo)

<head>
<style type="text/css">
#id {
position:absolute; top:50%; left: 30px;
background-color: #FFFFFF;
width: 300px;
height: 300px;
}
</style>
<script>
function contenido(REGALOS,etik) {
obj = document.getElementById(etik);
obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';
pedido.html = (pedido.html == '<img src="Regalos.jpg" style="position:fixed; top:50%; left:0;">') ? '<img src="Regalos.jpg" style="position:fixed; top:50%; left:0;">';
}
</script>
</head>

<body>
<a href="pedido.html" onclick="contenido(REGALOS,'id'); return false" /><img src="Regalos.jpg" style="position:fixed; top:50%; left:0;"></a>
<div id="id" style="display:none">
</div>
</body>

Eso es todo, ojala me puedan ayudar, desde ya muchas gracias.

Saludos.

RafaRG · #6 (**permalink**) 11/09/2011, 04:24

Cita:

Iniciado por srgsus

Muchas gracias RafaRG, te agradezco, pero tengo algunas dudas:

1.- Donde dice Background-color: (pongo por ejemplo #ffffff esto va solo, me refiero sin comillas, y sin espacio, sin nada.

2.- En el alto y ancho, donde dice "px;" va pegado el numero.

3.- el nombre que se vera en el boton donde lo tengo que poner.

4.- Donde dice "url" lo cambio por la dirección de la página que pruiero mostrar. obviamente dentro de las comillas.

Disculpame mi ignorancia, pero necesito preguntartelo, muchas gracias nuevamente.

Saludos.

tranquilo, para eso estamos, para ayudarnos y aprender XD
1- exacto, va sin comillas ni espacios. te pongo ejemplos para poner el fondo de color negro:
background-color:black;
background-color:#000000;
background-color:rgb(0,0,0); <-- hay una derivación de este ejemplo que te permite poner el fondo con transparencia. sería así: background-color:rgba(0,0,0,0); donde el último número mide el grado de transparencia del 0 (transparencia máxima) hasta el 1 (opacidad máxima). los decimales se ponen con un . en medio. por ejemplo 0.5

2- obaviamente, hay que poner un número para indicar el alto y ancho, seguido del px. por ejemplo, para poner de alto 100 píxeles y de ancho 50 píxeles, sería:
height:100px;
width:50px;

3- si te refieres a poner un botón con texto, lo ideal sería poner una imagen que incluya el texto. se puede hacer con divs, pero el método sería más elaborado, ya que tendrías que hacer un css especial para él. te dejo el código por si te interesa, pero lo más fácil es hace una imagen con el texto incluido:

Código PHP:

  <style type="text/css">

#botón {

             position:fixed; top:50%; left:0px;

             height:30px;

             width:60px;

             background-color:blue;

             color:white; //esto es el color del texto

             border-radius:3px; //para darle un aspecto mejorado, puedes ponerle bordes redondeados con esta etiqueta. indica que las esquinas tendrán aspecto redondeado con un radio de 3 píxeles

             }

</style>

<div id="botón">Texto en el botón</div>

4- donde pone url tienes que poner la dirección de la imagen, si es que quieres poner una imagen como hemos hablado en el punto 3. por ejemplo: <img src="http://imagen.jpg" style="position:fixed; top:50%; left:0;">.
si lo que prefieres es poner el botón como un div, debes poner en vez del img, el div que te he puesto antes.

¿hay algo más que no sepas? solo pregunta

RafaRG · #7 (**permalink**) 11/09/2011, 04:42

Cita:

Iniciado por srgsus

Gracias IsaBelM por contestar, pero lamentablemente no se HTML ni de codigos, trate de modificar el código que me puso RafaRG pero no pasa nada, es mas, me muestra un número de una línea en rojo, que no se como se soluciona ese error, a continuación muestro como quedo el codigo luego de los cambio que realice. (Los cambios están en rojo)

<head>
<style type="text/css">
#id {
position:absolute; top:50%; left: 30px;
background-color: #FFFFFF;
width: 300px;
height: 300px;
}
</style>
<script>
function contenido(REGALOS,etik) {
obj = document.getElementById(etik);
obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';
pedido.html = (pedido.html == '<img src="Regalos.jpg" style="position:fixed; top:50%; left:0;">') ? '<img src="Regalos.jpg" style="position:fixed; top:50%; left:0;">';
}
</script>
</head>

<body>
<a href="pedido.html" onclick="contenido(REGALOS,'id'); return false" /><img src="Regalos.jpg" style="position:fixed; top:50%; left:0;"></a>
<div id="id" style="display:none">
</div>
</body>

Eso es todo, ojala me puedan ayudar, desde ya muchas gracias.

Saludos.

el script lo tienes mal. fíjate (en subrayado las diferencias, en azul los modificados mal y en naranja lo que falta):
MAL
<script>
function contenido(REGALOS,etik) {
obj = document.getElementById(etik);
obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';
pedido.html = (pedido.html == '<img src="Regalos.jpg" style="position:fixed; top:50%; left:0;">') ? '<img src="Regalos.jpg" style="position:fixed; top:50%; left:0;">';
}
</script>

<a href="pedido.html" onclick="contenido(REGALOS,'id'); return false" /><img src="Regalos.jpg" style="position:fixed; top:50%; left:0;"></a>
<div id="id" style="display:none">
</div>

BIEN
<script>
function contenido(enla, etik) {
obj = document.getElementById(etik);
obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';
enla.innerHTML = (enla.innerHTML == '<img src="Regalos.jpg" style="position:fixed; top:50%; left:0;">') ? '<img src="Regalos.jpg" style="position:fixed; top:50%; left:0;">' : '<img src="Regalos.jpg" style="position:fixed; top:50%; left:0;">';
}
</script>

<a href="#" onclick="contenido(this,'id'); return false" /><img src="Regalos.jpg" style="position:fixed; top:50%; left:0;"></a>
<div id="id" style="display:none">
</div>

srgsus · #8 (**permalink**) 11/09/2011, 13:16

Muchas gracias RafaRG.

Discúlpame que modifique sin saber nada, pero, solo creí que a lo mejor era lo que tenía que modificar, evidentemente mal, pero bueno, nunca es tarde para aprender, cuando ponga el código en la web y funcione te aviso como quedo todo, te agradezco toda la ayuda que me brindaste y discúlpame la molestia.

Saludos.

RafaRG · #9 (**permalink**) 11/09/2011, 13:19

no es ninguna molestia. como he dicho antes, aquí estamos para aprender XD
quizás debería haberme explicado mejor de qué es lo que se debería cambiar.
espero que te vaya bien. sino, solo tienes que insistir XD

srgsus · #10 (**permalink**) 11/09/2011, 14:15

EXCELENTE!! RafaRG quedo perfecto,

solo que tengo 2 dudas:

1.- Si quiero subir la imagen un poco, tendría que modificar el porcentaje del "top", pero cual? por que modifique el primero y no vario en nada y tambien puse todos al 30% y queda en el mismo lugar, en fin, no importa eso ya es lujo.

2.- Si quiero agregarle un link a la imagen, en cual sentencia sería, porque hay varias sentencias "<img srg:" vi una sola "Href" con "#" pero por miedo no quise tocar nada.

Muchas gracias por todo. Saludos.

RafaRG · #11 (**permalink**) 11/09/2011, 14:24

1- efectivamente, es el top el que tienes que modificar. si no te funciona, prueba a ponerlo en píxeles. es decir, en vez de top:30%;, prueba a poner top:200px; (o el nº que tú quieras).
2- ¿te refieres a ponerle un link a la misma imagen que sirve para hacer aparecer el contenido oculto? supongo que se podría, pero no te lo recomiendo. nunca he probado eso, ya que no lo he visto útil, pero no sé si funcionará. de todas formas, te recomiendo que pongas el enlace en el contenido que se muestra (que para eso está). en cambio, si lo que quieres es olvidarte de que la imagen muestre un contenido y que sirva como enlace, lo tienes chupado. basta con poner <a href="link-que-tú-quieras"><img src="foto-que-tú-quieras" style="position:fixed; top:50%; left:0;"></a>. en este caso no necesitarías el script ni el div.

srgsus · #12 (**permalink**) 11/09/2011, 14:36

Perfecto, no me voy a complicar, no le pongo link, lo que voy a probar es ver lo de la posición, nuevamente gracias, RafaRG.

Saludos.

RafaRG · #13 (**permalink**) 11/09/2011, 14:59

no hay de qué. recuerda que si los porcentajes no te sirven, usa los píxeles: siempre funcionan. la pega es que en ordenadores con una resolución distinta, es posible que no se vea igual. pero no creo que sea muy grave. XD
un saludo