Hola el otro dia muy amablemente un usuario del foro, abimaelrc me facilito el script que dejo a continuación, ya que necesitava un efecto así y no lo encontrava.
Lo que hace el código es lo mismo que en la siguiente página las noticias de arriba del todo: www.elmundodeportivo.es
Quisiera que si el usuario no pone el raton encima de ningun boton, lo que muestra el script en grande vaia canviando cada x tiempo, me da igual si es aleatoria o secuencialmente, eso es posible? (es decir como si el usuario estuviera poniendo el raton pero sin que lo ponga, para que se vaia alternando lo quese muestra y luego si realmente pone el raton que funcione normalmente como lo hace ahora) gracias!
aqui dejo el código y vuelvo a dar las gracia a abimaelrc por facilitarmelo!
Código:
<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>