Foros del Web » Programación web » Javascript »

Rotar imagen y texto al mismo tiempo! pruebenlo!!

Estas en el tema de Rotar imagen y texto al mismo tiempo! pruebenlo!! en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 23/04/2008, 18:20
 
Fecha de Ingreso: abril-2003
Ubicación: Bogota
Mensajes: 28
Antigüedad: 11 años, 6 meses
Puntos: 0
Rotar imagen y texto al mismo tiempo! pruebenlo!!

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!
  #2 (permalink)  
Antiguo 24/04/2008, 20:16
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 10 años
Puntos: 10
Re: Rotar imagen y texto al mismo tiempo! pruebenlo!!

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
  #3 (permalink)  
Antiguo 30/04/2008, 11:06
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 10 años
Puntos: 10
Re: Rotar imagen y texto al mismo tiempo! pruebenlo!!

Enviado a ralf3000

Espero que te sirva.

Saludos
  #4 (permalink)  
Antiguo 07/05/2008, 17:46
 
Fecha de Ingreso: abril-2008
Mensajes: 1
Antigüedad: 6 años, 6 meses
Puntos: 0
De acuerdo Re: Rotar imagen y texto al mismo tiempo! pruebenlo!!

Excelente. Te agradezco enormemente tu aporte!!.
  #5 (permalink)  
Antiguo 04/07/2008, 06:07
 
Fecha de Ingreso: enero-2008
Ubicación: Montevideo
Mensajes: 30
Antigüedad: 6 años, 9 meses
Puntos: 0
Respuesta: Rotar imagen y texto al mismo tiempo! pruebenlo!!

Gracias por enviarme el archivo...
  #6 (permalink)  
Antiguo 29/07/2008, 20:36
 
Fecha de Ingreso: julio-2008
Mensajes: 1
Antigüedad: 6 años, 2 meses
Puntos: 0
Respuesta: Rotar imagen y texto al mismo tiempo! pruebenlo!!

Hola, alguien podria subirlo a algun host asi lo descargo por favor ? o por msn
  #7 (permalink)  
Antiguo 17/08/2008, 20:17
 
Fecha de Ingreso: agosto-2008
Mensajes: 1
Antigüedad: 6 años, 2 meses
Puntos: 0
Respuesta: Rotar imagen y texto al mismo tiempo! pruebenlo!!

Hola: por favor me podrian enviar el codigo.

Gracias
  #8 (permalink)  
Antiguo 28/11/2008, 14:25
 
Fecha de Ingreso: abril-2008
Ubicación: Cali
Mensajes: 53
Antigüedad: 6 años, 6 meses
Puntos: 2
Respuesta: Rotar imagen y texto al mismo tiempo! pruebenlo!!

Esta funcion esta buenisima.... ¿Alguien lo tiene que pudiera enviarmelo?
  #9 (permalink)  
Antiguo 30/12/2008, 14:00
 
Fecha de Ingreso: noviembre-2007
Mensajes: 2
Antigüedad: 6 años, 11 meses
Puntos: 0
Respuesta: Rotar imagen y texto al mismo tiempo! pruebenlo!!

alguien ke tenga el codigo porfa????

podrian enviarlo.
  #10 (permalink)  
Antiguo 06/04/2009, 16:56
 
Fecha de Ingreso: marzo-2009
Ubicación: Buenos Aires
Mensajes: 1
Antigüedad: 5 años, 6 meses
Puntos: 0
Respuesta: Rotar imagen y texto al mismo tiempo! pruebenlo!!

Hola "ssclamp" espero que no sea muy tarde para pedir el archivo
  #11 (permalink)  
Antiguo 09/06/2009, 16:13
 
Fecha de Ingreso: julio-2008
Ubicación: Colombia
Mensajes: 117
Antigüedad: 6 años, 2 meses
Puntos: 0
Respuesta: Rotar imagen y texto al mismo tiempo! pruebenlo!!

Necesito Archivo ¡¡¡
  #12 (permalink)  
Antiguo 09/06/2009, 18:24
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 10 años
Puntos: 10
Respuesta: Rotar imagen y texto al mismo tiempo! pruebenlo!!

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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 07:26.
SEO by vBSEO 3.3.2