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將鏈接添加到被代碼轉換的圖像

回答

相關問題