Rotar imagen y texto al mismo tiempo! pruebenlo!!

ess_sebastian · #1 (**permalink**) 23/04/2008, 18:20

Hola,
Estoy intentando hacer una rotacion de imagenes y de texto, como lo hace la pagina de eltiempo.com y de msn.

he intentado utilizar el codigo de eltiempo pero no me rotan las imagenes, el codigo es el siguiente:

Código:

<style type='text/css'  rel='stylesheet'>


#noticiaprinc {
	width: 395px;
	margin: 0 0 10px 0;
	/*z-index:-999;*/
}
#mascara {
	width:393px;
	overflow: hidden;
	/*position:relative;*/
	padding: 0 0 2px 0;
	margin: 0 0 5px 0;
	border-top:1px solid #ccc;
	border-right:1px solid #ccc;
	border-left:1px solid #ccc;
	/*z-index: 0;*/
}
#contenedor {width: 10000px;}
.ynsnip {
	float:left;
	width: 395px;
	font-size:10px;
	padding: 0 0 5px 0;
	/*z-index:0;*/
}  
.foto {	border-bottom: 1px solid #999; /*z-index:0;*/}
.fscleft {}
.fscleft a {
	display:block; 
	width: 32px; 
	height: 32px;
}
.fscleft a.buttonOn { 
	background: url("/images/flechaizq.gif") no-repeat; 
}
.fscleft a:hover { 
	cursor:hand; 
	background: url("/images/flechaizqover.gif") no-repeat; 
}
.fscleft a strong { 
	display:none; 
}
.fscright a {
	width: 32px;
	height: 32px;
	display: block;
}
.fscright {}
.fscright a.buttonOn { 
	background: url("/images/flechader.gif") no-repeat;
}
.fscright a:hover {
	cursor:hand;
	background: url("/images/flechaderover.gif") no-repeat;
}
.fscright a strong { 
	display:none; 
}
.fscleft a.buttonOff, .fscleft a:hover.buttonOff { 
	cursor: default;
	background: url("/images/flechaizqdisable.gif") no-repeat;
} 
.fscright a.buttonOff, .fscright a:hover.buttonOff {
	cursor: default; background: url("/images/flechaderdisable.gif") no-repeat; 
}
#flechas1{
	position: relative;
	float: left;
	left: 306px;
	bottom: 125px;
}
#flechas2 {
	position: relative;
	float: left;
	left: 315px;
	clear: right;
	bottom: 125px;
}
.pie {
	font-size: 10px;
	padding: 0;
	margin: 2px 0 0 6px;
	/*z-index:0;*/
}
.foto {}
.clear {
	clear: both;
	margin: 0;
	padding: 0;
}
.titulo {
	color: #990000;
	font: bolder 16px/17px "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin: 0;
}


</style>

Simplemente no rota!!!!!

alguien que tenga una idea

Gracias,, chao!

ssclamp · #2 (**permalink**) 24/04/2008, 20:16

Hola ess_sebastian

Analizando el código de El Tiempo y limpiándolo para dejar sólo el rotador, sale lo siguiente:

Código:

<!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=iso-8859-1" />
<title>ELTIEMPO.COM</title>
<LINK rel='stylesheet' type='text/css'  href='OBJ-ESTI.css' />
<LINK rel='stylesheet' type='text/css'  href='OBJ-ESTK.css' />
<LINK rel='stylesheet' type='text/css'  href='basico.css' />
</head>

