一、鼠标悬停时背景改变的实现有三种方式:
1,通过矩形框,添加悬停时改变矩形框的属性来实现变化
2,通过image map,当悬停时改变部件装载的图片来实现,一个image支持5张图片(与矩形框相比,image的优势在于可以透明,但是在编辑时是淡蓝色的,可以看到位置。而矩形框一直是“隐身”的!)
image map的另一个特殊用法是他可以在一张大的image上实现局部超链接
注意:图片素材要事先准备好
3,通过改变动态面板的状态来实现(五个状态)
这几个方法在功能强大上来说是递进关系,除非是小部件的单独效果,想要得到整体的变化还是要用动态面板来实现,我已经上了一次当,引以为戒。
二、导航
以淘宝网的分类导航为例:
http://www.taobao.com
先把大致情况列出来:
构思好了之后,开始想如何实现:
在做的时候遇到的问题:
1,因为想要把三种方法联系一下,所以第一次采用的1,2方法来实现悬停效果,结果出了问题,由于悬停时是一个整体在变化,所以必须用方法3
2,看了老师的案子,发现自己只做一个一级导航是不能全部说明问题的,因为当分类多了,问题就会出现:
先隐藏所有的B级分类,是为了避免悬停到某一级是出现两个B级分类。后面的设置为normal也是差不多的道理。
最后两步是真正想要的效果,也是很多人只能添加的效果
3,对哪一个部件添加效果,就是针对把一个部件产生作用,值得一提的是移入和移出的实现,
对于上图的矩形框来说,如果鼠标移动到了图一上,也是相当于移出了矩形框
为了实现移出移入效果,可以在特定区域添加一个透明矩形框来帮助实现