Cómo hacer una imagen rotativa en HTML

Luis Martin · 2014-08-13T20:21:12-0500

Hola, estoy intentado desde hace horas hacer esta accion con HTML pero no he podido, tal vez me puedan ayudar, lo que quiero es lo siguiente, en una entrada poner una imagen la cual al pasar 3 segundos cambie por otra la cual quede permanente, es decir:

Imagen1 - 3 seg
Imagen2 - Permanente

Accion: Mostrar "Imagen1" por 3 segundo y luego cambiar por "Imagen2" que se quedara permanentemente.

Si alguien sabe que codigo utilizar se lo agradeceria muchisimo!

mecm · 2014-08-13T20:24:02-0500

con javascript puedes hacer eso sin problemas.

acechante · 2014-08-13T20:24:42-0500

Solo con HTML no puedes conseguir eso. Puedes lograrlo con el uso de javascript y, si no me equivoco, con CSS3 también se puede lograr.

hugo1 · 2014-08-13T20:27:50-0500

Insertar CODE, HTML o PHP:

<img id="img" src="http://m.c.lnkd.licdn.com/media/p/4/000/13e/217/082dfd8.png" />
 
<script>
setTimeout(function()
{
	document.getElementById('img').src = 'http://paraisolinux.com/wp-content/uploads/2011/09/forobeta.png';
}, 3000);
</script>

kanikase · 2014-08-13T20:28:51-0500

hugo1 dijo:

Insertar CODE, HTML o PHP:

<img id="img" src="http://m.c.lnkd.licdn.com/media/p/4/000/13e/217/082dfd8.png" />
 
<script>
setTimeout(function()
{
	document.getElementById('img').src = 'http://paraisolinux.com/wp-content/uploads/2011/09/forobeta.png';
}, 3000);
</script>

Me ganaste :welcoming:

Luis Martin · 2014-08-13T20:41:01-0500

hugo1 dijo:

Insertar CODE, HTML o PHP:

<img id="img" src="http://m.c.lnkd.licdn.com/media/p/4/000/13e/217/082dfd8.png" />
 
<script>
setTimeout(function()
{
	document.getElementById('img').src = 'http://paraisolinux.com/wp-content/uploads/2011/09/forobeta.png';
}, 3000);
</script>

Ya me sirvio mil gracias, pregunta adicional, como hago para que la segunda imagen tenga un enlace? que agrego al codigo?

- - - Actualizado - - -

kanikase dijo:
Me ganaste :welcoming:

Gracias de todas formas, una pregunta adicional, como hago para ponerle un enlace a la segunda imagen? que agrego al codigo? gracias

kanikase · 2014-08-13T20:56:49-0500

Martmen dijo:
Ya me sirvio mil gracias, pregunta adicional, como hago para que la segunda imagen tenga un enlace? que agrego al codigo?

- - - Actualizado - - -

Gracias de todas formas, una pregunta adicional, como hago para ponerle un enlace a la segunda imagen? que agrego al codigo? gracias

HTML:

<div id="cont">
<img src="URL-IMAGEN" />
</div>
<script>
setTimeout(function(){document.getElementById('cont').innerHTML = '<a href="#"><img src="URL-IMAGEN" /></a>'}, 3000)
</script>

hugo1 · 2014-08-13T21:03:09-0500

[MENTION=81006]kanikase[/MENTION] ahora me ganaste tu 🙂 ...

Sting · 2014-08-13T21:22:30-0500

Pero que habilidosos hay en el foro!! :welcoming: jaja

Luis Martin · 2014-08-13T21:26:02-0500

kanikase dijo:

HTML:

<div id="cont">
<img src="URL-IMAGEN" />
</div>
<script>
setTimeout(function(){document.getElementById('cont').innerHTML = '<a href="#"><img src="URL-IMAGEN" /></a>'}, 3000)
</script>

No me funciona :S Incluso cambie el setTimeOut por setTimeout y nada, solo sale la primera imagen pero no cambia, que hago?

kanikase · 2014-08-13T21:32:56-0500

Martmen dijo:
No me funciona :S Incluso cambie el setTimeOut por setTimeout y nada, solo sale la primera imagen pero no cambia, que hago?

Encierralo en una funcion.

HTML:

<div id="cont">
<img src="URL-IMAGEN" onmousehover="cambiar()"/>
</div>
<script>
function cambiar(){
setTimeout(function(){document.getElementById('cont').innerHTML = '<a href="#"><img src="URL-IMAGEN" /></a>'}, 3000)
}
</script>

A ver así

Luis Martin · 2014-08-13T21:42:26-0500

kanikase dijo:

Encierralo en una funcion.

HTML:

<div id="cont">
<img src="URL-IMAGEN" onmousehover="cambiar()"/>
</div>
<script>
function cambiar(){
setTimeout(function(){document.getElementById('cont').innerHTML = '<a href="#"><img src="URL-IMAGEN" /></a>'}, 3000)
}
</script>

A ver así

No, sigue igual, solo aparece la primera imagen, que mas se puede hacer?

kanikase · 2014-08-13T21:45:11-0500

Martmen dijo:
No, sigue igual, solo aparece la primera imagen, que mas se puede hacer?

no funciono con el cursor encima de la imagen, si no lo quieres así agrega:

<body onload="cambiar()">

intoroddex · 2014-08-13T21:51:10-0500

de prueba para proximos proyectos gracias a todos :encouragement:

Radick · 2014-08-13T22:36:14-0500

¿Con html 5 probaste?

Luis Martin · 2014-08-14T05:49:07-0500

kanikase dijo:
no funciono con el cursor encima de la imagen, si no lo quieres así agrega:

<body onload="cambiar()">

En que parte lo agrego al codigo?

Cómo hacer una imagen rotativa en HTML

Luis Martin

mecm

acechante

hugo1

kanikase

Luis Martin

kanikase

hugo1

Sting

Luis Martin

kanikase

Luis Martin

kanikase

intoroddex

Radick

Luis Martin

Temas similares