Javascript将链接添加到被代码转换的图像

我使用在这里找到的脚本（http://css3.bradshawenterprises.com/cfimg/#cfimg7），我只是想知道是否可以添加链接到图像？Javascript将链接添加到被代码转换的图像

添加链接到图像周围的html不起作用，我试图从网上查看添加一些JavaScript链接代码，但它也不会工作（虽然我99％确定我错误地使用它）

不管怎么说，代码的一部分说，这

$("#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张图片，我想链接到自己的URL（他们是大画面，所以点击其中的任何应使其达到全尺寸）
的干杯:)

来源

2013-10-19 Peter

你是不是加了'src'？ –

不幸的是，没有一个解决方案，使<a>的个性化图像的，添加onclick他们或等将工作 - becasue你正在使用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-19 11:09:58

Ahh非常感谢很多人，完美的工作：D也为演示欢呼，它是有帮助的，看看它实际上如何工作:) – Peter

为什么要用javascript来添加链接？只要班级仍然在那里，我会假设你可以通过html链接他们。

因此，例如，在div #cf7之内，你会当你点击略图图像，他们一定会载入较大的图像在一个新的选项卡中添加像<a href="linktolargerimage"><img src="smallerimage"></a>

这样的图片链接。

来源

2013-10-19 10:29:19

我认为JavaScript会是这一次的方式，因为将标记添加到它不会做任何事情。 javascript做了一些似乎绕过实际html代码的东西，所以它看起来不错，但是停止了任何你添加到图片中的东西：P – Peter

我明白了。我从来没有机会亲自检查代码。谢谢你清理那个。 –

为什么不干脆把<img/>成<a>，使用HTML

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

或者

可以<img/>标签内使用onclick改变top.location即

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

来源

2013-10-19 10:35:01

令人讨厌的是，这样做不起作用，onclick不会显示消息，并且标签也不会执行任何操作。我想知道是否有人知道解决这个问题的方法，因为脚本对图像执行了一些操作，删除了其他任何您尝试添加的内容：P – Peter

CSS'absolute'会导致此问题如果您玩过CSS，则可以解决此问题：P –

你可以用” t添加链接到图像，您只能模拟链接行为。

要做到这一点，您需要拦截图像的事件点击，然后在用户将鼠标移到它们上方时将光标属性更改为指针。

我做了一个sample来展示如何做到这一点。

的JavaScript

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

CSS

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

来源

2013-10-19 10:43:30

谢谢，唯一的问题是在图像周围放置标签不会做任何事情。下面的人提出了onclick事件，但是这对代码也不起作用。我链接到我得到它的地方，看看是否有人知道它在做什么哈哈，我不知道如何改变它，让我添加一个链接到图像：P – Peter

在你的例子中，图像doesn'没有链接，只有跨度有链接。 –

你也可以用'$（'。imageClass'）来截获这些图像的点击事件on（'click'，function（）{//做你所需要的}）;'不需要在你周围添加任何其他元素。 –

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

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

这将显示在一个小尺寸的图像（即。 0.25x），但是当你点击它时，它将以其原始大小打开。

来源

2013-10-19 11:21:06

Javascript将链接添加到被代码转换的图像

回答

相关问题