日期:2014-05-17  浏览次数:20695 次

鼠标放在 img上 变成另一张图片,移走鼠标又变回原来的
鼠标放在 img上  变成另一张图片,移走鼠标又变回原来的,怎么实现不了啊 代码如下:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    
   <style>
           
        .contract
        {
          src:url(Image/menuContractUs.jpg)
        }
       .contract1
       {
        src:url(Image/menuOnContractUs.jpg)
        }
   </style>
   
</head>
<body>
    <form id="form1" runat="server">
    <div>     
       <ul>          
            <li>
             <a href="Index.aspx" target="_blank"><img  src="Image/menuContractUs.jpg"  onmousemove="this.className='contract1'" onmouseout="this.className='contract'"/></a>
            </li>
        </ul>
    </div>
    </form>
</body>
</html>

上面是代码,各位高手看看哪里错了,谢谢 

------解决方案--------------------
src:url(Image/menuOnContractUs.jpg),没有src的样式
写个例子你看下

 #a1 div{
   width:200px;
   height:50px;
   background:url(http://www.baidu.com/img/baidu_jgylogo3.gif)  no-repeat ;
 } 
 #a1:hover div{
   background:url(http://www.google.com.hk/images/srpr/logo3w.png)  no-repeat ;
 } 
</style>  
 <a href="#" id="a1"><div></div></a>

------解决方案--------------------
<div id="form2">             
<ul>                       
<li>              
<a href="Index.aspx" target="_blank"  onmousemove="this.className='contract1'" onmouseout="this.className='contract'" class="contract"></a>             
</li>         
</ul>     
</div> 

<style type="text/css">
*{margin:0;padding:0;}
#form2 a{display:block;width:310px;height:220px;}
.contract{background:url(images/1.png)}        
.contract1{background:url(images/2.png)} 
</style>
------解决方案--------------------