javascript - 从表格布局中由 javascript 运行的动画(悬停时)创建链接

Question

我有以下代码，一个简单的三列布局，每列都有一个悬停时运行的动画。

动画效果很好，但我无法将动画按钮设为链接。它以图像作为链接，如果我更改 href，它会失败(这是有道理的)但我不知道在哪里添加链接。

<table style="width: 100%;" border="0">
<tbody>
                <tr>
                    <td>
                    <a href="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-children-anim.gif" target="_blank">
                    <img src="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-children.gif" 
                    data-orig="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-children.gif" width="323" height="323"></a>                      
                    </td>


                    <td>
                    <a href="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-teenagers-anim.gif" target="_blank"><img src="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-teenagers.gif" 
                    data-orig="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-teenagers.gif" width="323" height="323"></a>
                    </td>


                    <td>
                    <a href="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-parents-anim.gif" target="_blank"><img src="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-parents.gif" 
                    data-orig="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-parents.gif" width="323" height="323"></a>
                    </td>
                </tr>
            </tbody>
        </table>

通过以下 javascript 运行。

<script type="text/javascript">
$(function(){
  $('table a img').hover(function(){
    // on mouse enter
    var customdata = $(this).parent().attr('href');
    $(this).attr('src',customdata); 
  }, function(){
    // on mouse leave
    $(this).attr('src',$(this).attr('data-orig'));
  });

});
</script>

在此处的页面 Link to homepage of site.

Answer 1

您的问题令人困惑。我不确定您真正想要的链接是什么，也不确定为什么您当前的实现是错误的。我假设您不希望图像链接作为实际链接。如果这个假设是正确的，这就是你的答案......

<table style="width: 100%;" border="0">
<tbody>
    <tr>
       <td>
           <a href="[Your Link Goes Here]" target="_blank">
           <img 
src="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-children.gif"  
data-img="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-children.gif"
data-animation="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-children-anim.gif" 
width="323" height="323"></a>                      
                    </td>

                </tr>
            </tbody>
        </table>

<script type="text/javascript">
$(function(){
  $('table a img').hover(function(){
    var element = $(this);
    var animateUrl = element.data('animation');
    element.attr('src', animateUrl);  
  }, function(){
    var element = $(this);
    var staticImage = element.data('img');
    element.attr('src', staticImage); 
  });

});
</script>