- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <title>photo.html</title>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- </head>
- <body>
- <div style="position:absolute;border-style:dotted;width:110px;left:400px;top:70px">
- <img src1="zgl.jpg"/>
- </div>
- <div style="position:absolute;left:450px;top:310px">
- <input type="button" value="显示"/>
- <input type="button" value="隐蔽"/>
- </div>
- <script type="text/javascript">
- //实例化Photo对象
- var photo = new Photo();
- //定位"隐藏"按钮,同时添加单击事件
- document.getElementsByTagName("input")[1].onclick=function(){
- //隐蔽图片
- photo.hideImg();
- //"隐藏"按钮失效
- photo.setOff(this);
- //"显示"按钮生效
- photo.setOn(document.getElementsByTagName("input")[0]);
- }
- //定位"显示"按钮,同时添加单击事件
- document.getElementsByTagName("input")[0].onclick=function(){
- //显示图片
- photo.showImg();
- //"显示"按钮失效
- photo.setOff(this);
- //"隐藏"按钮生效
- photo.setOn(document.getElementsByTagName("input")[1]);
- }
- //定义一个Photo函数
- function Photo(){
- this.showImg = function(){
- //定位<img>节点
- var imgElement = document.images[0];
- //将<img>节点显示
- imgElement.style.visibility="visible";
- }
- this.hideImg = function(){
- //定位<img>节点
- var imgElement = document.images[0];
- //将<img>节点隐蔽
- imgElement.style.visibility="hidden";
- }
- this.setOn = function(buttonElement){
- //将按钮生效
- buttonElement.disabled=false;
- }
- this.setOff = function(buttonElement){
- //将按钮失效
- buttonElement.disabled=true;
- }
- }
- </script>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/070120148463.html
来源: http://www.codesnippet.cn/detail/070120148463.html