¿Cómo rotar aleatoriamente imágenes en HTML?

[villabull]

Hola quisiera saber como puedo hacer para rotar aleatoriamente imágenes, espero puedan ayudarme.

Tengo 6 imágenes así:
<img src="imagen1"> <img src="imagen2">
<img src="imagen3"> <img src="imagen4">
<img src="imagen5"> <img src="imagen6">


Y quisiera que cada vez que se presione F5 se muevan de posición aleatoriamente, así:
<img src="imagen5"> <img src="imagen1">
<img src="imagen2"> <img src="imagen6">
<img src="imagen3"> <img src="imagen4">


Se puede hacer eso en html o tendria que hacerse en php?

Gracias por sus comentarios!

 

[zcriptz]

<?php

$imagenes = array('imagen.gif', 'imagen2.gif', 'imagen3.gif');
shuffle($imagenes);

foreach($imagenes as $imagen){ ?>
<img src="<?=$imagen?>">
<? } ?>

 

[hugo1]

Aunque lo haría como respondio zcriptz, también puedes hacerlo con Javascript

<div id="imagenes"></div>

<script>
var imagenes_array = null;
var imagenes = '';

imagenes_array = [
				'imagen1.jpg',
    				'imagen2.jpg',
    				'imagen3.jpg',
    				'imagen4.jpg',
    				'imagen5.jpg',
    				'imagen6.jpg'
    			];

// http://jsfromhell.com/array/shuffle
shuffle = function(v)
{
    for(var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x);
    return v;
};

imagenes_array = shuffle(imagenes_array);

for(var i=0; i<imagenes_array.length; i++) imagenes += '<img src="'+ imagenes_array[i] +'" />';

document.getElementById('imagenes').innerHTML = imagenes;
</script>

 

[villabull]

Gracias Zcript pense que se podria con html, porque quisiera también agregarle link a la imagen, en este caso como seria?
Mi pagina web la estoy haciendo en html + css

<?php

$imagenes = array('imagen.gif', 'imagen2.gif', 'imagen3.gif');
shuffle($imagenes);

foreach($imagenes as $imagen){ ?>
<img src="<?=$imagen?>">
<? } ?>

Gracias hugo1, como hago para agregar un enlace a la imagen? también se puede?

Aunque lo haría como respondio zcriptz, también puedes hacerlo con Javascript

<div id="imagenes"></div>

<script>
var imagenes_array = null;
var imagenes = '';

imagenes_array = [
				'imagen1.jpg',
    				'imagen2.jpg',
    				'imagen3.jpg',
    				'imagen4.jpg',
    				'imagen5.jpg',
    				'imagen6.jpg'
    			];

// http://jsfromhell.com/array/shuffle
shuffle = function(v)
{
    for(var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x);
    return v;
};

imagenes_array = shuffle(imagenes_array);

for(var i=0; i<imagenes_array.length; i++) imagenes += '<img src="'+ imagenes_array[i] +'" />';

document.getElementById('imagenes').innerHTML = imagenes;
</script>

 

[nullPointer]

Con permiso de hugo1, ya que voy a reutilizar su código, te respondo:

<div id="imagenes"></div>

<script>
var imagenes_array = null;
var imagenes = '';

[B][COLOR="#FF0000"]var imagenes_array = [
        ['mi_enlace1.html', 'imagen1.jpg'],
        ['mi_enlace2.html', 'imagen2.jpg'],
        ['mi_enlace3.html', 'imagen3.jpg'],
        ['mi_enlace4.html', 'imagen4.jpg'],
        ['mi_enlace5.html', 'imagen5.jpg'],
        ['mi_enlace6.html', 'imagen6.jpg']
    ];[/COLOR][/B]

// http://jsfromhell.com/array/shuffle
shuffle = function(v)
{
    for(var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x);
    return v;
};

imagenes_array = shuffle(imagenes_array);

for(var i=0; i<imagenes_array.length; i++) imagenes += [B][COLOR="#FF0000"]'<a href="' + imagenes_array[i][0] + '"><img src="'+ imagenes_array[i][1] +'" /></a>';[/COLOR][/B]

