.abc{xxxx}
.bcd{xxxx}
</style>
比如<li id="abc" class="abc"></li>
<script>
var abc=document.getElementById("abc")
abc.onmouseover=function(){
this.className="bcd"
this.onmouseout=function(){
this.className="abc"
}
}
<script>
要用CSS，而不是js的话，不得不用hover伪类了。.btn {background:url(xx.jpg) no-repeat}.btn:hover {background:url(yy.jpg) no-repeat}不过最好是两张图片合为一个图片，这样hover的时候只要改变背景的position就行了，也不怕图片因为没有预加载而一下显示不出来。最后要说的就是IE6不支持除a以外其它元素的hover伪类。这个当然可以实现了，所谓突出显示效果跟滑动门的道理差不多，需要用到的是:hover********************************************************
定义和用法
:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。
说明
这个伪类应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。对此最常见的例子是将鼠标指针移到 HTML 文档中一个超链接的边界范围内。理论上，其他元素也可以处于悬停状态，不过 CSS 没有定义究竟是哪些元素。
激活的、已访问的、未访问的或者当有鼠标悬停在其上的链接，它们会在支持 CSS 的浏览器中以不同的方式显示出来：
********************************************************
我不清楚你说的突出显示的效果，是不是图片变大。
如果是那样的话，可以<img class="big">先定义一下，然后之后img.big:hover {width:多少pxheight:多少px}
就是把它置为顶层就可以了。具体的浮动什么的，依情况而定，写CSS熟悉以后很简单。
或者我觉得直接就可以用滑动门的办法，用两张图来替换就行。
<div id="header">
<ul>
<li><a href="#">Home</a></li>
<li id="current"><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
#header {
float:left
width:100%
background:yellow
font-size:93%
line-height:normal
}
#header ul {
margin:0
padding:0
list-style:none
}
#header li {
float:left
margin:0
padding:0
}
#header a {
display:block
}
#header li {
float:left
background:url("norm_right.gif")
no-repeat right top
margin:0
padding:0
}
#header a {
display:block
background:url("norm_left.gif")
no-repeat left top
padding:5px 15px
}
#header #current {
background-image:url("norm_right_on.gif")
}
#header #current a {
background-image:url("norm_left_on.gif")
}
嗯，你现在网上看一下滑动门的文章吧，我说的也不是很清楚，只是提供了一个思路，具体的看几个网页模板的代码相应的部分就可以理解了，嗯希望对你有帮助吧。
