Como fazer uma imagem rotativa em HTML

Luis Martin · 13/08/2014

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 · 13/08/2014

con javascript puedes hacer eso sin problemas.

acechante · 13/08/2014

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 · 13/08/2014

Inserir CODE, HTML ou 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 · 13/08/2014

hugo1 disse:

Inserir CODE, HTML ou 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 · 13/08/2014

hugo1 disse:

Inserir CODE, HTML ou 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 disse:
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 · 13/08/2014

Martmen disse:
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 · 13/08/2014

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

Sting · 13/08/2014

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

Luis Martin · 13/08/2014

kanikase disse:

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 · 13/08/2014

Martmen disse:
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 · 13/08/2014

kanikase disse:

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 · 13/08/2014

Martmen disse:
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 · 13/08/2014

de prueba para proximos proyectos gracias a todos :encouragement:

Radick · 13/08/2014

¿Con html 5 probaste?

Luis Martin · 14/08/2014

kanikase disse:
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?

Como fazer uma imagem rotativa em HTML

Luis Martin

mecm

acechante

hugo1

kanikase

Luis Martin

kanikase

hugo1

Sting

Luis Martin

kanikase

Luis Martin

kanikase

intoroddex

Radick

Luis Martin

Tópicos similares