Como cambiar la imagen de una lista al pasar el mouse por arriba?

K3NNY · #1 (**permalink**) 02/05/2005, 11:47

Estoy usando una lista para mi menu de navegacion y le asigno una imagen propia en vez de los tipicos bullets a cada link, y me gustaria saber como hacer para que al pasar el mouse por arriba del link se cambie la imagen...

Tengo entendido que el hover en IE solo funciona si se lo asigna a un elemento "a", como cambio la imagen de bullet entonces?

JavierB · #2 (**permalink**) 02/05/2005, 12:05

Hola K3NNY

Puedes usar JavaScript:

Código PHP:

  <html>

<head>

<style>

#jose {list-style-image:url('img1.gif')}

</style>

<script>

function ini() {

  obj=document.getElementById('jose');

  for (i=0;ele=obj.getElementsByTagName('li')[i];i++) {

    ele.onmouseover = function() {this.style.listStyleImage = "url('img2.gif')" }

    ele.onmouseout = function() {this.style.listStyleImage = "" }

  }

}

</script>

</head>

<body onload="ini()">

<ul id="jose">

  <li>Lista 1</li>

  <li>Lista 1</li>

  <li>Lista 1</li>

</ul>

</body>

</html>

Saludos,