Question - How to trigger javascript hyperlinks in an SVG?

Report · Apr 26, 2019

I need to present facsimile copies of articles I've written, with clickable links, on my portfolio webpage.The approach that seems likeliest to work is imagemaps in svgs, because the hyperlink retains its position on the image as the image responds to different screen sizes.

Using svgs, I've succeeded in making responsive images with links, embedded in another page. Now my problem is to make those links trigger a javascript plugin (Floatbox) that presents overlays.

The overlays are important, because they're my best option for keeping readers on the page. I don't want them opening new pages to read a footnote. I want them to be able to glance at important but secondary material, close it, and return to what they were reading before.

I can't get the javascript calls required for such overlays to work, and in fact I keep breaking the imported .svg when I try to change the code.

Ordinarily, I'd trigger such a link with something like this:

    <a href="LinkFromFacsimileStoryImage.html" class="floatbox" data-fb-
    options="width:80% height:80% scrolling:yes">LinkName</a>

Suffice it to say that I have no idea why adobe isn't presenting the code. I followed the guidelines for pasting it in, and it is showing up on my screen as I edit the draft. But I don't see it when I post the question.
So here's what the page ought to be presenting:

<a href="website/" class="floatbox" data-fb- options="width:80% height:80% scrolling:yes">Website Function</a>

The code doesn't work in an .svg. In hopes that some browsers may actually present the code, here's how I have a sample page set up now, with a greatly truncated representation of the imported image, just for context, and the link presented in its native (unaltered) state:

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Declaration</title>
    <link type="text/css" rel="stylesheet" href="floatbox/floatbox.css" />
    <script type="text/javascript" src="floatbox/floatbox.js"></script>
    </head>
    <body>
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 882.5 245.9" style="enable-background:new 0 0 882.5 245.9;" xml:space="preserve">
    <style type="text/css">
    .st0{opacity:0.35;fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
    </style>
    <image style="overflow:visible;" width="750" height="209" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAADRCAYAAACTrj
    WiZHqpWs2ra3VpcUIHa9SXqqpTl7bIMTyBQNNl13NkAT59pgAWq1evp/A/lH6dv6rBKPAAAAAElF
    TkSuQmCC" transform="matrix(1.1767 0 0 1.1767 0 0)">
    </image>
    <a xlink:href="https://www.loc.gov/resource/rbc0001.2004pe76546/?sp=1" >
    <rect x="94.5" y="67.5" class="st0" width="773" height="55"/>
    </a>
    </svg>
    </body>
    </html>

In case they don't, my mockup of the state of the project as it stands now may be found at https://codepen.io/ChrisRichard/pen/qwLMEL

However, it doesn't look like I can post the plugin's javascript and CSS there because they're proprietary. I'll see what I can do about alternatives on that. Meanwhile, somebody could certainly edit in a different javascript call that I and others could extrapolate from, and I've saved the project as a template to facilitate that.

I should point out that there's a lot I don't know about the language of coding. I'm self-taught. So the more specific the suggestions, the better.

Thanks in advance for any suggestions.

Report · Apr 27, 2019

well, I must admit that your mail being pretty long, I'm not sure to quite understand what is your aim... so sorry if I missed your point and answer beside your question.

having hyperlink in SVG , being hyperlink, or JavScript driven, is pretty easy.

two points

one, if it's a pure hyperlink, you need to use a binding to the xlink namespace and use an xlink:href attribute instead of a simple href

second, if it's a JavaScript firing, you first need to load the associative script, be sure that the script load after the document (if needed and if you don't use an event attribute)

you can also use illustrator to handle everything (except the pure javascript file)

here is an SVG file, and a JS file

SVG

<?xml version="1.0" encoding="utf-8"?>

viewBox="0 0 977 196" style="enable-background:new 0 0 977 196;" xml:space="preserve">

