Alguien sabe como hacer que las imagenes

CCC · 28 Abr 2010, 20:48 · Solicitar retirada

Alguien sabe como hacer que las imagenes cambien en una web, es decir he visto que en muchas webs ponen como una imagen que en cuestión de segundos cambia en otra y así sucesivamente hasta volver a la primera....NO SË COMO HACER ESO.. y necesito hacerlo... me ayudan??? :roll: ????

josesd · 28 Abr 2010, 21:27 · Solicitar retirada

puedes hacerlo con flash o hacer un gif con las diferentes imagenes

arigrodriguez1201 · 28 Abr 2010, 21:40 · Solicitar retirada

En el foro en la parte de script lo explica muy bien "peugeot"

http://www.comocreartuweb.com/phpBB2/ftopic19785.html

malboro45 · 29 Abr 2010, 19:52 · Solicitar retirada

hola,, http://www.xxxxxxxxxxxxxxx.com/galeria/galeria.html mira si esto es lo que quieres
copia el codigo en ver codigo y pon el destino de tus fotos
un saludo

Enlace suprimido por spam y no tener relación con el post.

Arian.- · 30 Abr 2010, 03:01 · Solicitar retirada

yo uso uno que corre con jquery, esta muy bueno, ademas es muy liviano!

este es el tutorial para implementarlo:
http://www.zona-webmaster.com.ar/javascript/blur0.php

y el demo lo podes ver en la pagina principal de mi web.

Raulyure · 30 Abr 2010, 13:22 · Solicitar retirada

CCC escribió:Alguien sabe como hacer que las imagenes cambien en una web, es decir he visto que en muchas webs ponen como una imagen que en cuestión de segundos cambia en otra y así sucesivamente hasta volver a la primera....NO SË COMO HACER ESO.. y necesito hacerlo... me ayudan??? :roll: ????

Creo que hay varias formas de hacerlo, así como le han dicho.
También puede probar utilizando un script.
Le daré un ejemplo de como se puede hacer, (ya se que hay otras formas y serán más fáciles y mejores)

Esta sería la página html

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

<html>
<head>
<title>Resucitando</title>

Este de abajo es el script
<script language="javascript">
step=0;
function autoImgFlip() {
if (step < 12) {step++;}
else {step=0;}if (step==0)
{a.src="objetos/ser1.jpg";}
if (step==1){a.src="objetos/ser2.jpg";}
setTimeout("autoImgFlip()", 4000);
if (step==2){a.src="objetos/ser3.jpg";}
if (step==3){a.src="objetos/ser4.jpg";}
if (step==4){a.src="objetos/ser5.jpg";}
if (step==5){a.src="objetos/ser6.jpg";}
if (step==6){a.src="objetos/ser7.jpg";}
if (step==7){a.src="objetos/ser8.jpg";}
if (step==8){a.src="objetos/ser9.jpg";}
if (step==9){a.src="objetos/ser10.jpg";}
if (step==10){a.src="objetos/ser11.jpg";}
if (step==11){a.src="objetos/ser12.jpg";}
}
</script>
Y este es el final del script

<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<meta name="author" content="Raul"/>
<meta name="title" content="El que lleva la aguja"/>
<meta content="index,follow" name="Todoloquehay">
<meta content="es" http-equiv="Content-Language"/>
<meta name="identifier" content="soyelquellevalaaguja.com"/>
<meta name="Abstract" content="Bla bla bla bla vla vla vl abla bl abla bla bla bla bla">
<meta name="description" content="ble ble bl evl e"/>
<meta name="keywords" content="vli vli vli vli vli vli vli v"/>

<meta content="index,follow,all" name="robots">
<link href="http://soyelquellevalaaguja.com/favicon.ico" rel="shortcut icon" />
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<link rel="shortcut icon" href="objetos/favicon.ico">

</head>

si gusta, le pone esto al body
<body bgcolor="#ffffff" TEXT="#000000" link="#0000cd" vlink="#0000cd" alink="#ff0000" onLoad="autoImgFlip();">
Y acá termina lo del body

<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[contenido no disponible]</div>
<div id="publicidad">[contenido no disponible]</div></div>
<div id="navegacion"><ul>

Cosas

Más cosas

Y más cosas<a/>

<a href="nosotros.html">Y más y más cosas</div>

<div id="contenido">
<div id="menu"><h1>Artículos</h1>
<ul>

Seccion 1

Seccion 2

Seccion 3

Seccion 4

Seccion 5
</div>

Esta sería la capa en que aparecerán las imagenes
<div id="cambiante">[contenido no disponible]</div>
Acá termina esa capa en la que aparecerán las imagenes

<h1>Soy el que lleva la aguja</h1>

En realidad, este no es un espacio que haya sido dedicado a nada en particular, es sencillamente un espacio en el que poder entretenrse, aprender, enseñar, no pensar, abstraerse, perjurar, etc. etc. </p>

