Ago
04
2008

Poner Imágenes Aleatorias con HTML

[21/08/08] Aportazo por Wyrm para hacer esto mismo en PHP (vía comentarios).

Comenta y te cuento. Aporta y compartoEsto es parecido a lo que expliqué en la última parte del post Poner Imagen Flotante Fija en la Esquina de una Web + Aleatoria + Efecto Hover, pero sin necesidad de añadir códigos en el head.

Simplemente, donde quieras colocar la/s imágenes copia y pega este código:

<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>

… y cambia url_imagen_1.gif, url_imagen_2.png, url_imagen_3.png, url_imagen_4.png, etc. por las direcciones URL de las imágenes que quieras poner. Sobra decir que puedes poner muchas más imágenes añadiendo líneas del estilo this[n++]=”url_imagen_3.png”;.

Este es el código que he puesto yo para poner mis imágenes esquineras aleatorias, podéis usar el código tal cual está para copiar y pegar:

<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>

Lo rojo es lo que he utilizado para poner las imágenes en la esquina, en el otro post lo explico.

Lo azul es solo por si quieres ponerle un vínculo, yo solo le he puesto un # para que cuando pinches en las imágenes suba directamente la página a la cabecera.

Y estas son las imágenes que tengo puestas yo (mas la de arriba), las que te saldrán si practicas con mi código:

Y ya está, no estaría de más un comentario si te ha sido útil (o si te parece interesante) ;)

Escrito por Loren en: Creaciones, Tontoriales | Etiquetas:, , , , ,

18 comentarios »

  • [...] [04/08/08] Para evitar tener que poner el código javascript por separado –> Poner Imágenes Aleatorias con HTML. [...]

  • Hola, he llegado a tu blog de casualidad y me ha gustado todo(diseño, ideas, originalidad, etc.) Felicidades y gracias por este post (realmente interesante)

    Comentario por Cris — 17 Agosto 2008
  • Gracias a ti Cris por decirlo :D

    Comentario por Loren — 17 Agosto 2008
  • Tu script no me funcionaba así que he hecho su homólogo en php:

    <?php // Imagenes esquineras aleatorias
    $imagenes[0] = “url/a/imagen1.png”;
    $imagenes[1] = “url/a/imagen2.jpg”;

    echo “”;
    ?>

    Comentario por Wyrm — 21 Agosto 2008
  • @Wyrm –> ¡Aportazó! ¡Munchas Grancias! :D

    Comentario por Loren — 21 Agosto 2008
  • Genial tu blog!!! Me ha sido de muxa utilidad…si miras de vez en cuando mi web, seguro que te suenan cosillas…salu2, sigue así!!!

    Comentario por felipe — 22 Diciembre 2009
  • Gracias Felipe :)

    He estado mirando tu web y no se a que te refieres…

    Comentario por Loren — 22 Diciembre 2009
  • Muy interesante tu ayuda. Felicitaciones. Lo que te sugiero es que no presentes ñla imagen de nuestro señor Jesús en la forma como está.

    Comentario por Grover — 31 Enero 2010
  • [...] macuoren » Blog Archive » Poner Imágenes Aleatorias con HTML meter imagenes aleatorias (tags: html java) [...]

    Notificacion por links for 2010-03-07 – Juan Chaparro Jiménez — 8 Marzo 2010
  • hola hermano.. mis conocimientos en html son basicos, casi nulos. Editando la plantilla de mi blog con el diseñador de plantillas descubri que el codigo no tiene la misma estructura que los que habia visto anteriormente y me gustaria agregar esta funcion de imagenes aleatorias me puedes ayudar?

    s.e.lain_Eccohotmail.com

    te lo agradeceria mucho.

    Comentario por Lain — 14 Julio 2010
  • Lain, puedes usar cualquier código html donde dices que funciona igual.

    Comentario por Loren — 17 Julio 2010
  • si bueno.. despues de buscarle un poco llege a la solucion.. de todos modos gracias..

    Comentario por Lain — 17 Julio 2010
  • acabo de iniciarme, y pongo todo eso y no sale absolutamente nada, ¿podrías ayudarme?

    Comentario por lia — 3 Agosto 2010
  • Mola mazo esto.

    Comentario por Iketut — 31 Octubre 2010
  • Que hay bro…
    El código no sirve pa ni madres, se que es cansado y agotador darle al código, pero, creo que si das el servicio en tu web…
    Tienes que saber mas que los visitantes.
    PD: Esta loco el pinche Jesús ese… ja ja ja

    Comentario por El Raul — 1 Noviembre 2010
  • Gracias por la aportación.
    Un saludo!

    Comentario por Triana — 4 Enero 2011
  • gracias.. profesor andaba buscando ese codigo..

    Comentario por LOTITO — 26 Abril 2011
  • Gracias por tus aportes son varias las veces que alcancé tus páginas buscando soluciones y me sirvieron.

    Comentario por marcelo — 18 Enero 2012

RSS feed for comments on this post. TrackBack URL

Dejar un comentario

Powered by WordPress | Aeros Theme | TheBuckmaker.com WordPress Themes