<ul id="menu">
<li><a href="./"><img src="images/menu_index.jpg" alt="首页" /></a></li>
<li><a href="about.php"><img src="images/menu_about.jpg" alt="关于我们" /></a></li>
<li><a href="contact.php"><img src="images/menu_about.jpg" alt="联系我们" /></a></li>
</ul>
鼠标移上时变换图片,图片名称是在原图片名称后加"_on",如"menu_index_on.jpg"。
用JQuery方法,在线求!
或者如果有更好的方案,建议下,多芬!jQuery

解决方案 »

  1.   


    <ul id="menu">
    <li><a href="./"><img src="images/menu_index.jpg" alt="首页" /></a></li>
    <li><a href="about.php"><img src="images/menu_about.jpg" alt="关于我们" /></a></li>
    <li><a href="contact.php"><img src="images/menu_contact.jpg" alt="联系我们" /></a></li>
    </ul>
      

  2.   


    <html>
    <head>
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <script type="text/javascript"> 
     function dohover(elem){
    var path = $(elem).attr("src");
    var newPath = path.replace('.jpg', '') + "_on.jpg";
    $(elem).attr("src", newPath);
     }
    </script>
    </head>
    <body>
    <ul id="menu">
    <li><a href="./"><img src="images/menu_index.jpg" alt="首页" onMouseover="dohover(this)" /></a></li>
    <li><a href="about.php"><img src="images/menu_about.jpg" alt="关于我们" /></a></li>
    <li><a href="contact.php"><img src="images/menu_about.jpg" alt="联系我们" /></a></li>
    </ul>
    </body>
    <html>最懒的写法
    直接在img上添加事件, 找到src属性, 进行字符串替换
      

  3.   

    如果css水平可以的话. 可以将原始图片和_on图片拼到一起, 然后为img添加hover{background-positon:-30px;}来进行偏移显示, 不需要js来做
      

  4.   

    如果img过多时, 手动添加onmouseover过于复杂, 可以用$("#menu")来找到其子img, 然后用js添加mouseover和mouseout事件