Menu de Imagenes Rotativas

heroesweb · #1 (**permalink**) 21/07/2008, 16:38

Hola quisiera poner algo como esto en mi web pero no puedo obtener el codigo de la pagina..seguro alguno me puede ayudar.. lo que quiero es lo que esta marcado en la foto mas abajo.

http://www.lanacion.com.ar/deportiva/index.asp

gracias

marcopoloaz06 · #2 (**permalink**) 21/07/2008, 22:59

Hola,
ps en su
código, el script
lo hicieron ellos, nose
si aya algún problema en copiar.
Pero ps se puede hacer igual con jQuery

Código HTML:

<html>
<head>
 <title>
     
 </title>
</head>
<style>
.pics {  
    height:  232px;  
    width:   232px;  
    padding: 0;  
    margin:  0;  
} 
 
.pics img {  
    padding: 15px;  
    border:  1px solid #ccc;  
    background-color: #eee;  
    width:  200px; 
    height: 200px; 
    top:  0; 
    left: 0 
}
img {
border:0px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" src="http://www.malsup.com/jquery/cycle/jquery.cycle.all.pack.js"></script>
<script type="text/javascript">

$(document).ready(function(){

    $('#img_').cycle({ 
        prev:'#Anterior',
        next:'#Siguiente',
        speed:'fast',
        timeout: 10000,
        after:function(){
            var alt = this .getAttribute("alt").split("||");
            $("#titulo").text( alt[0] );
            $("#texto").text( alt[1] );
        }
        
    });
    
    $("#Anterior, #Pausa, #Siguiente").each(function(i){
            
            var th = $(this);
            if( this .id=="Pausa" ){
                th.toggle(function(){
                    $('#img_').cycle('pause');
                },function(){
                    $('#img_').cycle('resume');
                });
            }
            th.hover(function(){
            
                var over = this .getAttribute("alt");
                var src = this .getAttribute("src");
                this .src = over;
                this .setAttribute("alt", src);
            
            },function(){
            
                var over = this .getAttribute("alt");
                var src = this .getAttribute("src");
                this .src = over;
                this .setAttribute("alt", src);
            
            }).before("<a href='#' onclick='return false;' id='g_"+ i +"'></a>");
            $("#g_"+ i).prepend( th );
            
    });
    
});

</script>
<body>
<br>


<div id="img_" class="pics"> 
    <img src="http://malsup.com/jquery/cycle/images/beach1.jpg" width="200" height="200" alt=".:Beach1:. || aqui un texto 1" /> 
    <img src="http://malsup.com/jquery/cycle/images/beach2.jpg" width="200" height="200" alt=".:Beach2:. || aqui un texto 2" /> 
    <img src="http://malsup.com/jquery/cycle/images/beach3.jpg" width="200" height="200" alt=".:Beach3:. || aqui un texto 3" /> 
</div>
<br>
<div id="titulo">TITULO</div>
<div id="texto">ALGUN TEXTO</div>

<img src="http://www.lanacion.com.ar/imgs/layout/botones/slideAnterior.gif" id="Anterior" alt="http://www.lanacion.com.ar/imgs/layout/botones/slideAnterior_over.gif" />  
<img src="http://www.lanacion.com.ar/imgs/layout/botones/slidePausa.gif" id="Pausa" alt="http://www.lanacion.com.ar/imgs/layout/botones/slidePausa_over.gif" />  
<img src="http://www.lanacion.com.ar/imgs/layout/botones/slideSiguiente.gif" id="Siguiente" alt="http://www.lanacion.com.ar/imgs/layout/botones/slideSiguiente_over.gif" />



</body>
</html>

bueno saludoS
:]

heroesweb · #3 (**permalink**) 22/07/2008, 21:36

muchisimas gracias, la verdad es que se parece bastante

heroesweb · #4 (**permalink**) 22/07/2008, 22:37

perdon que te pregunte pero como hago para cambiar el tipo de letra a los titulos y a la descripcion de abajo... por q no encuentro la manera...y tambien de añadir hipervinculos a ellos
gracias nuevamente