Dreamweaver(以下简称DW)是一款流行的网页设计软件,拥有丰富的功能,其中就包括鼠标经过时显示图片。那么,具体如何设置呢?
1. 使用CSS设置
通过CSS设置可以精细地控制鼠标经过时显示的图片。方法如下:
1) 在
标签中添加CSS代码。例如:
#img{
background-image:url(picture.jpg);
width:100px;
height:100px;
}
#img:hover{
background-image:url(picture2.jpg);
}
2) 在
标签中添加HTML代码。例如:
3) 运行网页,将鼠标移到‘img’上,就会发现鼠标经过时图片变为picture2.jpg。
2. 使用DW内置工具
除了使用CSS,DW还有自带的内置工具来设置鼠标经过的图片。方法如下:
1) 首先,在DW中打开相应页面。选择要添加鼠标经过图片的元素。
2) 点击“属性检查器”下拉菜单选择“交互”选项卡,选择“鼠标移上时”或“鼠标移开时”,并点击“加菜单”图标,“加菜单”可添加预设的特效,例如渐隐渐显、弹出或变大缩小。
3) 选择“图片操作”并勾选“切换图像”框,指定鼠标移上去时的图片路径。完成后保存,再次预览即可。
值得注意的是,鼠标经过图片不宜过大和过多,否则会影响页面的加载速度和用户体验。同时,为了提高兼容性,建议使用较小的gif格式图片。