您的位置：首页 > 编程技术 > html  >  将一幅图片作为按纽

将一幅图片作为按纽

 更新时间：2016年9月20日 19:06  点击：1238
为了网页的美观，通常不用dm提供的按纽，因为颜色不符合我们需要的，通常我们会自己用一个图片来作为按纽来使用。
<input name="submit" type="submit" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px;
BACKGROUND-IMAGE:  url(images/dl.gif); BORDER-LEFT: 0px; WIDTH: 65px; 
BORDER-BOTTOM: 0px; HEIGHT: 17px; cursor:hand;" value="">
dl.gif为图片名.

放到head中
<script language='javascript'> 
if(window.opener==null){ 
window.opener=null; 
window.close(); 
window.open('index.html','','toolbar=no,menubar=no,location=no,status=no,width=' + screen.width + ',height=' + screen.height + ',left=0,top=0'); 
} 
</script>

http://wpa.qq.com/msgrd?V=1&Uin=********&Site=ioshenmue&Menu=yes 
*******处为QQ号，直接复制此代码放入IE中即可实现和那个QQ号聊天，但前提是你自己的QQ号需要登录。通常在网页中放入这段代码的方法:
<a href="http://wpa.qq.com/msgrd?V=1&Uin=********&Site=ioshenmue&Menu=yes" target="_blank">与客服聊天</a>

常用HTML特效代码

