javascriptを使用して画像にリンクを割り当てる

Question

サードパーティのソフトウェアを使用してPDFからインタラクティブWeb APPを作成する方法があります。

hotspots linksをPDFに追加することができます。これは、Flash SWF desktop version appに変換されますか？

別の画像を生成してリンクを失うモバイルバージョンもあります。いくつかのjavascriptを参照することによって、このhtmlを生成します。このhtmlは直接変更できません。

私が選択したいくつかのアドレスにリンクする例：/files/mobile/2.jpgと/files/mobile/8.jpg

私はこれに入るコントロールがないので、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> 

Answer 1

することができます間違いなく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); 
} 

例：あなたはこのような関数を使用することになり、「../files/mobile/1.jpg」画像を「http://google.com」のリンクを追加するには ：

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

Answer 2

、<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> 

Answer 3

は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