java-css、js鼠標經過時更改圖片

css、js鼠標經過時更改圖片

代碼和圖片在這個鏈接裡
http://yunpan.cn/cjVAhebUVY7vP 訪問密碼 6138
我想在這裡，

<!div style="height: 100px; color: #888888;" class="tp" onmouseover="this.style.background='#FFC000',this.style.color='#ffffff'" onmouseout="this.style.background='#ffffff',this.style.color='#888888'">

鼠標移動上去時圖片變成第二張，但是圖片位置不變。請教一下大家，
在此多謝了。

最佳回答：

做成一個函數就好了。。然後over和out事件改成這樣

    <script>
        function mouseEvent(o, over) {
            o.style.background = over ? '#ffc000' : '#ffffff';
            o.style.color = over ? '#ffffff' : '#888888';
            var img = o.getElementsByTagName('img')[0];
            if (!img) return;
            img.src = img.src.replace(over ? '1.png' : '2.png', over ? '2.png' : '1.png');
        }
    </script>

 <div style="height: 100px; color: #888888;" onmouseover="mouseEvent(this,true)"
 onmouseout="mouseEvent(this)">...............................
</div>