Busco efecto javascript

eres · #1 (**permalink**) 03/04/2011, 10:46

Hola hace dias que busco sin éxito algun tutorial, web donde haya el código y ejemplos de un efecto javascript.

El efecto en concreto es el que presenta 4 noticias al principio de todo en un bloque y al pasar el raton por cada una se muestra a la izquierda en grande en la siguiente paguina:

[URL="http://www.mundodeportivo.com/"]http://www.mundodeportivo.com/[/URL]

he estado buscando pero el problema es que no se con que palabras clave buscar el efecto

Si alguien me puede dar alguna pista! gracias!

_cronos2 · #2 (**permalink**) 03/04/2011, 11:00

Es fácil, simplemente tienes que ir cambiando el innerHTML de un div:

Código HTML:

Ver original<div class='noticia' onmouseover='cambiarNoticia();'>Noticia 1</div>
<div class='noticia' onmouseover='cambiarNoticia();'>Noticia 2</div>
<div class='noticia' onmouseover='cambiarNoticia();'>Noticia 3</div>
<div class='noticia' id='rotador'>Noticia 1</div>

Código Javascript:

Ver originalfunction cambiarNoticia(){
 document.getElementById('rotador').innerHTML = this.innerHTML;
}

A partir de aquí puedes ir modificando cosas. Por ejemplo, traer el HTML que necesites con una consulta AJAX y darle CSS para que quede como en la web.
Saludos (:

abimaelrc · #3 (**permalink**) 03/04/2011, 11:30

Podrías hacer algo así

Código HTML:

Ver original<html>
<head>
<style>
    *{ margin: 0; padding: 0; cursor: default; }
    ul{ list-style: none; }
    li{
        font-size: 16px;
        border-bottom: 1px solid #333;
        padding: 5px;
        background-color: #ddd;
    }
    #wrapper{ width: 600px; }
    #content{
        background-color: #eee;
        width: 400px;
        float: left;
        height: 93px;
    }
    #content div{
        display: none;
        font-size: 32px;
        padding: 5px 10px;
    }
    #menu{
        width: 200px;
        float: right;
    }
    .clear{ clear: both; }
</style>
<script>
function displayContent(id){
    if(document.getElementById(id).style.display == 'block'){
        document.getElementById(id).style.display='none';
    }else{
        document.getElementById(id).style.display='block';
    }
}
</script>
</head>
<body>
<div id="wrapper">
    <div id="content">
        <div id="foo">foo content</div>
        <div id="bar">bar content</div>
        <div id="baz">baz content</div>
    </div>
    <div id="menu">
        <ul>
            <li onmouseover="this.style.backgroundColor='#eee'; displayContent('foo');" onmouseout="this.style.backgroundColor='#ddd'; displayContent('foo');">foo</li>
            <li onmouseover="this.style.backgroundColor='#eee'; displayContent('bar');" onmouseout="this.style.backgroundColor='#ddd'; displayContent('bar');">bar</li>
            <li onmouseover="this.style.backgroundColor='#eee'; displayContent('baz');" onmouseout="this.style.backgroundColor='#ddd'; displayContent('baz');">baz</li>
        </ul>
    </div>
    <div class="clear"></div>
</div>
</body>
</html>

Podrías usar un framework como mootools o jquery y así lograrlo aún con mejores efectos.

eres · #4 (**permalink**) 03/04/2011, 11:55

Gracias es exactamente lo que queria!

eres · #5 (**permalink**) 04/04/2011, 03:27

Que tendria que añadir al código de abimaelrc, para que cada x segunos me fuera mostrando el contenido de los diferentes botones?

gracias