用JS的鼠标事件，onmouseover()方法，当鼠标移动到a标签的时候把那个图片的display：none，变成block，只要按照这个步骤走就可以做到的。
第一种：把如下代码加入<body>区域中
<body onclick=Clicked()>
<SCRIPT>
<!--
transeffect = 0
theeffects = new Array(24)
theeffects[0] = “盒状收缩“
theeffects[1] = “盒状向外“
theeffects[2] = “圆形收缩“
theeffects[3] = “圆形向内“
theeffects[4] = “从下向上“
theeffects[5] = “从上向下“
theeffects[6] = “从左向右“
theeffects[7] = “从右向左“
theeffects[8] = “百页窗形向右“
theeffects[9] = “百页窗形向下“
theeffects[10] = “棋盘形交叉向右“
theeffects[11] = “棋盘形交叉向下“
theeffects[12] = “随意溶解形“
theeffects[13] = “左右向内“
theeffects[14] = “左右向外“
theeffects[15] = “上下向内“
theeffects[16] = “上下向外“
theeffects[17] = “条纹状向左下“
theeffects[18] = “条纹状向左上“
theeffects[19] = “条纹状向右下“
theeffects[20] = “条纹状向右上“
theeffects[21] = “溶解水平状“
theeffects[22] = “溶解上下状“
theeffects[23] = “随着溶解“
current_image = “image1“
function Clicked() {
var the_image, the_other
text2.style.visiblity=“hidden“
if (image1.style.visibility==“inherit“) {
the_image = image2
the_other = image1
}
else {
the_image = image1
the_other = image2
}
the_other.style.visibility=“hidden“
the_image.filters.item(0).Apply()
the_image.filters.item(0).Transition = transeffect
the_image.filters.item(0).Play(2.0)
the_image.style.visibility=“inherit“
text2.innerText=theeffects[transeffect]
transeffect++
if (transeffect == 24)
transeffect = 0
text2.style.visibility=“visible“
}
//-->
</SCRIPT>
<DIV id=image>
<DIV id=text1></DIV><IMG id=image1
src=“Upfiles/200422684962.gif“
style=“FILTER: revealTrans(Duration=3.0,Transition=1)VISIBILITY: hidden“><IMG id=image2 src=“Upfiles/200422684962.gif“
style=“FILTER: revealTrans(Duration=3.0,Transition=1)VISIBILITY: hidden“></DIV>
<DIV id=text2></DIV>
第二步：把<body>中的内容改为：
<body bgcolor=“#fef4d9“ onclick=Clicked()>
over feboy
第二种：
第一步、把下面这段代码插入到页面的<head>与</head>之间：
<script language=javascript>
isns = navigator.appName == "Netscape"
function ztstr(id,picurl,linkurl)
{
this.id=id
this.picurl=picurl
this.linkurl=linkurl
}
zhuanti=new Array()
imgcount=1
frequency=10*1000//30秒
//在这里修改图片的路径和链接
zhuanti[1]=new ztstr('1','http://www.windstudio.net/banner/banner1.gif','http://www.windstudio.net')
zhuanti[2]=new ztstr('2','http://www.windstudio.net/banner/banner2.gif','http://www.windstudio.net')
zhuanti[3]=new ztstr('3','http://www.windstudio.net/banner/banner3.gif','http://www.windstudio.net')
zhuanti[4]=new ztstr('4','http://www.windstudio.net/banner/banner4.gif','http://www.windstudio.net')
imgcount=zhuanti.length-1
for(i=1i<=imgcounti++)
{
eval_r("img"+i+"=new Image()")
eval_r("img"+i+".src=zhuanti["+i+"].picurl")
}
nn=1
var rand1 = 0
var useRand = 0
function swapPic() {
var imgnum = zhuanti.length - 1
do {
var randnum = Math.random()
rand1 = Math.round((imgnum - 1) * randnum) + 1
} while (rand1 == useRand)
useRand = rand1
// alert(useRand)
nn=useRand
change_img()
}
function change_img()
{
eval_r('document.pic.src=img'+nn+'.src')
nn++
if(nn>imgcount) nn=1
if(!isns)
{
pic.filters.item(0).apply()
pic.style.visibility='visible'
pic.filters.item(0).play()
setTimeout("pic.style.visibility='hidden'",frequency)
}
else
document.pic.visibility='visible'
tt=setTimeout('change_img()',frequency)
}
function pictarget()
{
tt=nn-1
if(tt<1) tt=imgcount
cururl=zhuanti[tt].linkurl
window.open(cururl)
}
function ini()
{
if(!isns)
{
spacewidth=Math.round((divmask.offsetWidth-770)/2)
dmwidth=770+spacewidth
dmheight=divmask.offsetHeight
totalstep=50
timeout=50
dmstepw=Math.round(770/totalstep)
dmsteph=Math.round(dmheight/totalstep)
setTimeout('hidimg()',3000)
}
else swapPic()
}
function hidimg()
{
dmwidth-=dmstepw
dmheight-=dmsteph
eval_r('divmask.style.clip="rect(0,'+dmwidth+','+dmheight+',0)"')
hdrun=setTimeout('hidimg()',timeout)
if(dmwidth<=spacewidth&&dmheight<=0)
{
divmask.style.visibility='hidden'
clearTimeout(hdrun)
swapPic()
}
}
</script>
第二步、调用定义好的javascript函数，在<body>里加上以下代码：
<body onload=swapPic()>
第三步、在页面中插入图片和链接：
<a href=javascript :void(null) onclick='javascript :pictarget()return false'><img src="http://www.windstudio.net/banner/banner1.gif" width=468 height=60 border=0 name=pic style="visibility:hiddenfilter:revealtrans(duration=2.0,transition=12)"></a>
好，到这里就大功告成了。另外，试试改变transition的数值，可以得到不同的转换效果哟~~
Not a big deal!
<tr><td onmouseover="changePicture('香格里拉.jpg')">香格里拉</td>
<td onmouseover="changePicture('避暑山庄.jpg')">避暑山庄</td>
</tr>
<tr><td><img id="pic" alt="图片" src="香格里拉.jpg"/></td></tr> function changePicture(url){
pic.src=url
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）