Des Bank Des Bank - 2 months ago 6
HTML Question

Assigning a link to an image using javascript

I have a technique using third party software to create an interactive

Web APP
from a
PDF
.

It is possible to add
hotspots links
in the
PDF
which translate to the
Flash SWF desktop version app
?

There is also a mobile version which generates separate images and loses any links. By referencing some javascript it generates this html which I cant change directly.

My gol it to make for example
/files/mobile/2.jpg
and
/files/mobile/8.jpg
to link to some addresses chosen by me.

As I have no control to go into this
HTML
, could exists a way to add
javascript
to make certain images link based on their name?

<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

You can definitely do this in JavaScript, and you don't need any library:

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);
}

Example: to add "http://google.com" link to a "../files/mobile/1.jpg" image you would use the function like this:

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