您现在的位置:主页 > 常见问题 > 武汉做网站相关问题 > 正文

鼠标移动到图片上的时候变色怎么做?

时间:2014-11-10 15:20 来源:未知 点击:
        鼠标移动上去,图片变了颜色,移动出来之后,图片又恢复到原来的样子,这种效果应该怎么做哩?很多人很苦恼,其实一点都不难做,武汉做网站今天教给大家两种方法!

        事实上,可以通过改变图片的透明度来达到这样的效果注意提醒的一点是对白色图片无效。利用的JS事件是onmouseover和onmouseout。

       第一种变色方法
<script language="javascript">
<!--
function makevisible(cur,which){
if (which==0)
cur.filters.alpha.opacity=70
else
cur.filters.alpha.opacity=100
}
/-->
</script>
<img src="http://www.siviy.com/images/naite_news.jpg" style="filter:alpha(opacity=100)" onmouseover="makevisible(this,0)" onmouseout="makevisible(this,1)">
第二种方法:
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
if ((navigator.appName.indexOf(’Microsoft’)+1)) {
document.write(’<style type="text/css"> .opacity1 {filter:alpha(opacity=50)} .opacity2 {filter:alpha(opacity=100)} </style>’); }
if ((navigator.appName.indexOf(’Netscape’)+1)) {
document.write(’<style type="text/css"> .opacity1 {-moz-opacity:0.5} .opacity2 {-moz-opacity:1} </style>’); }
else {
document.write(’’); }
// End -->
</script>
<img src="http://www.siviy.com/images/naite_news.jpg" width="109" height="73" border="0" class="opacity2" onmouseover="this.className=’opacity1’"
onmouseout="this.className=’opacity2’">

     以上就是鼠标放到图片上的时候图片变色的两种方法,欢迎大家批评改正!
copyright@欣零点网络科技有限公司 All rights reserved 360网站安全检测平台 地址:武汉市东湖高新区鲁磨路联峰大厦14层 电话:13476019269(刘先生)027-66000068 技术支持:欣零点