如何用js获取一组img，当鼠标移过li时img变成另一张图片？

           需求是这样的，img里没有放图片就是设置的样式，宽度和高度都是10px，设了一个背景颜色（#03C）；当鼠标移到#set_menu li里时，img背景颜色变成#900，宽度和高度是10px，我写的js不对，请高手帮着看看，谢谢！可以不在html里加onmouseover和onmouseout事件吗？直接在js里添加onmouseover和onmouseout事件，html里不写，如何获取一组img？          
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.hd{ width:470px; height:55px; z-index:1; position:relative;}
.hd .menu{ width:407px; height:40px; background-color:#000; float:right; margin:8px 0;}
.hd .menu .menu-ul{ list-style:none; margin:0;}
.hd .menu .menu-ul .menu-li{color: #FFFFFF; float: left;font-size: 18px; margin-left: 50px;margin-right: 20px;width: 120px; height:40px; position:relative; cursor:pointer; text-align:center;}
.hd .menu .menu-ul .menu-li:hover{color:#0f0; background:#333;}
.hd .menu .menu-ul .menu-li .menu-span{ cursor:pointer; display:inline-block; margin:10px auto;}
.current{color:#0f0;}
.hd .menu2 {position: absolute;  z-index:999; background:#fff; top:40px; width:120px; margin:0 auto; left:0;}
.hd .menu2 ul {list-style: none outside none;padding: 0;position:relative;top:3px;background-color:#fff;}
.hd .menu2 li { border-bottom: 1px dashed #777777;  color: #333333; font-size: 15px; padding: 0 10px 5px 10px;text-align: left; position:relative; cursor:pointer; height:25px;}
.hd .menu2 li:hover{ background-color:gray;}
.hd .menu2 li:hover a{ color:#fff;}
.hd .menu2 ul li a { color: #333333; text-decoration: none;}
.hd .menu2 ul li a:hover{ color: #fff; text-decoration: none;}
.hd .menu2 ul li img { margin-right: 15px;position:relative;top:5px; max-height:25px; max-width:20px;}
</style></head>
<body>
<div class="hd">
   <div class="menu">
       <ul class="menu-ul">
   <li class="menu-li"  onmouseover="showMenu('set_menu','set-hd')" onMouseOut="hideMenu('set_menu','set-hd')" >
<span id="set-hd" class="menu-span" onClick="location.href='/user/snssetting'">关于我们</span>
<div class="menu2" id="set_menu">     
    <ul>
    <li onClick="location.href='/user/avatarupload'" onMouseOver="document.getElementsByTagName("img")[0].style.css='width':'10px','height':'10px','background':'#900';" onMouseOut="document.getElementsByTagName("img")[0].style.css='width':'10px','height':'10px','background':'#03C';"><img style="width:10px; height:10px; background-color:#03C; display:inline-block; margin-top:-10px;" /><a href="#">市场推广</a></li>
<li onClick="location.href='/user/edit'"  onMouseOver="document.getElementsByTagName("img")[1].style.css='width':'10px','height':'10px','background':'#900';" onMouseOut="document.getElementsByTagName("img")[1].style.css='width':'10px','height':'10px','background':'#03C';"><img style="width:10px; height:10px; background-color:#03C; display:inline-block; margin-top:-10px;" /><a href="/user/edit">招商引资</a></li>
<li onClick="location.href='/user/snssetting'"  onMouseOver="document.getElementsByTagName("img")[2].style.css='width':'10px','height':'10px','background':'#900';" onMouseOut="document.getElementsByTagName("img")[2].style.css='width':'10px','height':'10px','background':'#03C';"><img style="width:10px; height:10px; background-color:#03C; display:inline-block; margin-top:-10px;" /><a href="/user/snssetting">联系方式</a></li>
<li onClick="location.href='/user/privatesetting'"  onMouseOver="document.getElementsByTagName("img")[3].style.css='width':'10px','height':'10px','background':'#900';" onMouseOut="document.getElementsByTagName("img")[3].style.css='width':'10px','height':'10px','background':'#03C';"><img style="width:10px; height:10px; background-color:#03C; display:inline-block; margin-top:-10px;" /><a href="/user/privatesetting">友情链接</a></li>
<li onClick="location.href='/user/logout'"  onMouseOver="document.getElementsByTagName("img")[4].style.css='width':'10px','height':'10px','background':'#900';" onMouseOut="document.getElementsByTagName("img")[4].style.css='width':'10px','height':'10px','background':'#03C';" style="border:none"><img style="width:10px; height:10px; background-color:#03C; display:inline-block; margin-top:-10px;" /><a href="/user/logout">店铺地址</a></li>
</ul>
</div>
   </li>
   </ul>
   </div>
</div>
</body>
</html>

解决方案 »

  1.   

    如何让鼠标移过，变换图片？这种没必要用js,最简单的用CSS，把你的li 换成A就行了
    例
    <html><head>
      <style type="text/css" >
        #logoa{
         display:block;float:left;width:200px;height:100px;background-repeat:no-repeat;
         background-image:url("http://www.baidu.com/img/baidu_sylogo1.gif");
         }
        #logoa:hover{
         background-image:url("http://c.csdn.net/bbs/t/5/i/pic_logo.gif");
        }
        
        </style>
    </head>
    <body>
    <a id="logoa" ></a>
    </body>
    <html>
      

  2.   

    这一块需要用js来实现，不用css，请问怎么实现？
      

  3.   

    我主要是想学习js，看用js怎么获取
      

  4.   

    加载jquery.js
    $(function(){
    $("#set_menu ul li").each(function(){
    $(this).hover(
    function(){$(this).find("img").css("background-color","#000")},
    function(){$(this).find("img").css("background-color","#03C")}
    )
    });
    })
      

  5.   

    你如果只是学习如何获取和如何设置，我写个示例给你，和你的例子无关。<ul id="ul1">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    </ul>
    <div id="div1">
    <img  />
    <img  />
    <img  />
    </div>
    <script type="text/javascript" >
        var olis = document.getElementById("ul1").getElementsByTagName("li");
        var oimgs = document.getElementById("div1").getElementsByTagName("img");
        for (var i = 0; i < olis.length; i++) {
            olis[i].target = oimgs[i];        
            olis[i].onmouseover = function() {
                this.target.style.backgroundColor = "red";
            }
            olis[i].onmouseout = function() {
                this.target.style.backgroundColor = "blue";
            }
         }
    </script>
      

  6.   

    我想学习普通js获取一组img的方法，不是jquery方法的。
      

  7.   


    document.getElementsByTagName("img")[0].src=""document.getElementsByTagName("img")[0].style.background="#000000";