No es un espacio de terapias ni nada que se le parezca, como digo, es solo un espacio, si estándo acá aprende algo, pues muy bien, y si no aprende nada, pues lo mismo..</p>

Acá puede saber que dos más dos son cuatro, o si quiere que sean cinco, pues es su decisión. Tampoco se obliga a pensar lo que no quiera pensar, pero por favor, no venga acá a imponer sus verdades.</p>

Todos vivimos en este mundo de una u otra manera, en algunas cosas sabemos, y en otras muchas somos ignorantes, pero así vivimos en este mundo, y así también sobrevivimos.</p>

Por ello no es necesario que vengan acá sabelotodos que deseen imponer sus "verdades".</p>

Bueno, no queda mucho que decir acerca de más cosas, así que</p>

Todo lo que se diga acá es sola y exclusivamente responsabilidad de sus autores.</p>

Si de acá sale con algo en su cabeza, espero que ese algo, sea conocimiento</p></div>
<div id="pie">
<div id="pieuno"><ul>

Una cosa

Dos cosas

Otras cosas</div>
<div id="piedos">
<div id="correo">[correo eliminado]</div>
<div id="correo1">i</div>
<div id="correo2">i</div>
<div id="correo3">i</div>
<div id="correo4">i</div>
<div id="correo5">i</div>

</div>
<div id="pietres"><ul>

Tres cosas</div>

</div>

<div id="curva-inferior"></div>
</div>

</body>
</html>

Esta sería la hoja de estilo para esa pagina html

*{text-indent:0px;margin:0px;padding:0px;border: 0px}

h1 {font-family:arial;font-size:1.2em;color:silver;font-weight:bold;text-decoration:underline;text-align:center}
p{text-align:justify}
img style{border:none}
body {text-align:center;background-image:url(objetos/fondito.jpg)}
#global {width:800px ; margin:4px auto}
#curva-superior { background-image: url(objetos/curva-superior.gif) ;background-repeat: no-repeat ;width:800px ;height: 12px ;overflow : hidden }
#cabecera {background-color:white;border-left:black 1px solid;border-right:black 1px solid;height:82px}
#logotipo {width:270px;float:left;}
#publicidad {width:518px;float:right;}
#navegacion {background-color:silver;border:black 1px solid;height:25px}
#navegacion li {float:left;list-style:none;margin:0px 20px 0px 20px}
#navegacion ul {margin-left:100px}
#contenido {width:auto;background-color:#9a32cd;border-left:black 1px solid;border-right:black 1px solid}
#contenido p {color:#ffff00;font-family:arial;font-size:1em; padding:5px 10px 5px 10px;text-indent: 15px}

#menu {background-color:white; width:150px;float:left;text-align:left;margin:3px 10px 3px 3px;}
#menu li {list-style:none;margin: 4px 8px 2px 6px}

#menu h1 {font-size:12px;color:#778899;text-decoration:none;text-align:center;}

Esta es la capa que contiene las imagenes
#cambiante {background-color:white; width:182px;height:202px;float:right;text-align:left;margin:3px 3px 3px 10px;border:black 1px solid;}
Acá finaliza la capa que contiene las imagenes

#pie {background-color:white;border:black 1px solid;height:65px}
#pie li{list-style:none;font-size:12px}
#pieuno {float:left;width:150px;height:65px;}
#piedos {background-color:silver;float:left;width:496px;height:65px;border-left:black 1px solid;border-right:black 1px solid;}

#correo {font-size:12px;background-color:white;border-right:black 1px solid;float:left;height:65px;}
#correo1 {font-size:12px;background-color:white;border-right:black 1px solid;float:left;height:65px;}
#correo2 {font-size:12px;background-color:white;border-right:black 1px solid;float:left;height:65px;}
#correo3 {font-size:12px;background-color:white;border-right:black 1px solid;float:left;height:65px;}
#correo4 {font-size:12px;background-color:white;border-right:black 1px solid;float:left;height:65px;}
#correo5 {font-size:12px;background-color:white;border-right:black 1px solid;float:left;height:65px;}

#pietres {font-size:11px;float:left;width:150px;height:65px;}
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px ; overflow: hidden }

a{color:black;font-size:1.1em;text-decoration:none}
a:link {}
a:visited {color:blue}
a:hover {color:red;text-decoration:underline;background-color:silver}
a:active {}

#pie a {color: blue;text-decoration:none;display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black;text-decoration:underline;background-color:white }
#pie a:active {color:black}

#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color:white}
#logotipo a:active {}

#correo a {}
#correo a:link{}
#correo a:visited {}
#correo a:hover {background-color:white}
#correo a:active {}

Bueno, lógicamente las 12 imágenes debe de ponerlas dentro de la carpeta objetos, sería bueno que tuviesen las dimensiones que tiene la capa. También en la hoja de estilo puede quitarle el borde a esa capa cambiante y como tiene un ancho y un alto, pues las imagenes pueden ser del mismo tamaño que la capa cambiante. Usted debe experimentar un poco.

Si esto le sirve, pues bien
Ya nos dirá