百度空间 | 百度首页 
 
查看文章
  
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