JavaScript 處理圖片相關操作

1.去掉熱點地圖上的區域線框與超鏈接的線框:
<a href="#" οnfοcus="this.blur()"><img src="Images/aaa.jpg" border="0"></a>

2.
去除當鼠標放到圖片上時出現快捷工具(打印、郵寄、另存等)

<img src="Images/aaa.jpg" galleryImg="no" border="0">

3.
動態改變照片的亮度(透明度)
    <img id="imgInfo" src="Images/Train.jpg" style="filter: alpha(opacity=50)"/>
    <input id="Button1" type="button" value="
亮度
+" οnclick="rdl_change(1)" />
    <input id="Button2" type="button" value="
亮度
-" οnclick="rdl_change(0)"/>
<script>
function rdl_change(m)
{
    var oDiv=document.getElementById("imgInfo");
    switch(m)
    {
        case 0 :
             //
照片變透明

             oDiv.filters.alpha.opacity=oDiv.filters.alpha.opacity-10;
            break;
        case 1 :
             //
照片變亮
              oDiv.filters.alpha.opacity=oDiv.filters.alpha.opacity+10;
            break;
        default: break;
    }
}
</script>

4.
放上鼠標顯示原照片 移開鼠標讓照片半透明
<img src="Images/aaa.jpg"   id="content"
      onMouseOver="runtimeStyle.filter='alpha(opacity=100)'"
      onMouseOut="runtimeStyle.filter='alpha(opacity=40)'">

5.
頁面加載 圖片漸漸顯示
<body onLoad="fade()">
<img src="Images/Train.jpg" name="img" border="0" alt="Image" style="filter:alpha(opacity=0)" width="330" height="400">
<script type="text/javascript">
var b = 1;
var c = true;
function fade()
{
    if(document.all);

    if(c == true)
    {
         b++;
    }
    if(b==100)
    {
         b--;
         c = false
    }
    if(b==10)
    {
          b++;
          c = true;
    }
//    if(c == false)
//    {
//           b--;
//    }
    img.filters.alpha.opacity=0 + b;
    setTimeout("fade()",50);
}
</script>
</body>

6.
圖片隨鼠標滾軸移動而變化大小:
   function ZoomImg(img)
    {
        var zoom = parseInt(img.style.zoom, 10) || 100;
        zoom += event.wheelDelta / 12;
        if(zoom > 0)
            img.style.zoom = zoom + '%';
        return false;
    }
<img src="
人民的壁紙.bmp" border="0" id="chen" runat="server"   galleryImg="no"
         onmousewheel="return ZoomImg(this)"/><?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

發佈了48 篇原創文章 · 獲贊 3 · 訪問量 33萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章