用图像置换方法切换按钮
2007-06-05 12:09
316 查看
<!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>
相关文章推荐
- 用图像置换方法实现切换按钮
- 用JQ中的fadeOut和fadeIn方法,当点击上一张和下一张按钮时进行图片的切换~
- 底部多个按钮切换Fragment,不重新实例化简单方法!
- 在Windows7的超级任务栏设置“显示桌面”按钮和“3D窗口切换按钮”的方法
- phpcms上传图片时,点击【上传到服务器上】按钮,显示:缺少图像源地址的解决方法
- 在HTML页面中点不同按钮在同一个IFRAME分别切换不同子页面的方法
- Win8.1微软拼音输入法隐藏中英文切换按钮的方法
- Android开发实现按钮点击切换背景并修改文字颜色的方法
- Android开发 点击按钮切换背景的两种方法
- JavaScript实现点击按钮切换网页背景色的方法
- 关于bootstarp的Carousel左右切换按钮背景颜色的去掉方法
- WINCE位图按钮切换闪烁的问题解决方法
- 通过单击字号中的“大”“中”“小”来切换不同大小的字号和通过单击不同颜色方框的图像按钮来切换不同的背景色
- JavaScript实现点击按钮切换网页背景色的方法
- C# PDF Page操作设置页面切换按钮的方法
- 利用JS实现点击按钮后图片自动切换的简单方法
- Applet制作动态按钮(图像、声音的切换)
- Android平台上捕获Back键的事件,Back键是手机上的后退键,一般的软件不捕获相关信息可能导致你的程序被切换到后台,而回到桌面的尴尬情况,在Android上有两种方法来获取该按钮的事件
- 利用JS实现点击按钮后图片自动切换的简单方法