<body>
<div id="bloque">
	<div id="cuerpo">      
		<div id="noticias">
			<div id="noticiascolumder">
			<div id="modulojava">		
				<div id="noticiaprinc">
  					<div id="mascara" style="border-bottom:1px solid #d7d7d7;">
    					<div id="contenedor">
      						<div class="ynsnip" name="container">
                   				<div class="foto"><img src="IMAGEN-6.jpg"></div>
        							<div class="pie">Foto: EFE</div>
   	    							<div class="titulomodjava">Casco de moto con 'airbag'</div>
        							<div class="textonoticia">Saldrá al mercado en mayo y tendrá un costo de 
									2 millones de pesos. Al chocar se infla una bolsa en la parte 
									trasera y alrededor del cuello.</div>
      						</div>                    
      						<div class="ynsnip" name="container">
                   				<div class="foto"><img src="IMAGEN-7.jpg"></div>
        						<div class="pie">Foto: AFP</div>
   	    						<div class="titulomodjava">Semana Santa ortodoxa</div>
        						<div class="textonoticia">Hoy miles de personas alrededor del mundo 
								celebran el Jueves Santo. Los católicos lo celebraron hace un mes.</div>
      						</div>                    
      						<div class="ynsnip" name="container">
                   				<div class="foto"><img src="IMAGEN-8.jpg"></div>
        						<div class="pie">Foto: Leonardo Herrera / EL TIEMPO</div>
   	    						<div class="titulomodjava">Mar rojo en Taganga</div>
        						<div class="textonoticia">El derrame de 10 toneladas de aceite de palma 
								en el balneario de pescadores cercano a Santa Marta ocasionó la 
								extraña coloración.</div>
      						</div>                    
    				</div> <!-- fin id=contenedor-->
  				</div><!-- fin id=mascara-->    
          			<div id="flechas1">
	       				<script type="text/javascript" src="js1-left.js"></script></div>	
        			<div id="flechas2">
	      				<script type="text/javascript" src="js1-right.js"></script></div>
	   				<div class="clear"></div>
				</div> <!-- fin id=noticiaprinc -->
					<script type="text/javascript" src="js6.js"></script>
					<script type="text/javascript" src="js4.js"></script>
					<script type="text/javascript" src="js3.js"></script> 
					<script type="text/javascript" src="js2.js"></script> 
					<script type="text/javascript" src="js1Control.js"></script> 
			</div> <!-- fin id=modulojava -->
			</div> <!-- fin id=noticiascolumder -->
				<div class="clear"></div>
		</div> <!-- fin id=noticias -->
				<div class="clear"></div>
	</div> <!-- fin id=cuerpo --> 
    </div> <!-- fin id=bloque -->

</body>
</html>

El rotador funciona con:
- 7 javascripts
- 3 hojas de estilo
- 6 imágenes gif de las flechitas

Más las imágenes principales que muestres en el carrousel (en el ejemplo son 3 imágenes).

Lo tengo limpio y empaquetado, si tienes dónde subirlo te lo envío.

Saludos

ssclamp · #3 (**permalink**) 30/04/2008, 11:06

Enviado a ralf3000

Espero que te sirva.

Saludos

ralf3000 · #4 (**permalink**) 07/05/2008, 17:46

Excelente. Te agradezco enormemente tu aporte!!.

alesaga · #5 (**permalink**) 04/07/2008, 06:07

Gracias por enviarme el archivo...

Darths · #6 (**permalink**) 29/07/2008, 20:36

Hola, alguien podria subirlo a algun host asi lo descargo por favor ? o por msn

josqui · #7 (**permalink**) 17/08/2008, 20:17

Hola: por favor me podrian enviar el codigo.

Gracias

johncode917 · #8 (**permalink**) 28/11/2008, 15:25

Esta funcion esta buenisima.... ¿Alguien lo tiene que pudiera enviarmelo?

farraguantero · #9 (**permalink**) 30/12/2008, 15:00

alguien ke tenga el codigo porfa????

podrian enviarlo.

WOKER3 · #10 (**permalink**) 06/04/2009, 16:56

Hola "ssclamp" espero que no sea muy tarde para pedir el archivo

diaz22 · #11 (**permalink**) 09/06/2009, 16:13

Necesito Archivo ¡¡¡

ssclamp · #12 (**permalink**) 09/06/2009, 18:24

Hola a todos,

Subido a:

http://www.box.net/shared/kjrduyp8oj

Saludos

*Este carrousel está obtenido del código (limpiado) de _www.eltiempo.com en abril de 2008.