使用javascript为图像指定链接
提问于 2016-09-07 09:18:57
我有一种使用第三方软件从PDF创建交互式Web APP的技术。
可以在PDF中添加转换为Flash SWF desktop version app？的hotspots links。
还有一个移动版本，可以生成单独的图像并丢失任何链接。通过引用一些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>
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-09-07 09:35:54
你绝对可以在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/Mobile1.jpg“图像，您可以使用如下函数：
createImgLink("../files/mobile/1.jpg", "http://google.com");Stack Overflow用户
发布于 2016-09-07 09:28:01
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 containerStack Overflow用户
发布于 2016-09-07 09:27:54
将图像用作链接要将图像用作链接，只需将<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39365925
复制
腾讯云开发者
