带颜色变化的链接按钮

2008-09-20 10:35:00 | 【
把鼠标放到按钮上,然后点击:

给按钮定义指定的颜色,当鼠标滑过,按钮上的颜色发生变化,非常实用

查看全部代码 View Code

第一步:
添加以下代码到<head>区

<style>
<!--
/*修改为你想要的颜色*/

.initial2{font-weight:bold;background-color:lime}
//-->
</style>

<script>
<!--

        /*****************************************************
         *  Share JavaScript (http://www.ShareJS.com)
         * 使用此脚本程序,请保留此声明
         * 获取此脚本以及更多的JavaScript程序,请访问 http://www.ShareJS.com
         ******************************************************/
    
function change(color){
var el=event.srcElement
if (el.tagName=="INPUT"&&el.type=="button")
event.srcElement.style.backgroundColor=color
}

function jumpto2(url){
window.location=url
}

//-->
</script>


第二步:
添加以下代码到<body>区

<form onMouseover="change('yellow')" onMouseout="change('lime')">
<input type="button" value="ShareJS.com " class="initial2" onClick="jumpto2('http://www.sharejs.com')">
<input type="button" value="Google " class="initial2" onClick="jumpto2('http://Google.com')">
<input type="button" value="PDBooks " class="initial2"  onClick="jumpto2('http://www.pdbooks.net')">
</form>

使用方法为:
在指定的按钮上加上class="initial2" onClick="jumpto2('链接地址')",如:
<input type="button" value="Yahoo " class="initial2" onClick="jumpto2('http://yahoo.com')"> 

下载"带颜色变化的链接按钮"

  • 本地下载
  • 本地下载2
上一篇: 彩虹文字效果  
下一篇: 很Cool的文字转换效果

相关资源