Two ways to change the resolution of a picture by moving the mouse over the event

Source: Internet
Author: User

  Do a mouse move out of the picture event, the first is to change the resolution of the two methods, the mouse moved into the picture and remove the resolution of the picture is different, the specific implementation of the following, interested friends can refer to the following

Recently in doing a mouse move out of the picture event, there are several ways you can try   first of all is to change the resolution of the two methods, mouse move into the picture and remove the resolution of the picture different   method one     code as follows: <html xmlns= " http://www.w3.org/1999/xhtml ">  <head>  <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/>  <title> Picture list: Mouse move/move out change picture transparency </title>  <style>  ul,li{margin:0 ;p Adding:0;list-style-type:none;}   #imgList {width:700px;overflow:hidden;zoom:1;border:1px solid #333; margin:0 auto;padding:0 0 10px 10px;}   #imgList li{float:left;width:128px;height:128px;border:1px solid #ccc margin:10px 10px 0 0}   #imgList Li Img{float:left;opacity:0.3;cursor:crosshair;filter:alpha (opacity=30);}   #imgList li.current Img{opacity:1;filter:alpha (opacity=100);}   </style>  <script>  window.onload = function ()   {  var oLi = document.getelements Bytagname ("Li");  for (var i = 0; i < oli.length i++)   {  oli[i].onmouseover = function ()   {&nbsp ; This.classname= "Current"  };  oli[i].onmouseout = function ()   {  this.classname = ""  } } }  </script></head>  <body>  <ul id= "imglist" >  <li><img src= "/jscss/ Demoimg/201203/kitesky_com_car1.jpg "/></li>  <li><img src="/jscss/demoimg/201203/kitesky_ Com_car2.jpg "/></li>  </ul>  </body>  </html>    method Two   code is as follows: <script type= "Text/javascript" >  function makevisible (Cur,which) {  if (which==0)   cur.filters.alpha.opacity=100  else  cur.filters.alpha.opacity=20 }    </script>   <body>  <img src= ". /.. /content/themes/login/image/jiankong.png "width=" 200px "style=" Filter:alpha (opacity=100) "onMouseOver=" Makevisible (this,1) "onmouseout=" makevisible (this,0) "/>  </body>    There is also a way to move the mouse out of the picture, Change the size of the picture   in the <body> tag to add code, the mouse moved to the picture when the picture to the right up, leaving the picture to change back to the originalSize   Code as follows: <img src= ". /.. /content/themes/login/image/jiben.png "width=" 200px "onmouseover=" this.width=230 "onmouseout=" this.width=200 " > 
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.