移动鼠标改变单元格背景色(图)

所属分类:[JS源码] | 发表于:2010-2-3 9:35:39 | 人气(896)

QQ问问的一个网页这样问道:

 

JS onMouseMove触发背景事件。

写一个onMouseMove事件, 使鼠标移动到一个td后,背景色改变,其中这个背景色是一张图片..

请教JS代码写法.

function move(){

}

高手快来~~~~~!!

 

 

我这里提供一个了一个源代码供参考,另外先说明一下。用onMouseMove会使鼠标只要在单元格里移动一下就会触发,建议使用onmouseover表示移到单元格后只触发一次,下一次再移上去时再触发,不过如果非要用onmousemove的话,那你就把下面的替换一下,这种方法可以不用去找ID号了,一个方法就可以。

 

 

EXFCODE:
<!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>
    <title>移动鼠标改变单元格背景色(图) - 玄峰软件</title>
    <script type="text/javascript">
        function Move(td)
        {
            td.style.backgroundImage = "url(http://www.exfsoft.com/logo.gif)"; //改变背景图片
        }
        function Move1(td)
        {
            td.style.color = "#FFF"; //文字颜色
            td.style.backgroundColor = "#F00"; //背景颜色
        }
    </script>
</head>
<body>
    <table width="200" border="1">
        <tr>
            <td onmouseover="Move(this)">你好</td>
            <td onmouseover="Move1(this)">大家好</td>
        </tr>
        <tr>
            <td onmouseover="Move(this)">新年好</td>
            <td onmouseover="Move1(this)">大家新年好</td>
        </tr>
    </table>
</body>
</html>

 

另外这里是DEOM:http://www.exfsoft.com/demo/ChangeTableBG/ChangeTableBG.htm

0    0