changing a list image

JoeAtRevolutionUnltd · May 31, 2006

I have a menu made from a UL with my own list image. Would it be possible to have the list image change when you hover over a menu item?

Thanks

feherke · May 31, 2006

Hi

You need a browser for this. ( Explorer can not do [tt]:hover[/tt]. )

Code:

<style type="text/css">
li {
  list-style-image: url(normal.png);
}
li:hover {
  list-style-image: url(rollover.png);
}
</style>

Feherke.

http://rootshell.be/~feherke/

JoeAtRevolutionUnltd · May 31, 2006

simple enough. thanks

ChrisHunt · Jun 1, 2006

Another way of doing it - which works on IE as well - is to set [tt]list-style[/tt] to none, and instead make the bullet the non-repeating background of the <a> element. For example, look at the little icon in the list of links at

http://www.leicesteryha.org.uk/links.shtml

. This approach also has the benefit that the bullets/icons/whatever become clickable as part of the link.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

feherke · Jun 1, 2006

Hi

Nice trick, just one flaw : the list item text must begin with a link and if has trailing text outside the link, that will not throw the effect.

Beside that, I like to keep the bullet's functionality of selecting the list item text on click or double click.

Last time when I played with something similar I made a JavaScript workaround for Explorer :

Code:

<html>
<head>

<style type="text/css">
ul.rollover li {
  list-style-image: url(red.png);
}
ul.rollover li:hover,ul.rollover li.rohover {
  list-style-image: url(green.png);
} 
</style>

<script type="text/javascript">
function rolloverize()
{
  if (navigator.userAgent.indexOf('MSIE')==-1) return;
  ul=document.getElementsByTagName('ul');
  for (i=0;i<ul.length;i++) if (ul[i].className=='rollover') {
    li=ul[i].getElementsByTagName('li');
    for (j=0;j<li.length;j++) {
      li[j].onmouseover=function() { this.className='rohover' }
      li[j].onmouseout=function() { this.className='' }
    }
  }
}
</script>

</head>
<body onload="rolloverize()">

<ul class="rollover">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>

</body>
</html>

Another, cleaner, way to solve the Explorer problem is to use a behavior file. This example explain it how :

http://goldpanda.merri.net/samples/js_enhanced_css_menu/

Feherke.

http://rootshell.be/~feherke/

JoeAtRevolutionUnltd · Jun 1, 2006

Thanks guys. I went with the background image. I think it the easiest way and works in all browsers.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

changing a list image

JoeAtRevolutionUnltd

Programmer

feherke

Programmer

JoeAtRevolutionUnltd

Programmer

ChrisHunt

Programmer

feherke

Programmer

JoeAtRevolutionUnltd

Programmer

Similar threads

Part and Inventory Search

Sponsor