用图像置换方法实现切换按钮
2007-06-05 12:04
579 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="JavaScript">
//这是用于新类ToggleButton的构造函数
//调用它将创建ToggleButton对象，
//并把必需要标签<a>和<img>输出到当前位置的指定文档
//因此，不能从当前事件处理程序为当前文档调用它
//参数：
//document :要在其中创建按钮的Document对象
//checked:布尔变量，说明按钮初始时是否选中了
//label:可选字符串，指定了按钮上显示的文本
//onclick:一个可选函数，在切换按钮被点击是调用。可以将一个布尔值传递给它，说明按钮的新状态。
//也可以传递给它一个字符串，该串被转换一个函数
//这个函数将得到一个名为state的布尔函数
function ToggleButton(document,checked,label,onclick){
//初次被调用时我们必须进行一些特殊处理
//首先，既然已经创建了原形对象，就可以设置它的方法
//其次，必须装载要用的图片
//这样我们在使用图像时，它们已经在缓存中了
if(!ToogleButton.prototype.over) {
//初始化原形对象来创建我们的方法。
ToogleButton.prototype.over = _ToogleButton_over;
ToogleButton.prototype.out = _ToogleButton_out;
ToogleButton.prototype.click = _ToogleButton_click;
//下面我们创建一个Image对象的数组，并赋这些对象URL
//图像的URL是可配置的，它们存放在构造函数自身的数组属性中。
//以下将对它们进行初始化
//由于Netscape中有一个bug
//我们必须支持这些图像的引用，因此我们把这个数组保存为构造函数的一个属性，而不是局部变量
ToggleButton.Images = new Array(4);
for(var i = 0;i<4;i++){
ToogleButton.Images[i] = new Image(ToogleButton.width,ToogleButton.height);
ToogleButton.Images[i].src= ToogleButton.Imagenames[i];
}
}
//保存传递过来的某些参数
this.document = document;
this.checked = checked;
//记住mouse当前并不顶层。
this.highlighted = false;
//保存onclick参数，以便点击按钮时调用它
//如果它还不是一个函数，则将它转换成函数，惟一的参数名为state.
this.onclick = onclick;
if(typeof this.onclick == "string"){
this.onclick = new Function("state",this.onclick);
}
//在document.images[]数据中设置存放該复选框图像的条目
var index = document.images.length;
//下面输出复选框的HTML代码，使用<a> and <img>标记
//虽然这里输出的事件处理程序有些混乱，但对該类的操作至关重要
//以下定义了_tb属性和over(),out(),click()方法
document.write(' <a href="about:blank"'+
'onmouseover="document.images['+index+']._tb.over();return true;" '+
'onmouseout="document.images['+index+']._tb.out()" '+
'onclick="document.images['+index+']._tb.click(); return false;">');
document.write('<img src="'+ToogleButton.Imagenames[this.ckecked+0]+'"'+
'width'+ToogleButton.width+
'height'+ToogleButton.height+
'border="0" hspace="0" vspace="0" align="absmiddle">');
if(label) document.write(label);
document.write('</a></br>');
//既然我们已经输出了<img>标记
//那么就保存ToogleButton对象中创建的对Image 对象的引用
this.image = document.images[index];
//创建一个从image对象到ToogleButton对象的摙接
//通过Image对象定义_tb属性，可以实现这一点
this.image._tb = this;
}
//这将成为OVER方法
function _ToogleButton_over()
{
//更换图像要记得高亮显示
this.image.src = ToogleButton.Imagenames[this.checked+2];
this.highlighted = true;
}
//这将成为out方法
function _ToogleButton_out()
{
//更换图像要记得取消高亮显示
this.image.src = ToogleButton.Imagenames[this.checked+0];
this.highlighted = false;
}
//这将成为click方法
function _ToogleButton_click()
{
//切换按钮的状态，更换图像，
//如果指定了ToogleButton对象的onclick方法，就调用它
this.checked = !this.checked;
this.image.src = ToogleButton.Imagenames[this.checked+this.highlighted*2];
if(this.onclick)
this.onclick(this.checked);
}
//初始化描述复选框图像的静态类属性
//这些只是默认值。通过给他们赋予新值，可以覆盖它们
//但是只能在创建ToogleButton之前覆盖它们
ToogleButton.Imagenames = new Array(4);
ToogleButton.Imagenames[0]= "images/button0.gif"; //未被选中的复选框
ToogleButton.Imagenames[1]= "images/button1.gif"; //具有复选标记的复选框
ToogleButton.Imagenames[2]= "images/button2.gif"; //未被选中但高亮显示的复选框
ToogleButton.Imagenames[3]= "images/button3.gif"; //被选中且高亮显示的复选框
ToogleButton.width = ToogleButton.height = 25;//所有图片的大小
</script>
</HEAD>
<BODY>
optional extras:<br>
<script language="JavaScript1.1">
var tb1 = new ToogleButton(document,true,"56K Modem");
var tb2 = new ToogleButton(document,false,"Laser Printer",function(checked){alert("printer:"+clicked);});
var tb3 = new ToogleButton(document,false,"Tape Backup Unit","alert('Tape backup:'+state)");
</script>
<FORM METHOD=POST ACTION="">
<INPUT TYPE="button" NAME="" value="Report Button States" onclick="alert(tb1.checked +'/n'+tb2.checked+'/n'+tb3.checked)">
<input type="button" value="Reset Buttons" onclick="if(tb1.checked) tb1.checked(); if(tb2.checked) tb2.checked();if(tb3.checked) tb3.checked();">
</FORM>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="JavaScript">
//这是用于新类ToggleButton的构造函数
//调用它将创建ToggleButton对象，
//并把必需要标签<a>和<img>输出到当前位置的指定文档
//因此，不能从当前事件处理程序为当前文档调用它
//参数：
//document :要在其中创建按钮的Document对象
//checked:布尔变量，说明按钮初始时是否选中了
//label:可选字符串，指定了按钮上显示的文本
//onclick:一个可选函数，在切换按钮被点击是调用。可以将一个布尔值传递给它，说明按钮的新状态。
//也可以传递给它一个字符串，该串被转换一个函数
//这个函数将得到一个名为state的布尔函数
function ToggleButton(document,checked,label,onclick){
//初次被调用时我们必须进行一些特殊处理
//首先，既然已经创建了原形对象，就可以设置它的方法
//其次，必须装载要用的图片
//这样我们在使用图像时，它们已经在缓存中了
if(!ToogleButton.prototype.over) {
//初始化原形对象来创建我们的方法。
ToogleButton.prototype.over = _ToogleButton_over;
ToogleButton.prototype.out = _ToogleButton_out;
ToogleButton.prototype.click = _ToogleButton_click;
//下面我们创建一个Image对象的数组，并赋这些对象URL
//图像的URL是可配置的，它们存放在构造函数自身的数组属性中。
//以下将对它们进行初始化
//由于Netscape中有一个bug
//我们必须支持这些图像的引用，因此我们把这个数组保存为构造函数的一个属性，而不是局部变量
ToggleButton.Images = new Array(4);
for(var i = 0;i<4;i++){
ToogleButton.Images[i] = new Image(ToogleButton.width,ToogleButton.height);
ToogleButton.Images[i].src= ToogleButton.Imagenames[i];
}
}
//保存传递过来的某些参数
this.document = document;
this.checked = checked;
//记住mouse当前并不顶层。
this.highlighted = false;
//保存onclick参数，以便点击按钮时调用它
//如果它还不是一个函数，则将它转换成函数，惟一的参数名为state.
this.onclick = onclick;
if(typeof this.onclick == "string"){
this.onclick = new Function("state",this.onclick);
}
//在document.images[]数据中设置存放該复选框图像的条目
var index = document.images.length;
//下面输出复选框的HTML代码，使用<a> and <img>标记
//虽然这里输出的事件处理程序有些混乱，但对該类的操作至关重要
//以下定义了_tb属性和over(),out(),click()方法
document.write(' <a href="about:blank"'+
'onmouseover="document.images['+index+']._tb.over();return true;" '+
'onmouseout="document.images['+index+']._tb.out()" '+
'onclick="document.images['+index+']._tb.click(); return false;">');
document.write('<img src="'+ToogleButton.Imagenames[this.ckecked+0]+'"'+
'width'+ToogleButton.width+
'height'+ToogleButton.height+
'border="0" hspace="0" vspace="0" align="absmiddle">');
if(label) document.write(label);
document.write('</a></br>');
//既然我们已经输出了<img>标记
//那么就保存ToogleButton对象中创建的对Image 对象的引用
this.image = document.images[index];
//创建一个从image对象到ToogleButton对象的摙接
//通过Image对象定义_tb属性，可以实现这一点
this.image._tb = this;
}
//这将成为OVER方法
function _ToogleButton_over()
{
//更换图像要记得高亮显示
this.image.src = ToogleButton.Imagenames[this.checked+2];
this.highlighted = true;
}
//这将成为out方法
function _ToogleButton_out()
{
//更换图像要记得取消高亮显示
this.image.src = ToogleButton.Imagenames[this.checked+0];
this.highlighted = false;
}
//这将成为click方法
function _ToogleButton_click()
{
//切换按钮的状态，更换图像，
//如果指定了ToogleButton对象的onclick方法，就调用它
this.checked = !this.checked;
this.image.src = ToogleButton.Imagenames[this.checked+this.highlighted*2];
if(this.onclick)
this.onclick(this.checked);
}
//初始化描述复选框图像的静态类属性
//这些只是默认值。通过给他们赋予新值，可以覆盖它们
//但是只能在创建ToogleButton之前覆盖它们
ToogleButton.Imagenames = new Array(4);
ToogleButton.Imagenames[0]= "images/button0.gif"; //未被选中的复选框
ToogleButton.Imagenames[1]= "images/button1.gif"; //具有复选标记的复选框
ToogleButton.Imagenames[2]= "images/button2.gif"; //未被选中但高亮显示的复选框
ToogleButton.Imagenames[3]= "images/button3.gif"; //被选中且高亮显示的复选框
ToogleButton.width = ToogleButton.height = 25;//所有图片的大小
</script>
</HEAD>
<BODY>
optional extras:<br>
<script language="JavaScript1.1">
var tb1 = new ToogleButton(document,true,"56K Modem");
var tb2 = new ToogleButton(document,false,"Laser Printer",function(checked){alert("printer:"+clicked);});
var tb3 = new ToogleButton(document,false,"Tape Backup Unit","alert('Tape backup:'+state)");
</script>
<FORM METHOD=POST ACTION="">
<INPUT TYPE="button" NAME="" value="Report Button States" onclick="alert(tb1.checked +'/n'+tb2.checked+'/n'+tb3.checked)">
<input type="button" value="Reset Buttons" onclick="if(tb1.checked) tb1.checked(); if(tb2.checked) tb2.checked();if(tb3.checked) tb3.checked();">
</FORM>
</BODY>
</HTML>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 用图像置换方法切换按钮
- 使用classList来实现两个按钮样式的切换方法
- JavaScript实现点击按钮切换网页背景色的方法
- 利用JS实现点击按钮后图片自动切换的简单方法
- Android开发实现按钮点击切换背景并修改文字颜色的方法
- JavaScript实现点击按钮切换网页背景色的方法
- 利用JS实现点击按钮后图片自动切换的简单方法
- 方法自身实现异部调用和WinForm上图片切换效果
- 高斯图像滤波原理及其编程离散化实现方法
- 怎样对齐文本框和图像(image)按钮实现三点一线
- javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
- 图像灰度化方法总结及其VC实现
- 图像滤波常见方法原理总结及VC下实现
- Android_UI_点击按钮切换背景效果实现
- Flex 如何实现按钮之间的切换，按钮点击事件
- Android仿360市场下载按钮的实现方法
- C# Winform实现捕获窗体最小化、最大化、关闭按钮事件的方法
- 淘宝首页 图片滑动切换效果 基于CSS3的transition方法实现
- 用户管理：登录窗体通过ShowDialog()方法实现切换
- Android Fragment实现按钮间的切换