使用javascript为图片分配链接

Assigning a link to an image using javascript

本文关键字：分配 链接 javascript 使用      更新时间：2023-09-26

我有一种使用第三方软件从PDF创建交互式Web APP的技术。

有可能在PDF中加入hotspots links，转化为Flash SWF desktop version app ?

也有一个移动版本，生成单独的图像，并失去任何链接。通过引用一些javascript，它生成了这个我不能直接更改的html。

我的目标是让例如/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>

你完全可以在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");

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

使用图片作为链接要使用图像作为链接，只需将<img>标记嵌套在<a>标记中:

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