可以在标准button上加入背景图片,并且可以指定鼠标滑过和鼠标离开时的按钮背景图片
查看演示页面 View Demo 查看全部代码 View Code
第一步:
在<head>区添加以下代码
<style>
<!--
//change the file path below to the image you want initially applied to the button
.initial{font-weight:bold;background-image:url(img/2.jpg)}
//-->
</style>
<script>
<!--
if (document.images){
after=new Image()
//change the file path below to the image you want applied when the mouse moves over
after.src="img/2.jpg"
}
function change2(image){
var el=event.srcElement
if (el.tagName=="INPUT"&&el.type=="button")
event.srcElement.style.backgroundImage="url"+"('"+image+"')"
}
function jumpto2(url){
window.location=url
}
//-->
</script>
第二步:
在<body>区添加以下代码
<form onMouseover="change2('img/1.jpg')" onMouseout="change2('img/2.jpg')">
<input type="button" value="Example 1 " class="initial" onClick="jumpto2('http://www.sharejs.com')">
<br>
<input type="button" value="Example 2 " class="initial" onClick="jumpto2('http://www.sharejs.com')">
<br>
<input type="button" value="Example 3 " class="initial" onClick="jumpto2('http://www.pdbooks.net')">
<br>
</form>
其中代码中的 "img/1.jpg"为鼠标滑过时的按钮背景图片,"img/2.jpg"为鼠标离开时的按钮背景图片




