Inserta una mascota o imagen flotante al azar

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

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.