谁知道这个js效果怎么写啊！很常见的，就是我没有代码，也不会自己写

本帖最后由 feicanfly 于 2009-08-21 12:05:49 编辑

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

用mouseover事件:
然后换一张图片即OK.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>远程监控</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <style type="text/css">
body {
    font-size:12px
}/* 当前模块的总宽度为250px，不合适的自己调整吧，另外改变相关图片的路径的话注意修改css样式代码的图片路径 */
#slidingBlock{
    width:"100%";border:1px #95CF92 solid;padding:1px;over-flow:hidden;
            height: 29px;
        }
#slidingBlock h4{
    float:left;width:82px;height:30px;line-height:25px;  text-align:center;font-size:12px;over-flow:hidden;align ="center"
}
#slidingBlock h4.menuNo{
    font-weight:normal;color:#333333;background:url(images/slidingMenuLine.gif) no-repeat;cursor:pointer;
}
#slidingBlock h4.menuOn{
    font-weight:bold;color:#ffffff;background:url(images/slidingMenu.gif) no-repeat;cursor:pointer;
}
    </style> <script language="javascript">
    function switchmodTag(modtag, modcontent, modk) {
        for (i = 1; i < 11; i++) {
            if (i == modk) {
                document.getElementById(modtag + i).className = "menuOn";
            }
            else {
                document.getElementById(modtag + i).className = "menuNo";
            }
        }
    }
</script>
</head>
<body bgcolor="#dcefe1">
    <form id="form1" runat="server">
     <uc1:titile ID="titile1" runat="server" />
    <div id="slidingBlock"
        style="background-color: #DCEFE1" >
    <table border ="0"; cellpadding="0"; cellspacing="0" align="center"  style="height: 45px">
    <tr>
    <td align="center">
<h4 class="menuNo" id="mod1" onclick="switchmodTag('mod','slidingList','1');this.blur();">
    查看海图</h4>
<h4 class="menuOn" id="mod2" onclick="switchmodTag('mod','slidingList','2');this.blur();">
    实时信号1</h4>
<h4 class="menuNo" id="mod3" onclick="switchmodTag('mod','slidingList','3');this.blur();">
    实时信号2</h4>
     <h4 class="menuNo" id="mod4" onclick="switchmodTag('mod','slidingList','4');this.blur();">
    定位系统</h4>
<h4 class="menuNo" id="mod5" onclick="switchmodTag('mod','slidingList','5');this.blur();">
    施工检测</h4>
<h4 class="menuNo" id="mod6" onclick="switchmodTag('mod','slidingList','6');this.blur();">
    参数检测</h4>
<h4 class="menuNo" id="mod7" onclick="switchmodTag('mod','slidingList','7');this.blur();">
    报表文件</h4>
<h4 class="menuNo" id="mod8" onclick="switchmodTag('mod','slidingList','8');this.blur();">
    数据文件</h4>
<h4 class="menuNo" id="mod9" onclick="switchmodTag('mod','slidingList','9');this.blur();">
    下载</h4>
<h4 class="menuNo" id="mod10" onclick="switchmodTag('mod','slidingList','10');this.blur();">
    用户管理</h4>
</td></tr></table>
</div>
    </form>
</body>
</html>
//把images文件夹中的图片换成你想要的图片就OK
多准备几个head文件
不同页面用不同的head文件
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>rank_help</title>
<style type="text/css">
ul{ width:400px;}
li{ width:100px; float:left; background:url(../a.gif)}
ul{ list-style:none;}
</style>
</head>
<body>
<ul>
<li onmouseover="onm(this)" onmouseout="ono(this)">1111</li>
<li onmouseover="onm(this)" onmouseout="ono(this)">2222</li>
<li onmouseover="onm(this)" >3333</li>
<li onmouseover="onm(this)" onmouseout="ono(this)">4444</li>
</ul>
<script>
function onm(o){
o.style.background.url ="../b.gif";
}function ono(o){
o.style.background = "url(../b.gif)";;
}</script>
</body>
</html>
这是一个简易实现要求的代码，但是需要两张漂亮的图片才可以，注意路径
点击后改变一下style就行了吧，关键还是看样式做的好不好