第13章综合案例—儿童用品网上商店课题.ppt

13.9　交互效果设计 接下来进行一些交互性的动态设计，这里主要是为网页元素增加鼠标指针经过时的效果。 设置不同位置的鼠标指针经过效果 13.9.1　次导航栏 为次导航栏增加鼠标指针经过效果，首先准备一个和原背景图像的形状相同、只是把白色改为黄色的新图像。 次导航栏中鼠标指针经过时的背景图像 13.9.2　主导航栏 主导航栏的做法和次导航栏一样，准备背景图像。 主导航栏中鼠标指针经过时的背景图像 13.9.3　账号区 接下来实现“登录账号”和“购物车”图像的鼠标经过效果。实际上，这里同样是更换背景图像，不过这里还可以介绍一种略有变化的方法。上面的方法中，为了实现鼠标指针经过连接时更换背景图像的效果，制作两个独立的图像文件。这样会导致一个问题，当页面上传到了服务器上，这样访问者浏览这个页面时，各个图片的下载会有先有后，有的时候，如果网络速度不是很快，当鼠标指针经过某个链接的时候，所需要更换的图像文件还没有下载到访问者的计算机上，这时就会出现短暂的停顿，等该图像文件下载完毕后才会出现，这样就影响了访问者的体验。 账号区的新背景图像 13.9.4　图像边框 接下来实现当鼠标指针经过某个展示的图像时，边框发生变化的效果。 为图像设置鼠标经过时边框变化的效果 13.9.5　产品分类 最后，实现右边栏中“产品分类”列表的鼠标指针经过效果。 为“产品分类”列表设置鼠标指针经过效果 13.10　遵