.st0{fill:#72B7AE;}

.st1{font-family:'MyriadPro-Regular';}

.st2{font-size:30.5828px;}

.st3{fill:#86BA68;}

.st4{fill:#DBAE56;}

</style>

<defs>

</script>

</defs>

<g>

</g>

<text transform="matrix(1 0 0 1 90.1709 97.3389)" class="st1 st2">hyperlink</text>

</g>

</g>

<text onclick="clikedJavaScript("From Attribute")" transform="matrix(1 0 0 1 430.688 82.3389)"><tspan x="0" y="0" class="st1 st2">JavaScript</tspan><tspan x="-30.9" y="36.7" class="st1 st2">event attribute</tspan></text>

</g>

<g>

</g>

<text transform="matrix(1 0 0 1 763.688 82.3389)"><tspan x="0" y="0" class="st1 st2">JavaScript</tspan><tspan x="-22.1" y="36.7" class="st1 st2">event listener</tspan></text>

</g>

</svg>

JS (file called scripts.js)

function clikedJavaScript(arg){

alert("cliked on object " + arg)

}

window.onload = function(){

var node = document.querySelector('#Listener')

node.addEventListener("click",function(){clikedJavaScript("From Listener")})

}

Report · Apr 27, 2019

Well, thanks for taking this on. I recognize that it was a long post, and especially confusing because the website wouldn't display the code even though I used the format it stipulates. I'm also afraid that some of your response is going over my head. I'll try to explain where I'm confused here.

So I'm loading this .svg, imported from Illustrator, into an html page. I'll truncate most of the base64 encoded image, including just enough of it to show where it goes in the page as a whole, but to look at the whole thing, go to https://codepen.io/ChrisRichard/pen/qwLMEL

Here's the abbreviated version:

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>Declaration</title>

<link type="text/css" rel="stylesheet" href="floatbox/floatbox.css" />

<script type="text/javascript" src="floatbox/floatbox.js"></script>

</head>

<body>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

viewBox="0 0 882.5 245.9" style="enable-background:new 0 0 882.5 245.9;" xml:space="preserve">

<style type="text/css">

.st0{opacity:0.35;fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}

</style>

<image style="overflow:visible;" width="750" height="209" xlink:href="data:image/png;

base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAADRCAYAAACTrj

WiZHqpWs2ra3VpcUIHa9SXqqpTl7bIMTyBQNNl13NkAT59pgAWq1evp/A/lH6dv6rBKPAAAAAElF

TkSuQmCC" transform="matrix(1.1767 0 0 1.1767 0 0)">

</image>

<a xlink:href="https://www.loc.gov/resource/rbc0001.2004pe76546/?sp=1" >

<rect x="94.5" y="67.5" class="st0" width="773" height="55"/>

</a>

</svg> </body> </html>

Ordinarily, I'd trigger such a link with something like this:

     <a href="LinkFromFacsimileStoryImage.html" class="floatbox" data-fb- options="width:80% height:80% 
     scrolling:yes">LinkName</a>

But that doesn't work here. I can't figure out how to trigger the javascript. in fact, when I try to write that code into the .svg, it breaks the image.

I think you're telling me to do this:

<!doctype html>

<html>

<head>

<title>Declaration</title>

</head>

<body>

viewBox="0 0 882.5 245.9" style="enable-background:new 0 0 882.5 245.9;" xml:space="preserve">

. st0{opacity:0.35;fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}

</style>

<defs>

</script>

At this point I'd need to load an external stylesheet, too, but despite repeated Google searches, I can't figure out how.

Ordinarily, that stylesheet would be loaded on a regular html page as

How would I do it in the svg?

Also, after this point in your explanation, I'm really confused. I gather that at least some of this code is supposed to load after the image does, but I'm confused about position.

I'm including my original code again, with the image still truncated but without any effort to insert new commands. Could you show me where they should go?

<!doctype html>

<html>

<head>

<title>Declaration</title>

</head>

<body>

viewBox="0 0 882.5 245.9" style="enable-background:new 0 0 882.5 245.9;" xml:space="preserve">

.st0{opacity:0.35;fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}

</style>

</image>

</a>

</svg>

</body>

</html>

And one final question. Some of the facsimile documents I'm talking about are very long, with as many as 75 links to supporting documents. Would I have to insert the seemingly complex code you've outlined for every link, and could any of it be treated as boilerplate, or would each link require extensive individual modification?

I've also put up a second codepen showing how floatbox works: https://codepen.io/ChrisRichard/pen/WWPVPO

Thanks in advance and again, sorry for the very long post. I don't know how else to describe the problem or seek a solution.

Report · Apr 27, 2019

This is not that complictaed.

#1 I've never used floatbox. Almost every site I work with contains jQuery so I'm useing a popular jQuery pluign called Fancybox 3 for this demo. If used commercially, you must buy a license (single use = $29). https://fancyapps.com/fancybox/3/#license

#2 I am using an SVG path and data-src to pull images into the Fancybox viewer. See Fancybox documentation for more info.

https://fancyapps.com/fancybox/3/docs/

Here is the entire code.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive SVG Image Map</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--latest Fancybox CSS-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" rel="stylesheet">
<style>
.container {
width: 70%;
margin: 0 auto
}
#myMap {
position: relative;
width: 100%;
padding-bottom: 77%;
vertical-align: middle;
margin: 0;
overflow: hidden;
}
#myMap svg {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
#myMap rect:hover { opacity: 1.0;}
</style>
</head>
<body>
<div class="container">
<h3>Responsive SVG Image Map with <a href="http://fancyapps.com/fancybox/3/" target="_blank">Fancybox 3 lightbox viewer</a></h3>
<p>Resize browser window & click or tap on vector shapes below. </p>
<figure id="myMap">
<svg version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" viewBox="0 0 1200 808" preserveAspectRatio="xMinYMin meet">
<!--bitmap background image-->
<image width="1200" height="800" xlink:href="https://dummyimage.com/1200x800.jpg"> </image>
<!--vector path & data-src-->
<rect path 
data-fancybox="gallery" class="fancybox" data-slide="1" data-src="https://c1.staticflickr.com/1/357/31876784275_12286240d4_h.jpg" x="50" y="28" fill="#ff0" opacity="0.4" width="300" height="750" />
<!--2nd vector path & data-src-->
<rect path 
data-fancybox="gallery" class="fancybox" data-slide="2" data-src="https://c1.staticflickr.com/9/8148/29324593462_abebaddc38_k.jpg" 
 x="440" y="28" fill="#f00" opacity="0.4" width="300" height="750"/>
<!--3rd vector path & data-src-->
<rect path 
data-fancybox="gallery" class="fancybox" data-slide="3" data-src="https://c2.staticflickr.com/6/5499/30972532232_051e1dc57e_h.jpg" x="825" y="28" fill="#0ff" opacity="0.4" width="300" height="750"/>
</svg>
</figure>
</div>
<!--jQuery Core JS--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<!--Fancybox 3 JS--> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script> 
<script>
//Invoke fancybox on page load
$( document ).ready( function () {
            $( '.fancybox' )
        } );
    </script>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Apr 27, 2019

This is intriguing, and gives me hope that I'll eventually arrive at a solution, but the process is so different from what I'd started to get accustomed to that I'm baffled. I'll have to study it to see how I can apply it to what I'm trying to do. I'll certainly check out fancybox.

In the meantime, I've put up another codepen showing floatbox at work:

https://codepen.io/ChrisRichard/pen/WWPVPO

If I could make that work, I'd like to, because in everything up to now it's been so versatile and straightforward. Anyway, back to you soon after I've given this some thought.

I'm not even going to ask how you got the code to display properly. That's what I had on my screen, and then when I tried to save it, it disappeared. Jeeze

Report · Apr 27, 2019

To post code in this forum, use the advanced editor link.

Click the insert icon (double chevrons).

Select Syntax Highlighting > Plain.

Paste code into the resulting box.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Apr 27, 2019

Thanks. I can't find what I'd chosen before, but it wasn't that.

Report · Apr 28, 2019

Well, this is pretty frustrating.

I simply don't have the skills to understand what I'm looking at here, apparently.

What I gather is that it is possible to do what I'm trying to achieve, even if I to have to use another plugin.

But what I seem to see here is a key to a map, so to speak. I'm lacking access to the map itself or any information about how the two interact.

Apparently, my skill level is so low that I didn't understand that I need to load the javascript at the bottom of the page. I'm not blaming anybody here for that. I'm just ticked that in several years of communication with the Floatbox admin, he never once told me that. Apparently I was supposed to infer it, somehow, without any explanation or demonstration as to how to do it right. At this point, I don't even know how important that is, or if it is important, why.

If you were in my position, what would you do next?
I don't want to ask dumb questions. I want to get my problem solved. Is there a book or a course of study to be recommended so that I don't have to go through stuff like this again or waste people's time?

Report · Apr 28, 2019

What's wrong with the code I gave you?

Why can't you adapt that to your needs with your own images?

In other words, change the dummy image to your own image. If you use a drastically different sized image though,you will have to adjust the viewbox and vector shapes accordingly.

There is an entire chapter on SVGs at W3 Schools and MDN. But SVGs are just XML code.

SVG Tutorial

SVG: Scalable Vector Graphics | MDN

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Apr 28, 2019

I'm sure there's nothing wrong with it.
I just don't understand it.

Thanks for the pointers to tutorials. Maybe those will help
I'll keep plugging away and will be in touch if I hit a roadblock that isn't covered by the tutorials or if I finally manage to make this work.

One other question before I go back to square 1, though: One of the things that I might come to like about svgs is that they can be imported wholesale into an .html page. But I saw an admonition elsewhere that a person shouldn't do that if he wants to achieve what I'm trying to accomplish, that he should instead treat them as any other .img file.

This may be mixing different methods and off the beam. Obviously, I'm confused. But, any thoughts?

Thanks

Report · Apr 28, 2019

I might be missing something obvious (I often do in forums). But why do you need an image map for what you want to do? Why can't you just link an ordinary thumbnail <img> to whatever element it is that you want to open in the lightbox viewer?

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Apr 28, 2019

I need to present facsimile copies of articles I've written, with clickable links, on my portfolio webpage. It doesn't work to link to the originals because various publications change their website and archive organization, or actually throw old articles away, or go out of business.

Because these are research-based articles, it's vital that people be able to click on the links in order to follow my reasoning. So the links are kind of like footnotes. It would be easiest if I had the skills to make mirror-image copies of the original articles in html, publication logo and all, but I'm light years from being able to do that, and it would be legally questionable if I had the skills, and even if I had the skills, I couldn't afford the time to do all that coding, adjusting it for each publication. So a .png of the article works best.

The overlays work best because I don't want readers flipping from screen to screen, let alone website to website. If they want to check out the source of my information in a particular link, I want them to be able to click on that link and have the information pop right up. They can glance at it or read it, close it, and go back to reading without losing track of where they were in the article. This system also makes it easier for me to keep a complete record of my resource material. Just as publications go through the gyrations described above, so do the sources of reference material. If I have legible copies of my sources, I can count on the article continuing to be legible and relevant.

I turned to .svgs because it does appear that the hyperlinks can move with the underlying image, responding with that image according to screen size. It seems like a real good solution. But the overlay stumbling block is killing me.

Report · Apr 28, 2019

By the way, I really should have said how much I appreciate all your suggestions. I'd meant to say that before, but I'm so frustrated at not just immediately understanding it that my gratitude didn't come through. My guess is that this is still going to take me a little while to work out. But you've given me valuable help in doing that. I'll keep you posted.

Report · Apr 29, 2019

PNGs or JPGs of articles are not accessible to translators, screen readers or search engines. And humans will have trouble reading the text from an image. So that's not really a viable solution.

Are your articles on a site that contains an RSS feed? With permission from the site owner, you could scrape the RSS feeds and port articles directly into your site. Or you could save articles from your browser as PDFs.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Apr 29, 2019

Something just occurred to me. Can I even expect Illustrator, where I'm trying to process the .png files, to handle .pngs properly? Illustrator is for vectors. Using "image trace" misinterprets the colors in the original .png. What effect is there from just placing a .png in the file?

Report · Apr 29, 2019

Illustrator's TRACE feature is intended for tracing simple designs like logos from high quality images. I've never attempted to trace a picture of an article, nor would I want to.

Instead, use Acrobat DC and convert to PDF.

JPG to PDF converter, how to convert JPG to PDF | Adobe Acrobat DC

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Apr 29, 2019

I started from a .pdf of the article and sent it to first to photoshop and then to .png, which was probably a waste of time and probably inserted new problems. I'm looking as I write this how to send the .pdf directly to .eps, but if you have any thoughts, I'd appreciate them.

By the way, you've been remarkably generous and patient.

I can only hope that this helps other people, too.

Report · Apr 29, 2019

chrisr22768989 wrote
I started from a .pdf of the article and sent it first to photoshop and then to .png,

I think confusion reigns because you're trying to make a sow's ear from a silk purse and back again. There's no need for all that. Just forget about Illustrator for now. And don't even think of using EPS. It's a zombie file type that nobody uses anymore.

Take the code I gave you and replace the dummy image placeholder with your PNG file.

</image>

Without knowing the height and width of your PNG or it's filename, I can't be more specific.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Apr 29, 2019

Thanks again. I'll keep you posted.

Report · Apr 29, 2019

Change the data-src links to your site's PDF articles.

Change this:

<rect path

data-fancybox="gallery" class="fancybox" data-slide="1" data-src="https://c1.staticflickr.com/1/357/31876784275_12286240d4_h .jpg" x="50" y="28" fill="#ff0" opacity="0.4" width="300" height="750" />

To this:

<rect path

data-fancybox="gallery" class="fancybox" data-slide="1" data-src="https://yoursite.com/PDF/your_article.pdf" x="50" y="28" fill="#ff0" opacity="0.4" width="300" height="750" />

I have just tested this with PDFs on my own web server and it works great with the Fancybox viewer. Tested in Firefox, Chrome, Internet Explorer 11 & MS Edge.

Hopefully this will give you a working solution you can live with.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Apr 29, 2019

This is encouraging. Thank you.

Boy. I've been looking for years for a good pdf viewer, apart from all the other challenges I'm up against at the moment. I am eager to check this out.

One other thing: I was going to hold off on this one question because I'm just getting started on the reading, but since I'm asking: won't I need illustrator anyway in order to define the locations for the links? These are going to be pretty tight, frankly, on an image of single-spaced type. Often, there's more than one link per sentence. Again, it would be better if I could just use text in html with links there, but I have neither the skill nor the time to do that, and I do think it would be questionable to go copying the publishers' code like that anyway. What I've got in mind is more like an old-fashioned portfolio binder. But the space for the links will be tight.

Report · Apr 30, 2019

chrisr22768989 wrote
won't I need illustrator anyway in order to define the locations for the links?

You don't need Illustrator. Rectangle paths are simple x y coordinates and size values. Change code in DW's Live view.

x="50" y="28" fill="#ff0" opacity="0.4" width="300" height="750"

These are going to be pretty tight, frankly, on an image of single-spaced
type. Often, there's more than one link per sentence... ...But the space
for the links will be tight.

Sorry to be blunt but image hotspots cannot be less than 50px x 50px (adult finger tip size). And bigger is better here. If links are not easilty accessibile by finger tap on small screens, you can toss this idea in the trash can. It won't work.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Apr 30, 2019

Thanks again. I prefer bluntness to having no idea where I'm going wrong. You are only mildly blunt and this is really helpful.

As I said before, now comes the work of actually making the thing work

I'll be back in touch when I have.

Adobe Community

Question - How to trigger javascript hyperlinks in an SVG?