背景图片变色的按钮Button代码,Css代码库,德仔网

代码语言

代码分类

【Css】背景图片变色的按钮Button

作者:dezai / 发布于2014/4/8/ 633

网页会变色的网页按钮，一个使用背景图像的按钮，基于JavaScript实现，鼠标移到按钮上,按钮背景图片会改变.使用onMouseover和onMouseout实现的效果

<html>
<head>
<title>Button</title>
<style>
.initial{background-image:url("/jscss/demoimg/bgdemo3.jpg");font-size: 30pt;font-family:Impact;color:#0099CC;}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" marginwidth="0">
<table border="0" width="98%" cellspacing="0" cellpadding="0">
 <tr>
  <td colspan="3" valign="top" align="left">
   <p align="center"><font color="#3399FF" face="方正黄草简体" size="30"><strong>
   变背景图像的按钮:鼠标移到按钮上,按钮背景图会改变.</strong></font>    
    <script>
<!--
if (document.images){
after=new Image()
after.src="/jscss/demoimg/bgdemo2.jpg"
}

function change(image) //改变背景图的路径
{
var el=event.srcElement
if (el.tagName=="INPUT"&&el.type=="button")
event.srcElement.style.backgroundImage="url"+"('"+image+"')"
}
//-->
</script>
    
   <p align="left">&nbsp;
   <form onMouseover="change('/jscss/demoimg/bgdemo3.jpg')" onMouseout="change('/jscss/demoimg/bgdemo1.jpg')">
    <div align="center">
     <input type="button" value="BUTTON1" class="initial" style="cursor:hand">
     <input type="button" value="BUTTON2" class="initial" style="cursor:hand">
     <input type="button" value="BUTTON3" class="initial" style="cursor:hand">
    </div>
   </form>
   
   <p align="left">&nbsp;
  </td>
 </tr>
</table>
</body>
</html>

试试其它关键字

　背景图片变色　

同语言下

可能有用的

dezai贡献的其它代码(1065)