网页设计技巧：[1]制作鼠标经过效果

时间：2026-02-14 11:57:57

1、由于涉及两种背景的更改，因此，我们需要准备两张图片，用于在鼠标离开和鼠标经过时显示不同的图片。注：两张图片的尺寸应保持一致。

网页设计技巧：[1]制作鼠标经过效果

2、接下来，打开Dreamveaver，新建一空白HTML文件。并输入如下所示的HTML代码：

<body>

<div id="frame1">

<div><img src="../images/out.jpg" id="link1" /></div>

<a href="#" style="size:24px;"

onmouseover="mouseover()"

onmouseout="mouseout()" >

我的微博(http://weibo.com/feifeidown)</a>

</div>

</body>

网页设计技巧：[1]制作鼠标经过效果

3、此时效果如图所示：

网页设计技巧：[1]制作鼠标经过效果

4、下面我们加入CSS部分，由于对网页进行美化，代码如下所示：

<style type="text/css">

a {text-decoration:none; size:30px; margin-top:15px; color:#FFFF00;}

a:hover {text-decoration:underline; color:#00CC66;}

#frame1 {padding-top:20px; height:373px; width:540px;text-align:center; background-color:#006633;}

</style>

网页设计技巧：[1]制作鼠标经过效果

5、对应效果如图：

网页设计技巧：[1]制作鼠标经过效果

6、最后加入图片切换效果，利用JS进行控制，当鼠标经过时改变背景色以及图片。代码如下：

<script type="text/javascript">

function mouseover()

{

document.getElementById('link1').src ='../images/in.JPG';

document.getElementById('frame1').style.background='#ff3300';

}

function mouseout()

{

document.getElementById('link1').src ='../images/out.JPG';

document.getElementById('frame1').style.background='#006633';

}

</script>

网页设计技巧：[1]制作鼠标经过效果

7、然后就设计完成，大家可以看一下效果,当鼠标停留在上面时，背景和图片均发生改变。

网页设计技巧：[1]制作鼠标经过效果