Javascript链接到代码切换的图像

Question

我正在使用在这里找到的脚本(http://css3.bradshawenterprises.com/cfimg/#cfimg7)，我只是想知道是否可以向图像添加链接？

在图片周围添加到html的链接不起作用，我试着从网上添加一些javascript链接代码，但也不起作用(我99%肯定我错误地使用了它)

不管怎样，代码的一部分是这样写的

$("#cf7 img").eq(newImage).addClass("opaque");

这是我尝试从如何使用javascript创建链接？添加的部分，我并不感到惊讶，尽管它没有工作。

$("#cf7 img").eq(newImage).setAttribute("href", testlink);
$("#cf7 img").eq(newImage).innerHTML = linktext;
document.body.appendChild($("#cf7 img").eq(newImage));

任何帮助都将不胜感激，总共有5张图片我想链接到他们自己的URL(它们是大图片，所以点击其中的任何一个应该把它提高到全尺寸)

干杯:)

Answer 1

不幸的是，没有任何一种解决方案可以使单个图像的<a>，向它们添加onclick等等-因为您使用CSS转换图像的方式。图像只是透明的，而不是隐藏的。所以最上面的那个总是接收所有的事件，而不是被展示的那个。

幸运的是，我有一个可行的解决方案:)

在图像的顶部添加一个常见的<a>标记，如下所示：

<div id="cf7" class="shadow">
    <a href="#" onclick="return cf7clicked();">
        <img class='opaque' src="http://css3.bradshawenterprises.com/images/Windows%20Logo.jpg" />
        <img src="http://css3.bradshawenterprises.com/images/Turtle.jpg" />
        <img src="http://css3.bradshawenterprises.com/images/Rainbow%20Worm.jpg" />
        <img src="http://css3.bradshawenterprises.com/images/Birdman.jpg" />
    </a>
</div>

然后添加像这样的javascript，这将决定单击了哪个图像并采取适当的操作：

function cf7clicked() {
    var sel_idx = $('#cf7_controls .selected').index();
    alert(sel_idx); // only for demo!
    var img_src = $('#cf7 img').eq(sel_idx).attr('src');
    var fullsize_src = img_src; // get path to fullsize version of the image
    window.location.href = fullsize_src; // or use lightbox, or ...
    return false;
}

在JSfiddle - http://jsfiddle.net/8UvUV中就是这样

Answer 2

为什么要使用javascript添加链接？只要类还在，我就假设您可以通过html链接它们。

例如，在div #cf7中添加一个像<a href="linktolargerimage"><img src="smallerimage"></a>这样的图像链接

通过这种方式，当您单击thum钉子图像时，它们将明确地将较大的图像加载到一个新选项卡中。

Answer 3

为什么不直接将<img/>放到<a>中，使用<a>

<a href="#"> 
<img src="myImage.jpg"/> 
</a>

或

您可以使用onclick在<img/>标记中更改top.location，即

<img src="http://css3.bradshawenterprises.com/images/Birdman.jpg" onClick='alert("Hello World!")' width="100px" height="100px"/>