document.getElementById('imagenes').innerHTML = imagenes;
</script>

Un saludo.

😉

 

[zcriptz]

Te recomiendo con PHP sino Google no indexará esas paginas :encouragement:

 

[villabull]

Con permiso de hugo1, ya que voy a reutilizar su código, te respondo:

Un saludo.

😉

Gracias, si quiero agregar más en el código html tengo que poner "," o ";" o simplemente una tras otra sin dividirlas?

Te recomiendo con PHP sino Google no indexará esas paginas :encouragement:

Gracias zcriptz, como se haría en php agregando el link a las imagenes?

 

[zcriptz]

Gracias zcriptz, como se haría en php agregando el link a las imagenes?

Solo lo agregas...

Por ejemplo:

<a href="link.php?imagen=<?=$imagen?>"><img src="<?=$imagen?>"></a>

 

[villabull]

Solo lo agregas...

Por ejemplo:

<a rel="nofollow" href="link.php?imagen=<?=$imagen?>"><img src="<?=$imagen?>"></a>

Pero si el link es hacia una pagina no hacia la imagen?
Disculpa si molesto tanto.

 

[zcriptz]

Pero si el link es hacia una pagina no hacia la imagen?
Disculpa si molesto tanto.

Con lo que te di puedes hacerlo. Tu querías saber como hacerlo, no que te lo hagan -.-"

 

[cesarneitor]

y entiendo que es php pero no entiendo el como, ya que html es mas estatico y desarrollo web por lo que es mas de escritura y no para manipular asi, ya que se requiere mas de programacion web como php

 

[maduranma]

Puedes hacerlo con JavaScript (no es necesario instalar nada, es decir, no es nada externo al navegador):

<div id="imagenes"></div>
<script>
var num = [];
var numeroInicial = 1;
var numeroFinal = 6;
while(numeroInicial <= numeroFinal)
{
	num[num.length]= numeroInicial;
	numeroInicial++;
}
function shuffle(o)
{
	for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
	return o;
}
var html = '';
num = shuffle(num);
num.forEach(function(i) {
	html += '<a href="http://www.algo.com"><img src="imagen' + i + '" alt="Título"></a>';
});
document.getElementById('imagenes').innerHTML = html;
</script>

O si no, puedes hacerlo con PHP:

<?php
$num = range(1, 6);
shuffle($num);
foreach ($num as $i) //Cambia el 6 por el número de foto si algún día necesitas
{
    echo '<a href="http://www.algo.com"><img src="imagen' . $i . '" alt="Título"></a>';
}
?>

 

[villabull]

Puedes hacerlo con JavaScript (no es necesario instalar nada, es decir, no es nada externo al navegador):

<div id="imagenes"></div>
<script>
var num = [];
var numeroInicial = 1;
var numeroFinal = 6;
while(numeroInicial <= numeroFinal)
{
	num[num.length]= numeroInicial;
	numeroInicial++;
}
function shuffle(o)
{
	for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
	return o;
}
var html = '';
num = shuffle(num);
num.forEach(function(i) {
	html += '<a rel="nofollow" href="http://www.algo.com"><img src="imagen' + i + '" alt="Título"></a>';
});
document.getElementById('imagenes').innerHTML = html;
</script>

O si no, puedes hacerlo con PHP:

<?php
$num = range(1, 6);
shuffle($num);
foreach ($num as $i) //Cambia el 6 por el número de foto si algún día necesitas
{
    echo '<a rel="nofollow" href="http://www.algo.com"><img src="imagen' . $i . '" alt="Título"></a>';
}
?>

Gracias.
Si quiero agregar mas imagenes seria asi:

{
    echo '<a rel="nofollow" href="http://www.algo.com"><img src="imagen' . $i . '" alt="Título"></a>';
'<a rel="nofollow" href="http://www.algo.com"><img src="imagen' . $i . '" alt="Título"></a>';
'<a rel="nofollow" href="http://www.algo.com"><img src="imagen' . $i . '" alt="Título"></a>';
}

o como?