ROTACIÓN PARA TUS IMÁGENES (PASO A PASO)

carlosxlii · 14 Jul 2011, 05:29 · Solicitar retirada

he insertado los codiigos pero no sale nada, saleun mesnaje de erro de java script en la linea 15, carcter 2, error "a no esta definido:

ojala me puedas ayudar
<html>
<head>
<title>Anuncia Gratis</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">

<script language="javascript">
step=0;
function autoImgFlip() {
if (step < 3) {step++;}
else {step=0;}
if (step==0)
{a.src="objetos/imagenuno.jpg";}
if (step==1)
{a.src="objetos/imagendos.jpg";}
setTimeout("autoImgFlip()", 3000);
if (step==2)
{a.src="objetos/imagentres.jpg";}

}
</script>
</head>
<body><body onLoad="autoImgFlip();">

<div id="global">
<div id="cabecera">
<div id="logotipo"><a href="index.html"><img src="objetos/imagenuno.jpg" width="170px"
height="80px" alt="Haz clic aquí para volver a la página de inicio"></a></div>
<div id="publicidad">Anuncia Gratis</div>
</div>

davidc0hen · 6 Ago 2011, 01:32 · Solicitar retirada

si super buena onda lo voy a probar y te digo como me fue!! lo que te falto fue que podamos hacer un click y que valla a la seccion de cada imagen, sabrias eso??

Carlo1148 · 10 Dic 2011, 19:32 · Solicitar retirada

Olaz, el script se ve wenazo pero no me sale ayudenme xfa
les dejo mi index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Script Rotacion xD</title>
</head>

<body onLoad="autoImgFlip();">
<script language="javascript" src="llamado.js"></script>
<div>
<img src="[img]x.jpg[/img]"> </div>
</body>
</html>

y mi llamado.js

step=0; 
function autoImgFlip() { 
if (step < 3) {step++;} 
else {step=0;} 
if (step==0) 
{a.src="x.png";} 
if (step==1) 
{a.src="y.png";} 
setTimeout("autoImgFlip()", 3000); 
if (step==2) 
{a.src="z.png";} 
if (step==3) 
{a.src="p.png";}

}

Q estoi aciendo mal?? :confused:

javielillo · 1 Feb 2012, 16:40 · Solicitar retirada

me pasó lo mismo que a ti lo solucione poniendo las lineas de debajo del div class="cf_wraper"> de la siguiente forma:

<div class="cf_element" id="cf1"><img src="imagenes/jpg/avionicono.jpg" height="600" width="800" /></div>

las lineas de las siguientes fotos de la misma forma.

Espero que te funcione a mi me ha funcionado. Suerte

fluri · 28 Nov 2012, 18:42 · Solicitar retirada

Hola!

Lo siento por retomar este post tan antiguo, pero creo que es el mas facil que hay para estem tema de transicion de imagenes.
Mi problema es que en la web me sale el [contenido no disponible] en vez de las fotos.

Os pongo lo que tengo escrito:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>NEW EUROPE BEBE</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">

<script language="javascript">
step=0;
function autoImgFlip() {
if (step < 6) {step++;}
else {step=0;}
if (step==0)
{a.src="objectos/imagenuno.jpg";}
if (step==1)
{a.src="objectos/imagendos.jpg";}
setTimeout("autoImgFlip()", 3000);
if (step==2)
{a.src="objectos/imagentres.jpg";}
if (step==3)
{a.src="objectos/imagencuatro.jpg";}
if (step==4)
{a.src="objectos/imagencinco.jpg";}
if (step==5)
{a.src="objectos/imagenseis.jpg";}
}

</script>
</head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<body onLoad="autoImgFlip();">
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo"><a href="index.html"><img src="objectos/logo_BAL.png" width="270px"
height="80px" alt="Haz clic aquí para volver a la página de inicio"></a></div>
<div id="publicidad">by NEW EUROPE BEBE</div>
</div>
<div id="navegacion">
<ul>
<li><a href="index.html">Portada</a></li><li><a href="conocenos/conocenos.html">Conócenos</a></li><li><a href="productos/productos.html">Productos</a></li><li><a href="donde estamos/donde estamos.html">Dónde estamos?</a></li><li><a href="contacto/contacto.html">Contacto</a></li>
</ul>
</div>
<div id="contenido">

<h1><div id="fotoportada"><img src="objectos/fotoproductos.jpg.jpg" width="550px" height="450px" alt="portada" /></div></h1>

[contenido no disponible]
<p></p>

</div>
<div id="pie">Este es el pié de página</div>
<div id="curva-inferior"></div>
</div>

</body>
</html>

Gracias! espero vuestra ayuda!

Daniel-Antonio · 13 Sep 2014, 21:34 · Solicitar retirada

javielillo escribió:me pasó lo mismo que a ti lo solucione poniendo las lineas de debajo del div class="cf_wraper"> de la siguiente forma:

<div class="cf_element" id="cf1"><img src="imagenes/jpg/avionicono.jpg" height="600" width="800" /></div>

las lineas de las siguientes fotos de la misma forma.

Espero que te funcione a mi me ha funcionado. Suerte

fluri escribió:Hola!

