主题:  这种鼠标触发后的变化,是JS来写的吗?还是样式定义的?

vickie_5d

职务:普通成员
等级:3
金币:2.0
发贴:946
注册:2003/5/23 12:33:46
#12004/7/23 10:06:32
www.720thinker.com/htm/list-s.asp?unid=174
看看这个网站,左边的导航栏目,鼠标触发后,四周有圆角的边框线,背景色也改变了,可是我看了一下,根本不是翻转图。请教一下,这是怎么做的呢??



moonly

职务:普通成员
等级:4
金币:2.0
发贴:1614
注册:2004/7/5 11:38:25
#22004/7/23 11:22:21
看它代码

<td height="30">
<div align="center">
<a href="list-s.asp?unid=171" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image18','','images/s11_33.gif',1)" hidefocus=true><img src="images/s1_33.gif" name="Image18" width="175" height="30" border="0">
</a>
</div>
</td>

是用图片做的

不过它的图片是个变量

另用一段javascript语言来指定的
<SCRIPT>
<!--
window.defaultStatus="http://WWW.720thinker.com";

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#"!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?")>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</SCRIPT>



moonly

职务:普通成员
等级:4
金币:2.0
发贴:1614
注册:2004/7/5 11:38:25
#32004/7/23 11:26:21
我也不太懂
不过要达到他的效果
我觉得有更简单的方法

你用另存图片看看
它滑过的效果还是一张图片



moonly

职务:普通成员
等级:4
金币:2.0
发贴:1614
注册:2004/7/5 11:38:25
#42004/7/23 11:27:56
他不是用样式定义的
用样式做会简单得多



vickie_5d

职务:普通成员
等级:3
金币:2.0
发贴:946
注册:2003/5/23 12:33:46
#52004/7/23 13:05:21
onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image18','','images/s11_33.gif',1)" hidefocus=true>
刚开始看这个的时候,还真是以为是翻转图做的。
不过没有皤转后的图片,只有未触发时,我们看到的图片
这个页存下来后,有好几个JS文件



vickie_5d

职务:普通成员
等级:3
金币:2.0
发贴:946
注册:2003/5/23 12:33:46
#62004/7/23 13:19:09
onmouseout=MM_swapImgRestore()
href="http://www.720thinker.com/htm/list-s.asp?unid=171"

真是不明白的,为什么在OUT的时候,要链在一个网址上呢??
而且还是一个页面

JS的脚本没看懂
其实不用变量也可以的,做二个图。
只是不明白的,为什么要用变量?



吃鱼专家

职务:普通成员
等级:6
金币:11.0
发贴:5312
注册:2004/1/17 13:07:16
#72004/7/23 13:34:42
应CSS就可以了



vickie_5d

职务:普通成员
等级:3
金币:2.0
发贴:946
注册:2003/5/23 12:33:46
#82004/7/23 14:49:42
CSS 怎樣來寫它的鼠標觸發狀態顯示的是圓角矩形呢??