Foros del Web - Ver Mensaje Individual

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.