1。忽视右键 
　 <body oncontextmenu="return false"> 
　 或 
　 <body style="overflow-y:hidden"> 
2。加入背景音乐 
　 IE:<bgsound src="*.mid" loop=infinite> 
　 NS:<embed src="*.mid" autostart=true hidden=true loop=true> 
　 </embed> 
　 *.mid你的背景音乐的midi格式文件 
3。简单的window.open方法 
　 <a href="#" 
　 onclick="javascript :window.open(文件路径/文件名,newwindow, 
　 toolbar=no,scrollbars=yes,resizable=no,top=0,left=0, 
　 width=400,height=300);">文字或图片</a> 
　 参数解释： 
　 <SCRIPT LANGUAGE="javascript"> js脚本开始； 
　 window.open 弹出新窗口的命令； 
　 文件路径/文件名 弹出窗口的文件名； 
　 newwindow 弹出窗口的名字（不是文件名），非必须，可用空代替； 
　 width=400 窗口宽度； 
　 height=300 窗口高度； 
　 top=0 窗口距离屏幕上方的象素值； 
　 left=0 窗口距离屏幕左侧的象素值； 
　 toolbar=no 是否显示工具栏，yes为显示； 
　 menubar，scrollbars 表示菜单栏和滚动栏。 
　 resizable=no 是否允许改变窗口大小，yes为允许； 
　 location=no 是否显示地址栏，yes为允许； 
　 status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许； 
　 </SCRIPT> js脚本结束 
4。简单的页面加密 
　 <script LANGUAGE="javascript"> 
　 <!-- 
　 function loopy(){ 
　　 var sWord =""; 
　　 while(sWord!="login"){sWord=prompt("请输入你的登陆密码");} 
　　 alert("登陆成功！"); 
　 } 
　 loopy() 
　 //--> 
　 </script> 
5。拉动页面时背景图不动 
　 <style> 
　 body{background-image:url(logo.gif); 
　 background-repeat:no-repeat;background-position:center} 
　 </style> 
6。让浏览器在保存页面时保存失败 
　 <NOSCRIPT><iframe src="*.html"></iframe></NOSCRIPT> 
7。随机替换图片 
　 <script> 
　 document.write(<img src="img/+parseInt(Math.random()*(5)) 
　 +.gif"height="40" width="50"> 
　 </script> 
　 图片文件名为0.gif 1.gif 2.gif 3.gif 4.gif 
8。窗口定时关闭 
　 先将如下代码网页文件的区： 
　 <script language="javascript"> 
　 function closeit() { setTimeout("self.close()",10000) //毫秒 } 
　 </script> 
　 然后再在<body>标内加入如：<body onload="closeit()"> 
9。网页自动关闭 
　 <html> 
　 <head> 
　 <object id=closes type="application/x-oleobject" 
　 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"> 
　 <param name="Command" value="Close"> 
　 </object> 
　 </head> 
　 <body onload="window.setTimeout(closes.Click(),10000)"> 
　 这个窗口会在10秒过后自动关闭,而且不会出现提示. 
　 </body> 
　 </html> 
10。网页自动刷新 
　 在head部记入 
　 <META HTTP-EQUIV="Refresh" content="20"> 
　 其中20为20秒后自动刷新，你可以更改为任意值。 
11。网页自动转页 
　 <META HTTP-EQUIV="Refresh" CONTENT="时间(秒);URL=地址"> 
12。保持layer在最前面，而不被Iframe、Object所覆盖 
　 在Layer中再插Iframe 或 Object 设z-Index值 
　 <div z-Index:2><object xxx></object> ＃ 前面 
　 <div z-Index:1><object xxx></object> ＃ 后面 
　 <div id="Layer2" style="position:absolute; top:40;width:400px; 
　 height:95px;z-index:2"> height=100% width=100%> 
　 <iframe width=0 height=0></iframe> 
　 </div> 
　 <div id="Layer1" style="position:absolute; top:50;width:200px; 
　 height:115px;z-index:1"> 
　 <iframe height=100% width=100%></iframe> 
　 </div> 
13。返回上一页 
　 <a href=javascript :history.back(1)>『返回上一页』</a> 
14。关闭窗口 
　 <a href=javascript :self.close()>『关闭窗口』</a> 
15。关于iframe的透明背景 
　 <IFRAME ID="iFrame1" SRC="iframe.htm" 
　 allowTransparency="true" 
　 style="background-color: green"></IFRAME> 
16. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 
    <table border oncontextmenu=return(false)><td>no</table> 可用于Table 
17. <body onselectstart="return false"> 取消选取、防止复制 
18.onpaste="return false" 不准粘贴 
19.oncopy="return false;" oncut="return false;" 防止复制 


20. <link rel="Shortcut Icon" href="favicon.ico"> IE地址栏前换成自己的图标 

21. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夹中显示出你的图标 

22. <input style="ime-mode:disabled"> 关闭输入法 

23. 永远都会带着框架 
<script language="JavaScript"><!-- 
if (window == top)top.location.href = "frames.htm"; //frames.htm为框架网页 
// --></script> 

24. 防止被人frame 

<SCRIPT LANGUAGE=JAVASCRIPT><!-- 
if (top.location != self.location)top.location=self.location; 
// --></SCRIPT> 

25. 网页将不能被另存为 

<noscript><iframe src=*.html></iframe></noscript> 

26. 查看网页源代码 

<input type=button value=查看网页源代码 onclick="window.location = "view-source:"+ "http://www.pconline.com.cn""> 

27.删除时确认 

<a href="javascript :if(confirm("确实要删除吗?"))location="boos.asp? &areyou=删除&page=1"">删除</a> 

28.屏蔽功能键Shift,Alt,Ctrl 
<script> 
function look(){ 
if(event.shiftKey) 
alert("禁止按Shift键!"); //可以换成ALT　CTRL 
} 
document.onkeydown=look; 
</script>

由于一个页面上,内容很少,如果直接打开，整个页面感觉很空，所以要用到网页对话框，用来只显示有内容的部分。使用格式：
SCRIPT LANGUAGE="javascript"> 
<!-- 
window.open ('page.html', 'newwindow', 'height=100, width=400, 
top=0, left=0, toolbar=no, menubar=no, scrollbars=no,
resizable=no,location=no,status=no') //这句要写成一行　
--> 
</SCRIPT> 
　　
'参数解释： 
'<SCRIPT LANGUAGE="javascript"> js脚本开始； 
window.open 弹出新窗口的命令； 
'page.html' 弹出窗口的文件名； 
'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替； 
height=100 窗口高度； 
width=400 窗口宽度； 
top=0 窗口距离屏幕上方的象素值； 
left=0 窗口距离屏幕左侧的象素值； 
toolbar=no 是否显示工具栏，yes为显示； 
menubar，scrollbars 表示菜单栏和滚动栏。 
resizable=no 是否允许改变窗口大小，yes为允许； 
location=no 是否显示地址栏，yes为允许； 
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许； 
'</SCRIPT> js脚本结束

[!--infotagslink--]

相关文章

  • 使用PHP+JavaScript将HTML页面转换为图片的实例分享

    这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下...2016-04-19

  • C#从数据库读取图片并保存的两种方法

    这篇文章主要介绍了C#从数据库读取图片并保存的方法，帮助大家更好的理解和使用c#，感兴趣的朋友可以了解下...2021-01-16

  • Photoshop古装美女图片转为工笔画效果制作教程

    今天小编在这里就来给各位Photoshop的这一款软件的使用者们来说说把古装美女图片转为细腻的工笔画效果的制作教程，各位想知道方法的使用者们，那么下面就快来跟着小编一...2016-09-14

  • Python 图片转数组,二进制互转操作

    这篇文章主要介绍了Python 图片转数组,二进制互转操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-09

  • php抓取网站图片并保存的实现方法

    php如何实现抓取网页图片，相较于手动的粘贴复制，使用小程序要方便快捷多了，喜欢编程的人总会喜欢制作一些简单有用的小软件，最近就参考了网上一个php抓取图片代码，封装了一个php远程抓取图片的类，测试了一下，效果还不错分享...2015-10-30

  • jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮

    jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮...2013-10-13

  • 利用JS实现点击按钮后图片自动切换的简单方法

    下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-10-25

  • Photoshop枪战电影海报图片制作教程

    Photoshop的这一款软件小编相信很多的人都已经是使用过了吧，那么今天小编在这里就给大家带来了用Photoshop软件制作枪战电影海报的教程，想知道制作步骤的玩家们，那么下面...2016-09-14

  • js实现上传图片及时预览

    这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料，具有一定的参考价值，感兴趣的朋友可以参考一下...2016-05-09

  • python opencv通过4坐标剪裁图片

    图片剪裁是常用的方法，那么如何通过4坐标剪裁图片，本文就详细的来介绍一下，感兴趣的小伙伴们可以参考一下...2021-06-04

  • 使用PHP下载CSS文件中的图片的代码

    共享一段使用PHP下载CSS文件中的图片的代码 复制代码 代码如下: <?php //note 设置PHP超时时间 set_time_limit(0); //note 取得样式文件内容 $styleFileContent = file_get_contents('images/style.css'); //not...2013-10-04

  • PHP swfupload图片上传的实例代码

    PHP代码如下：复制代码 代码如下:if (isset($_FILES["Filedata"]) || !is_uploaded_file($_FILES["Filedata"]["tmp_name"]) || $_FILES["Filedata"]["error"] != 0) { $upload_file = $_FILES['Filedata']; $fil...2013-10-04

  • 微信小程序如何获取图片宽度与高度

    这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-10

  • C#中图片旋转和翻转(RotateFlipType)用法分析

    这篇文章主要介绍了C#中图片旋转和翻转(RotateFlipType)用法,实例分析了C#图片旋转及翻转Image.RotateFlip方法属性的常用设置技巧,需要的朋友可以参考下...2020-06-25

  • ps怎么制作图片阴影效果

    ps软件是现在很多人比较喜欢的，有着非常不错的使用效果，这次文章就给大家介绍下ps怎么制作图片阴影效果，还不知道制作方法的赶紧来看看。 ps图片阴影效果怎么做方法/...2017-07-06

  • OpenCV如何去除图片中的阴影的实现

    这篇文章主要介绍了OpenCV如何去除图片中的阴影的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-29

  • C#将图片和字节流互相转换并显示到页面上

    本文主要介绍用C#实现图片转换成字节流，字节流转换成图片，并根据图片路径返回图片的字节流，有需要的朋友可以参考下...2020-06-25

  • JavaScript 如何禁止用户保存图片

    这篇文章主要介绍了JavaScript 如何禁止用户保存图片，帮助大家完成需求，更好的理解和使用JavaScript，感兴趣的朋友可以了解下...2020-11-19

  • php上传图片学习笔记与心得

    我们在php中上传文件就必须使用#_FILE变量了，这个自动全局变量 $_FILES 从 PHP 4.1.0 版本开始被支持。在这之前，从 4.0.0 版本开始，PHP 支持 $HTTP_POST_FILES 数组。这...2016-11-25

  • JS实现图片的不间断连续滚动的简单实例

    下面小编就为大家带来一篇JS实现图片的不间断连续滚动的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-06-12