Lo siento por retomar este post tan antiguo, pero creo que es el mas facil que hay para estem tema de transicion de imagenes.
Mi problema es que en la web me sale el [contenido no disponible] en vez de las fotos.

Os pongo lo que tengo escrito:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>NEW EUROPE BEBE</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">

<script language="javascript">
step=0;
function autoImgFlip() {
if (step < 6) {step++;}
else {step=0;}
if (step==0)
{a.src="objectos/imagenuno.jpg";}
if (step==1)
{a.src="objectos/imagendos.jpg";}
setTimeout("autoImgFlip()", 3000);
if (step==2)
{a.src="objectos/imagentres.jpg";}
if (step==3)
{a.src="objectos/imagencuatro.jpg";}
if (step==4)
{a.src="objectos/imagencinco.jpg";}
if (step==5)
{a.src="objectos/imagenseis.jpg";}
}

</script>
</head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<body onLoad="autoImgFlip();">
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo"><a href="index.html"><img src="objectos/logo_BAL.png" width="270px"
height="80px" alt="Haz clic aquí para volver a la página de inicio"></a></div>
<div id="publicidad">by NEW EUROPE BEBE</div>
</div>
<div id="navegacion">
<ul>
<li><a href="index.html">Portada</a></li><li><a href="conocenos/conocenos.html">Conócenos</a></li><li><a href="productos/productos.html">Productos</a></li><li><a href="donde estamos/donde estamos.html">Dónde estamos?</a></li><li><a href="contacto/contacto.html">Contacto</a></li>
</ul>
</div>
<div id="contenido">

<h1><div id="fotoportada"><img src="objectos/fotoproductos.jpg.jpg" width="550px" height="450px" alt="portada" /></div></h1>

[contenido no disponible]
<p></p>

</div>
<div id="pie">Este es el pié de página</div>
<div id="curva-inferior"></div>
</div>

</body>
</html>

Gracias! espero vuestra ayuda!

Wow primer comentario después de casi dos años, me siento como un arqueólogo que descubrió este viejo foro. Lo mejor es que lo leí casi desde el principio y hasta el comentario 54 de javilillo logré resolverlo. Esta última persona fluri tuvo el mismo problema que yo, me imagino que ya habrá encontrado la respuesta sino mira bien, todo el tiempo estuvo en el comentario anterior al tuyo. :)

dianaprieto · 24 Feb 2015, 03:42 · Solicitar retirada

Hola, muchas gracias por todo, estoy probando esto de la rotación de las imágenes pero no me funciona, me sale un error de script dice que 'a' no esta definido, dejo el código para que por favor si pueden me ayuden gracias.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>C O M O D I T O</title>
<link rel="stylesheet" href="estilo.css" type="text/css" media="all">
<script language="javascript">
step=0;
function autoImgFlip() {
if (step < 3) {step++;}
else {step=0;}
if (step==0)
{a.src="objetos/imagen1.jpg";}
if (step==1)
{a.src="objetos/imagen2.jpg";}
setTimeout("autoImgFlip()", 3000);
if (step==2)
{a.src="objetos/imagen3.jpg";}
if (step==3)
{a.src="objetos/imagen4.jpg";}

}
</script>
</head>
<body>
<body onLoad="autoImgFlip();">
<div id="global">
<div id="cabecera">
<div id="logotipo">
<a href="#">
[contenido no disponible]

</a>
</div>
<div id="comodito">
<P>COMODITO PARA TODOS</P>
</div>
</div>
<div id="Bienvenida">
</div>

skaparate · 24 Feb 2015, 16:07 · Solicitar retirada

@dianaprieto y todos los demás, hay un mensaje confuso en las instrucciones de peugeot...

En el paso 1 hay que añadir algo más:

<script language="javascript"> 
  var step=0; 
  function autoImgFlip() {
    var a = document.getElementById('rotar');
			
    if (step < 3) { step++; }
    else { step = 0; }
				
    if (step==0)
        { a.src="objetos/img1.jpg"; } 
    if (step==1) { a.src="objetos/img2.jpg"; } 
				
    setTimeout("autoImgFlip()", 3000); 
				
    if (step==2) {a.src="objetos/img3.jpg";} 
    if (step==3) {a.src="objetos/img4.jpg";}

    /*

    if(step == 4) { a.src = "objetos/img5.jpg"; }
    if(step == 5) { a.src = "objetos/img6.jpg"; }
    if(step == 6) { a.src = "objetos/img7.jpg"; }
    if(step == N) { a.src = "objetos/imgN.jpg"; }

    // N es un número.
    */
  }
</script>

En el paso 4, en lugar de escribir [contenido no disponible], deben utilizar la etiqueta img:

<img src="objetos/img1.jpg" />

Y por último, deben añadir un id a la etiqueta img, que será la que "rotará" las imágenes:

<img id="rotar" src="objetos/img1.jpg" />

El id debe corresponder con la línea del script var a = document.getElementById('rotar'); y viceversa. Si no son iguales, entonces no funcionará.

Nota: reemplacen los nombres de las imágenes donde corresponda.

Saludos!

renovarParo · 20 Jun 2016, 01:03 · Solicitar retirada

Excelente! Muchas gracias. Voy a intentar implementarlo en mi blog https://www.itv-cita.org/turismos/ !... Saludos.