Añadir Botón A Función Imágenes Aleatorias

Argosth · #1 (**permalink**) 25/01/2010, 02:04

Hola buenos días.

Quería hacer una simple pregunta.

Tengo una función que conseguí para cargar imágenes aleatorias al actualizarse la página, y lo que quería saber es si es posible a la función, añadirle un botón para que al presionarla cargue otra imagen aleatoria sin necesidad de actualizar la página, osea, que también se pueda hacer manualmente.

Es solo eso, pondré aquí la función por si me podéis ayudar para añadirle el botón:

Código:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Imagen aleatoria</title>
<script language="JavaScript">
var numeroImagenes = 4 ;
var numeroAleatorio = Math.floor(Math.random() * numeroImagenes ) + 1;
</script>
</head>

<body>
<p align="center">
<script language="JavaScript">
document.write('<img src="images/galeria' + numeroAleatorio + '.jpg">');
</script>
</p>
</body>
</html>

Espero que alguien pueda ayudarme.
Siento las molestias y gracias por vuestro tiempo y ayuda.

JavierB · #2 (**permalink**) 25/01/2010, 02:21

Hola Argosth

Muevo tu tema al foro de Javascript desde Web general.

Saludos,

caricatos · #3 (**permalink**) 25/01/2010, 02:43

Hola:

Tendrías que poner algo para identificar el tag img (por ejemplo un id), y en el botón repetir lo que has puesto antes...

<img id="azar" src="loquesea" />
<button type="button"
onclick="document.getElementById('azar').src = 'images/galeria' + (Math.floor(Math.random() * numeroImagenes ) + 1) + '.jpg' ">
cambiar
</button>

Se podría mejorar con algo para evitar repeticiones... pero eso te lo dejo a tí...

Saludos

Argosth · #4 (**permalink**) 25/01/2010, 03:23

Muchas gracias por vuestra ayuda, funciona correctamente, solo me gustaría saber algo.

He visto unos temas y he encontrado uno tuyo Caricatos para cambiar la imagen al botón, el código que pusiste funciona, lo he probado y es casi perfecto.

Código:

<button type="submit" ><img src="imagen1.gif"
onmouseover="this.style.display = 'none'; this.nextSibling.style.display = 'inline'"
/><img src="imagen2.gif" style="display: none"
onmouseout="this.style.display = 'none'; this.previousSibling.style.display = 'inline'" /></button>

Solo que la imagen que pongo no llega a ocupar el tamaño total del botón, si hago la imagen más grande, el borde del botón también se hace más grande, ¿Es posible que ocupe la imagen todo el botón para que no se note el mismo? ¿O es posible darle el tamaño al botón?

Gracias por vuestra ayuda.

Argosth · #5 (**permalink**) 25/01/2010, 03:43

Siento responderme a mi mismo haciendo SPAM, quería dejar el tema por zanjado, la solución para cambiar la imagen la encontré con CSS, es más fácil y menos compleja.

Siento volver a ser de incomodidad y os agradezco mucho vuestra ayuda.

Gracias.

caricatos · #6 (**permalink**) 25/01/2010, 03:45

Hola:

Bueno, los tags button tienen sus propios estilos por defecto, así que más que cosa de redimensionar las imágenes, creo que tu problema se resolvería con los estilos del botón... por ejemplo padding: 0... pero sobre los bordes, también podrías tener problemas ya que creo que se usan estilos más modernos como border-radious ( o algo así)... tal vez sea mejor que lo preguntases en css... pero podría servir forzar ese estilo por ejemplo: 3px outset gray (me suena que se parecerá a un botón...)

Saludos

caricatos · #7 (**permalink**) 25/01/2010, 03:49

¡Je, je!

Te me adelantaste... y por lo visto (al menos con mis cuatro ojos) no hay spam... sino tendría que actuar

Me alegro de que resolvieras tu problema.

Saludos

Argosth · #8 (**permalink**) 27/01/2010, 03:22

Muchas gracias por tu tiempo y las molestias que te haya podido haber causado.

Un saludo.