如何使用文本/按钮在顶部可链接的图像 [英] How to Make an Image with Text/Button On Top Linkable

问题描述

我有一个div，其中包含一个图像文本和一个按钮放在它的顶部。文本是绝对定位的，将覆盖整个图像。在文本结尾处还将有一个按钮。

I have a div that contains an image with text and a button over layed on top of it. The text is positioned absolute and will cover the entire image. At the end of the text will also be a button. I am trying to get the image to be a link, but I am having problems doing so.

我目前的解决方案涉及将我的图片和文字包含在 a 标记。这不工作，当用户尝试单击按钮，他们将单击链接而不是按钮。我也尝试过在 a 标签中包装我的img标签，但是由于我的文本位于顶部，所以链接将永远不会被注册为可点击。

My current solution involves wrapping both my image and text within an a tag. This doesn't work as when the user tries to click the button, they would click the link instead of the button. I also have tried wrapping just my img tag inside the a tag, but since my text is positioned on top, the link will never be registered as being clickable.

http://jsfiddle.net/NxtWa/

HTML：

<div class="tile">
    <a href="http://www.google.ca">
        <img src="http://www.placehold.it/480x260">
        <div class="text">
            <p>Long long paragraph</p>
            <button>Button</button>
        </div>
    </a>
</div>

CSS：

.tile { position:relative; width:480px; height:260px; }
.tile .text { position:absolute; top:0px; left:0px; width:480px; height:260px; }

推荐答案

并使用z-index属性在图像上方按钮。您将必须通过使用适当的事件监视器/事件处理程序模式来将点击事件下移到图像，以便对文本和按钮进行适当的点击

I assume you are positioning the text and button over the image using z-index property. You will have to percolate the click event down to the image by using a suitable event-watcher/event-handler pattern so that the appropriate clicks for the text and button are handled through them and those which need to go down to the image are passed on further by the event handler for the image/button.

相关问题有一个可能的解决方案：

Related question with a possible solution: JavaScript pass mouseenter event to element that is underneath another element

在更多的研究中，这种技术被称为事件冒泡（对不起，这个词已经滑落我的脑海）。有关如何完成此操作的其他帮助@ http://stackoverflow.com/a/1026101/17716

On more research, this technique is called event bubbling (Sorry the term had slipped my mind earlier). Additional help on how to get this done @ http://stackoverflow.com/a/1026101/17716

这篇关于如何使用文本/按钮在顶部可链接的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！