Question

我有一个简单的应用程序，它应该适用于像onfocus和onblur这样的键盘事件，而不是onmouseover和onmouseout。

这是我的zoomin / zoomout代码片段：

<script>
   var nW,nH,oH,oW;
   function zoom(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichImage)
   {
    oW=whichImage.style.width;oH=whichImage.style.height;
    if((oW==iWideLarge)||(oH==iHighLarge))
    {
     nW=iWideSmall;nH=iHighSmall;
    }
    else
    {
     nW=iWideLarge;nH=iHighLarge;
    }
    whichImage.style.width=nW;whichImage.style.height=nH;
   }
  </script>

以这种方式调用此函数：

<td align=center valign=middle >

    <figure>
        <button style="background-color:black; height:160px;width:160px ; border:none"><img src="F:\rashmi\icons_tv\Help_Normal.png" onfocus="zoom('57px','120px','96px','136px',this);"
onblur="zoom('57px','120px','57px','120px',this);" > </button>
     <figcaption><font size="5" color="white" style="font-weight:bold"><center>help</center></font></figcaption>
    </figure>

   </td>

但问题是当我使用tab键选择图像时，我看不到任何zoomin / zoomout效果。如果我分别用onmouseover / onmouseout替换onfocus / onblur就可以了。

请有人在我出错的地方帮助我。

问候 rashmi

Answer 1

您不会通过Tab键而是通过按钮元素来关注img元素。将onblur / onfocus事件移动到按钮元素。每次聚焦/失去焦点时，这将改变按钮的大小，但不会改变图像大小。您需要做的是修改代码，以便将更改映射到按钮包含的图像尺寸上。我现在能想到的是

<script type="text/javascript">
 var nW,nH,oH,oW;
   function zoom(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichElement)
   {

    theImage = whichElement.firstChild;
    theImage.style.width=nW;theImage.style.height=nH;
    oW=whichElement.style.width;oH=whichElement.style.height;
    if((oW==iWideLarge)||(oH==iHighLarge))
    {
     nW=iWideSmall;nH=iHighSmall;
    }
    else
    {
     nW=iWideLarge;nH=iHighLarge;
    }
    whichElement.style.width=nW;whichElement.style.height=nH;
    theImage.style.width=nW;theImage.style.height=hH;
   }
</script>

这里，按钮元素的第一个子元素恰好是图像，只要改变，就会使用按钮获得相同的高度和宽度。

html5中图像的缩放/缩小

1 个答案: