0

我正在使用此处（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 张图片我想链接到他们自己的网址（它们是大图片，所以点击其中任何一张都应该把它变成全尺寸）
干杯 :)

4

5 回答 5

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

于 2013-10-19T11:09:58.440 回答
0

为什么不直接放入<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"/>
于 2013-10-19T10:35:01.360 回答
0

您不能将链接添加到图像，您只能模拟链接行为。

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

我制作了一个示例来展示如何做到这一点。

JavaScript

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

CSS

.imgMini:hover{
  opacity:0.7;
  cursor:pointer;
}
于 2013-10-19T10:43:30.523 回答
0

为什么要使用 javascript 添加链接？只要课程仍然存在，我会假设您可以通过 html 链接它们。

因此，例如，在 div 中，#cf7您将添加一个图像链接，例如<a href="linktolargerimage"><img src="smallerimage"></a>

这样，当您单击缩略图图像时，它们肯定会在新选项卡中加载较大的图像。

于 2013-10-19T10:29:19.023 回答
0

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

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

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

于 2013-10-19T11:21:06.323 回答