Question

我正在使用此处找到的脚本（http://css3.bradshawenterprises.com/cfimg/#cfimg7），我只是想知道是否可以添加图片链接？

添加到图像周围的html的链接不起作用，我尝试添加一些javascript链接代码从在线查看，但它也不会工作（我99％肯定我错误地使用它）< / p>

无论如何，部分代码说明了这个

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

这是我尝试从How do I create a link using javascript?添加的部分，但我并不感到惊讶它不起作用。

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

任何帮助将不胜感激，总共有5张图片我想链接到他们自己的网址（他们是大图片，所以点击其中的任何一张都应该把它带到全尺寸）
干杯：）

Answer 1

不幸的是，由于你使用CSS切换图像的方式，没有一个解决方案能够制作<a>个体图像，向它们添加onclick等等。图像只是透明的，不是隐藏的。所以最上面的将始终收到所有事件，而不是显示的那个。

幸运的是，我有解决方案可行：）

在图片顶部添加一个常见<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>等图片链接

这样，当您单击thumnail图像时，他们肯定会在新标签中加载较大的图像。

Answer 3

为什么不将<img/>放入<a>，使用HTML

<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"/>

Answer 4

您无法添加图片链接，只能模拟链接行为。

为此，您需要拦截图像的事件单击，然后在用户将鼠标移到指针上时将光标属性更改为指针。

我做了sample来说明如何做到这一点。

的JavaScript

$('.imgLarge').click(function(){
  changeHeight(this);
});

CSS

.imgMini:hover{
  opacity:0.7;
  cursor:pointer;
}

Answer 5

你可以做一件事，即在图像上定义onclick事件如下：

<img src="URL" onclick="location.href=this.src" style="zoom:0.25; cursor:pointer">

这将以较小的尺寸显示图像（即0.25x），但当您点击它时，它将以原始尺寸打开。

Javascript添加链接到按代码切换的图像

5 个答案: