Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Imagen flotante al azar con enlace en tu blog

Tras haber visto la manera incluir una imagen en el blog, imaginé que serían muchos los que desearían incluir dos o quizás más en lugar de una única imagen flotante.

Por ello y utilizando la estructura del script que se aplica al truco para mostrar vídeos al azar o de forma aleatoria, he querido traeros el truco para presentar un conjunto de imágenes flotantes que aparecen de una en una y son reemplazadas por otra cada vez que visitamos el blog o lo actualizamos.




Accede a este blog de pruebas para comprobar el resultado.



Diseño>Edición de HTML>expandimos artilugios


Busca la etiqueta </head> y justo antes añade esto:

<script type='text/javascript'>
// <![CDATA[
imgblJTEE = new Array(4)

imgblJTEE[0] = "<a href='URL PAGINA'><img border='0' src='URL IMAGEN' style='position:fixed; bottom:0; right:0;'/></a>"
imgblJTEE[1] = "<a href='URL PAGINA'><img border='0' src='URL IMAGEN' style='position:fixed; bottom:0; right:0;'/></a>"
imgblJTEE[2] = "<a href='URL PAGINA'><img border='0' src='URL IMAGEN' style='position:fixed; bottom:0; right:0;'/></a>"
imgblJTEE[3] = "<a href='URL PAGINA'><img border='0' src='URL IMAGEN' style='position:fixed; bottom:0; right:0;'/></a>"

AJblcn = Math.random() * (imgblJTEE.length)
AJblcn = Math.floor(AJblcn)
document.write(imgblJTEE[AJblcn])
// ]]>
</script>

Reemplaza URL PAGINA por la dirección a la que conducirá la imagen si el lector hace clic sobre ella. En URL IMAGEN debes incluir la dirección de la imagen.

Hay un total de cuatro líneas para insertar el mismo número de imágenes flotantes. Para aumentar la cifra tan solo debes agregar líneas como esta:

imgblJTEE[4] = "<a href='URL PAGINA'><img border='0' src='URL IMAGEN' style='position:fixed; bottom:0; right:0;'/></a>"

Ten en cuenta que el número resaltado en naranja indicará el número de imagen por lo que deberá modificarse según la cantidad de líneas que incluyas.

Recuerda que siempre debes añadir el código sobre la función:

AJblcn = Math.random() * (imgblJTEE.length)

Para personalizar la posición de la imagen flotante accede a esta entrada ya que el procedimiento es idéntico.

Si se da el caso de que prefieres disminuir la cantidad de imágenes a mostrar, borra la línea restante.

Guarda la plantilla para terminar.

Rosario dice...

Muchas gracias Jaime me ha servido de mucho tu excelente entrada.

Sebastián Gordel dice...

¿Y como puedo hacer que al clicar sobre la imagen suba al principio del blog?
Gracias de nuevo.

Matuute dice...

Yo pregunto lo mismo que sebastian

¿como puedo hacer que al clikear sobre la imagen suba al principio del blog?

Jaime Trujillo Escobedo dice...

Gracias a ti Rosario por escribir el comentario.

Jaime Trujillo Escobedo dice...

Sebastián y Matuute, ya que ambos coincidís en la consulta realizada, os indicaré la misma solución:

Bastará con reemplazar URL PAGINA por una almohadilla (#).

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo