使用javascript指定圖像的鏈接

我有一種技術，使用第三方軟件從PDF創建交互Web APP。使用javascript指定圖像的鏈接

有可能在PDF中添加hotspots links，其中翻譯爲Flash SWF desktop version app？

還有一個移動版本，它會生成單獨的圖像並丟失任何鏈接。通過引用一些JavaScript，它會生成這個我不能直接更改的html。

我的gol吧，例如/files/mobile/2.jpg和/files/mobile/8.jpg鏈接到我選擇的一些地址。

由於我無法進入此HTML，可能存在一種方法來添加javascript以使某些圖像鏈接基於其名稱？

<div id="fbBookPages" class="fbBookPages"> 
    <div class="fbPage" style="display: none; height: 1121px; width: 1121px; margin-left: 364px; z-index: 1;"><div class="fbPageLoading" style="display: none;"></div><img src="../files/mobile/1.jpg" style="width: 1121px; height: 1121px;"></div> 
    <div class="fbPage" style="display: none; height: 1121px; width: 1121px; margin-left: 364px; z-index: 1;"><div class="fbPageLoading" style="display: none;"></div><img src="../files/mobile/2.jpg" style="width: 1121px; height: 1121px;"></div> 
    <div class="fbPage" style="display: none; height: 1121px; width: 1121px; margin-left: 364px; z-index: 1;"><div class="fbPageLoading" style="display: none;"></div><img src="../files/mobile/3.jpg" style="width: 1121px; height: 1121px;"></div> 
    <div class="fbPage" style="display: none; height: 1121px; width: 1121px; margin-left: 364px; z-index: 1;"><div class="fbPageLoading" style="display: none;"></div><img src="../files/mobile/4.jpg" style="width: 1121px; height: 1121px;"></div> 
    <div class="fbPage" style="display: none; height: 1121px; width: 1121px; margin-left: 364px; z-index: 1;"><div class="fbPageLoading" style="display: none;"></div><img src="../files/mobile/5.jpg" style="width: 1121px; height: 1121px;"></div> 
    <div class="fbPage" style="display: none; height: 1121px; width: 1121px; margin-left: 364px; z-index: 1;"><div class="fbPageLoading" style="display: none;"></div><img src="../files/mobile/6.jpg" style="width: 1121px; height: 1121px;"></div> 
    <div class="fbPage" style="display: none; height: 1121px; width: 1121px; margin-left: 364px; z-index: 1;"><div class="fbPageLoading" style="display: none;"></div><img src="../files/mobile/7.jpg" style="width: 1121px; height: 1121px;"></div> 
    <div class="fbPage" style="display: none; height: 1121px; width: 1121px; margin-left: 364px; z-index: 1;"><div class="fbPageLoading" style="display: none;"></div><img src="../files/mobile/8.jpg" style="width: 1121px; height: 1121px;"></div> 
    <div class="fbPage" style="display: block; height: 1121px; width: 1121px; margin-left: 364px; z-index: 999;"><div class="fbPageLoading" style="display: none;"></div><img src="../files/mobile/9.jpg" style="width: 1121px; height: 1121px;"></div></div> 
</div>

來源

2016-09-07 Des Bank

這當然是可能的，是的;但是你事先知道哪個''應該鏈接到哪個地址？「../ files/mobile/1.jpg」應該總是鏈接到「http：// google.com」（例如），還是根據其他上下文進行更改？沒有進一步的信息，很難爲這個問題提供精確相關的答案。 –

嗨大衛，謝謝，是的，我應該澄清.. ../files/mobile/1.jpg總是會鏈接到http://google.com（或其他）但我想../files/移動/ 8.jpg例如鏈接到一個不同的地址可以說http://www.thedesignbank.co.uk 從mdziekon答案完美的作品與一個鏈接，但我會希望有多個不同的鏈接目的地，是能夠設置這些。 –

你可以絕對在JavaScript中這樣做，你不需要任何庫：

function createImgLink(imgURL, linkURL) { 
    // Select Image from DOM Tree 
    var img = document.querySelector("[src='" + imgURL + "']"); 

    // Create a new Link (<a>) DOM Node 
    var link = document.createElement("a"); 
    link.href = linkURL; 

    // Insert newly created Link to the DOM Tree 
    img.parentNode.insertBefore(link, img); 

    // Move Image inside the Link 
    link.appendChild(img); 
}

例子：添加「http://google.com」鏈接到「../files/mobile/1.jpg」的形象，你會使用這樣的功能：

createImgLink("../files/mobile/1.jpg", "http://google.com");

來源

2016-09-07 09:35:53 mdziekon

-1

使用圖片作爲鏈接要使用圖像作爲一個鏈接，簡單地窩<a>標籤內的<img>標籤：

An image as a link: <a href="http://www.yourlink.se"> 
<img border="0" alt="text" src="logo.gif" width="100" height="100"> 
</a>

來源

2016-09-07 09:27:54 Fredrik

「由於我無法控制進入這個HTML，可能存在一種方法來添加JavaScript以使某些圖像鏈接基於其名稱？」 – Julien

JQuery的：

var url = ... // build your url here 
var theNewLink = $('<a href="' + url + '"></a>'); // here you create a link from nowhere 
var yourImageContainer = $(".fbPage") ... or something like that, depending on your context; // select one image container 
var yourImage = yourImageContainer.find("img"); // select the image of this container 
theNewLink.append(yourImage); // move the image into the new link 
yourImageContainer.append(theNewLink); // add the new link to the container

來源

2016-09-07 09:28:00 Julien

使用javascript指定圖像的鏈接

回答

相關問題