百度空间 | 百度首页 
 
查看文章
 
OnmouseOver表格内图片和背景图片都变换的效果了
2008年05月28日 星期三 下午 06:00

作者:front  
本文出处:hi.baidu.com/frontlon (转载请注明出处)

今天终于做出了OnmouseOver表格内图片和背景图片都变换的效果了

最近制作网站中遇到一个问题,如果制作一个鼠标交换按钮,按钮的大小可以无限扩展,且按钮的文字是从数据库中随机读取。这样的话使用一般的图片交替明显不现实。

经过思考,我是这样制作的:
与制作网页边框的原理一样,先插入一个3*3的表格,并把按钮切成9块,四个角插入图片,其余的使用单元格背景。这样表格就可以随文字无限延伸。
可是这样做必须使<table Onmouseover="">改变很多图,其中还有背景图。
在网上找了好多Javascript,均无法达到我想要的效果。琢磨了好几个小时,终于琢磨出了代码,看到自己的成果,心里很是高兴。

今天拿来和大家分享哈!!

插入到<head>...</head>区域。可以使用外挂JS。

<script language="javascript">
var overnum= new Array(4);
var overletter=new Array(4);
for(i=1;i<=4;i++)
{
overnum[i]="Images/outb_0"+i+".gif";
overletter[i]="Images/overb_0"+i+".gif";
}
function overn(i)
{
if(document.images)
{
document.images["image1"].src=overnum[1];
document.images["image2"].src=overnum[2];
document.images["image3"].src=overnum[3];
document.images["image4"].src=overnum[4];
document.getElementById("tbl1").style.background="url(images/outbg_01.gif)";
document.getElementById("tbl2").style.background="url(images/outbg_02.gif)";
document.getElementById("tbl3").style.background="url(images/outbg_03.gif)";
document.getElementById("tbl4").style.background="url(images/outbg_04.gif)";
document.getElementById("tbl5").style.background="url(images/outbg_05.gif)";
}
}
function overl(i)
{
if(document.images)
{
document.images["image1"].src=overletter[1];
document.images["image2"].src=overletter[2];
document.images["image3"].src=overletter[3];
document.images["image4"].src=overletter[4];
document.getElementById("tbl1").style.background="url(images/overbg_01.gif)";
document.getElementById("tbl2").style.background="url(images/overbg_02.gif)";
document.getElementById("tbl3").style.background="url(images/overbg_03.gif)";
document.getElementById("tbl4").style.background="url(images/overbg_04.gif)";
document.getElementById("tbl5").style.background="url(images/overbg_05.gif)";
}
}
</script>



之后定义项目:
<table onMouseover="overl()" onMouseout="overn()">    

<img  name="image1" src="pic.gif">   //图片定义
<td id="tbl1" background="bg.gif">   //背景定义





问题解决!


类别:网页设计/asp | 添加到搜藏 | 浏览() | 评论 (0)
 
最近读者:
 
网友评论:
发表评论:
姓 名:
网址或邮箱: (选填)
内 容:
验证码: 请点击后输入四位验证码,字母不区分大小写
      

     

©2009 Baidu