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

时间：2024-10-12 02:16:16

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>

3、此时效果如图所示：

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>

5、对应效果如图：

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>

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