图片交换效果,在标准中如何做?

[复制链接]
查看11 | 回复0 | 2009-1-30 06:28:38 | 显示全部楼层 |阅读模式
比如我做一个菜单,是两张图片交换的,就是鼠标没动A时,是一张图,当我鼠标移到A时就变成另一张图A1,在DW中是用onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage(这种方法,但在标准呢,该如何做?

                                                                                                要做十个菜单,每个菜单的图片都不相同。为A、B、C、D、E、F、。。。与这组图相对应的是A1、B1、C1。。。当鼠标移到A图片时,显示A1图,当鼠标移到B图片时,显示B1图..请问用CSS怎么实现---------------请试试下面的代码:<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>菜鹰菜单</title><style type="text/css">#menulist {//*设定div的Box属性*//border: 1px solid #000;margin: 0px;width: 660px;padding: 5px;}#menulist ul, #menulist li {//*设定限制于div内的ul和li的属性*//display: inline;margin: 0;padding: 0;}.menu a:active,.menu a:visited,.menu a:link {display: inline;margin: 0;padding: 5;height:20px;width:100px;font-size:9pt;color: #696969;background-image:url(bt_off.gif);text-decoration: none;}.menu#a1 a:hover {color: #ff0000;background-image:url(bt_on1.gif);font-weight: bold;text-decoration: none;}.menu#a2 a:hover {color: #ff0000;background-image:url(bt_on2.gif);font-weight: bold;text-decoration: none;}.menu#a3 a:hover {color: #ff0000;background-image:url(bt_on3.gif);font-weight: bold;text-decoration: none;}.menu#a4 a:hover {color: #ff0000;background-image:url(bt_on4.gif);font-weight: bold;text-decoration: none;}.menu#a5 a:hover {color: #ff0000;background-image:url(bt_on5.gif);font-weight: bold;text-decoration: none;}.menu#a6 a:hover {color: #ff0000;background-image:url(bt_on6.gif);font-weight: bold;text-decoration: none;}</style></head><body><div id="menulist" align="center"><ul class="menu"><li id="a1"><a href="#">首页</a></li><li id="a2"><ahref="#">产品介绍</a></li><li id="a3"><ahref="#">服务介绍</a></li><li id="a4"><ahref="#">技术支持</a></li><li id="a5"><ahref="#">立即购买</a></li><li id="a6"><ahref="#">联系我们</a></li></ul></div></body></html>(效果见附件)附件:CSS导航菜单(图片).rar
                                       
提问者对答案的评价:

                                                                                                哇好厉害啊那用"插入"--"鼠标经过图像"这种方式和你的那个方法有那些区别呢?
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

主题

0

回帖

4882万

积分

论坛元老

Rank: 8Rank: 8

积分
48824836
热门排行