| Demo | Acabo de implementar en el blog un sistemita de imagenes aleatorias, visto en macuoren, para ir arriba del blog. es muy sencillo de añadir a nuestra pagina web, solo tienes que añadir los siguientes codigos y si quieres cambia las url de las imagenes. |
Este es el codigo para que las imagenes se muestren como aleatorias cada vez que refresques la pagina:
<script language="javascript">
<!--
function VecImagenes()
{
n=0;
this[n++]=”url_imagen_1.gif“;
this[n++]=”url_imagen_2.png“;
this[n++]=”url_imagen_3.png“;
this[n++]=”url_imagen_4.png”
this.N=n;
}
var Imagenes=new VecImagenes();
src= Imagenes[ Math.floor(Math.random() * Imagenes.N) ] ;
document.write(”<IMG SRC=”+src+”>”);
//–>
</script>
Donde url_imagen_4.png se refiere a la ubicacion de la imagen, el nombre y el formato.
Ahora hay que incluir las imagenes en una capa y darle la posicion, en este caso será en la parte inferior derecha, sin olvidar poner el enlace al que queremos que nos lleve la imagen.
<div style="display:scroll; position:fixed; bottom:-4px; right:0px;border:0;">
<a href="#">
<script language="javascript">
<!--
function VecImagenes()
{
n=0;
this[n++]="url_imagen_1.gif";
this[n++]="url_imagen_2.png";
this[n++]="url_imagen_3.png";
this[n++]="url_imagen_4.png"
this.N=n;
}
var Imagenes=new VecImagenes();
src= Imagenes[ Math.floor(Math.random() * Imagenes.N) ] ;
document.write("<IMG SRC="+src+">");
//–>
</script>
</a>
</div>
y eso es todo, aunque al momento de agregarlo a la plantilla blogger me ha dado problemas asi que lo soluciones poniendo el contenido del script en un archivo adjunto a la plantilla y me ha funcionado de maravilla(el enlace al archivo adjunto se coloca en el mismo lugar donde está el script).
El autor del post original ha dejado un sodigo fuente con algunas imagenes que el ha diseñado y es el siguiente:
<div style="display:scroll; position:fixed; bottom:-4px; right:0px;border:0; ">
<a href="#">
<script language=”javascript”>
<!–
function VecImagenes()
{
n=0;
this[n++]="http://media.share.ovi.com/m1/original/0297/4342542a4f1a475ea6a5da4dac4c71e0.gif";
this[n++]="http://farm2.static.flickr.com/1269/887518968_421100aa52_o.png";
this[n++]="http://media.share.ovi.com/m1/original/0313/ae58536641924587bf1459e1ca6324f3.png";
this[n++]="http://media.share.ovi.com/m1/original/0297/49750ac796e843dd99d3974a5431d024.png";
this[n++]="http://media.share.ovi.com/m1/original/0297/7563bcec1d1c485ea671fa9fe617b21b.png";
this[n++]="http://media.share.ovi.com/m1/original/0313/d7df10299864447a8f5d687b86d54f02.png";
this[n++]="http://media.share.ovi.com/m1/original/0313/8ed17fbd23a74513a1ada08d73e25d4c.gif";
this[n++]="http://media.share.ovi.com/m1/original/0313/768f59fa8e344382b1d95d4df5297541.png";
this[n++]="http://media.share.ovi.com/m1/original/0313/265ffca483644e78bea550f677366779.png";
this[n++]="http://media.share.ovi.com/m1/original/0298/47f3b95f9bfe4a12becc24723ae269b0.png";
this[n++]="http://media.share.ovi.com/m1/original/0298/bd669312ccac4e179b454b386d1692a8.png"
this.N=n;
}
var Imagenes=new VecImagenes();
src= Imagenes[ Math.floor(Math.random() * Imagenes.N) ] ;
document.write("<IMG SRC="+src+">");
//–>
</script>
</a>
</div>
Despues de unos minutos este es mi resultado y aunque son pocas comenta si te ha sido de ayuda o de algo te ha servido:) :
Tal vez te interesen algunos iconos
| Demo | Download Source | Download Psd |
Desde hace mucho tenia la ilusion de crear o por lo menos acomodar en una pagina web un curso de HTML y desde ahora podeis verlo.
