0

On a website I'm using right now there is a slider that pulls in random photos of different sizes. To keep the slider uniform and looking neat I through an image over top of the rotating images to act like a border, there is a hole that you can see the images through. It looks and works great. The person the website is for wants the images to be clickable, I tried putting the anchor tag on and when I click it leads no where because even though there is a hole in the image its acting as if there is something there. I have looked up how to fix this but I can't find any information anywhere.

Does anybody know if this is possible? I am willing to use jquery if need be but I'm stuck

    <div id="right">
     <div class="border-image">
     <img src="images/border.png" />
</div>
<div class="cyclepictures">
<div>
<a href=''><img src="" style="position: relative!important; margin: auto!important; padding-top: 30px;" /></a>
<a href=''><img src="" style="position: relative!important; margin: auto!important; padding-top: 30px;" /></a>
<a href=''><img src="" style="position: relative!important; margin: auto!important; padding-top: 30px;" /></a>
<a href=''><img src="" style="position: relative!important; margin: auto!important; padding-top: 30px;" /></a>
<a href=''><img src="" style="position: relative!important; margin: auto!important; padding-top: 30px;" /></a>
</div>

</div>

This is being generated through an image slider

4

2 回答 2

0

查询：

$('.border-image').on('click', function(){
    $('a.active').trigger('click'); // assuming your current image's anchor has active class.
});

一旦单击边框图像，就会使用上述方法触发当前活动的锚点/图像的单击。这与上面 Ken 建议的内容相同。

于 2013-08-15T18:24:56.213 回答
0

为此，您应该onclick="window.location.href='#link'"在图像中添加：

<img src="#" onclick="window.location.href='#link'"/>

而且您可能还希望鼠标光标像悬停在常规链接上时一样发生变化，因此您应该将cursor:pointer样式属性添加到图像中。

于 2013-08-15T18:24:59.383 回答