Hotspots and HTML5

Community Beginner ,
May 05, 2021 May 05, 2021

Copy link to clipboard

Copied

Aight here's the sitch. 

 

I'm working with Hotspots within an HTML5 document using a Specify Named Destination - Hypertext marker.

I've set them up inside of Framemaker using an unstructured book (DITA has been causing me enough problems for one week). 

 

Inside Framemaker, the Hotspots work fantastically, they also work perfectly when outputting to PDF. 

The big issue i'm having is that when outputting to HTML5 somehow that link breaks, I recieve the ominous error that the destination link "May have been moved, edited or deleted"... 

 

However, those destinations still exist and open fine when using the table of contents. 

 

Continuing from there I also have issues with image quality, the hotspots somehow seem to annihilate and crunch the images i'm using to paste... 

 

Any advice, tips, a saviour to come from out of the skies to answer to me pleas ? 

 

TOPICS
Publishing , Responsive HTML5

Views

225

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 11, 2021 May 11, 2021

Copy link to clipboard

Copied

What's the generated code for the broken link in the published project, and does it accurately point to the destination in the published output?

 

Spaces, punctuation, and non-alphanum characters can be misinterpreted as HTML code in the output. I've had similar issues with EPUB.

 

-Matt

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 13, 2021 May 13, 2021

Copy link to clipboard

Copied

Hi Matt and thanks for the reply, 

 

I'm not entirely sure where I can see that in the output, any advice ? 

 

Currently, they direct to a "Named Destination" hypertext marker inside of the ditamap (yes, i'm back to Dita), 

 

It works when i test it inside of Framemaker, I.E. if I only have one topic of the map open, it will open the destination topic without any worries.

 

Should I perhaps be using a URL of some sort or a different hypertext marker?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 13, 2021 May 13, 2021

Copy link to clipboard

Copied

Hi Lewis, you'll need to open up the html files in a text editor (ugh) or within your browser, right-click and choose Inspect (in Chrome) or View Source.

 

It can take some time to find the proper code, but when you find it, (likely starting with <a href ) then we can figure out what the problem is.

 

Did you confirm that you're only using numbers and letters (no spaces, no special characters) in your named destination?

 

-Matt

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 13, 2021 May 13, 2021

Copy link to clipboard

Copied

I'm slightly confused, 

 

The Hypertext panel within framemaker automatically sets a Specify Named Destination location. 

 

The text is newlink hands. 

 

Issue now is that the hotspot doesnt even output, ie, the image is not clickable at all...

 

Reminder, I am now using a Ditamap. 

>Right Click Image

>Hotspot Properties

>select URL

>Pasted the the URL of the outputted HTML5 topic. Exactly the same as the Parent/Child navigation Href uses. 

What I tried before, that still aint working. 
> Select Target Location
> Insert > Hypertext...
> Create "Named Destination Hypertext Marker" in target location (at Heading IN document)
> newlink HandS
> Go to image in other document
>Right Click
>Hotspot Properties
>Select Document from drop down
>Select Named Destination Marker from Available Markers

Works inside framemaker, creates the "Cannot be found" error on output. 

 

When I did this previously, I could still Click on the Image in the output, now, the output is not even clickable...

 

Only shows the Href to the image itself when I inspect the element. NO BUTTON OUTPUTTED. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
May 11, 2021 May 11, 2021

Copy link to clipboard

Copied

Hey @Lewis5FED ,

For 1st point , Hotpspot: Is it occuring when you are linking hotspot <heading >  or any text on which you are doing a split when publishing Responsive html5  or is it something else ?



For 2nd point , Image quality: Could you tell me more details about it ?

Thanks
Pulkit

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 13, 2021 May 13, 2021

Copy link to clipboard

Copied

Hi Pulkitn, 

 

The error occurs when linking to a Named Destination Hypertext marker at any level within a document. 

 

I have tried at the heading and body. 

 

It works fine within Framemaker, If I only have one topic of the map open, it will open the destination without any issues. 

 

The error occurs only on output to HTML5 (works fine in PDF). 

 

 

Image Quality:

Pretty simple really, the images I put in look fantastic on Framemaker, however, if they are a Hotspot, on output, they become pixilated and very poor quality. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 13, 2021 May 13, 2021

Copy link to clipboard

Copied

> Update 

 

I have tried hotspots using a URL and it appears to work BUT...

 

What I tried: 

  • Outputted the HTML5 first
  • Went back into Framemaker and created Hotspots with links to the HTML output files
  • Inside a FM document, it opens the browser and connects to the right place, YAY !
  • However, the hotspot itself doesn't exist on output, the image is NOT CLICKABLE. 

Any updates on my update ?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 13, 2021 May 13, 2021

Copy link to clipboard

Copied

No, that won't work.

 

You can link to a URL, but a URL to Fm output won't work. It needs to be a URL to a website.

 

If your link is a destination in your book, then you need to ID the location in the Fm files, not in the Fm output.

 

What's the exact text of the hyperlink marker that doesn't work?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 13, 2021 May 13, 2021

Copy link to clipboard

Copied

LATEST

HTML5 is a website with a URL. 

 

Thats how the Parent / Child navigation and the TOC navigation creates links using Href's. 

 

My issue now is that hotspots simply dont exist in the output. 

 

I.E. There is a static image on the page and it is NOT clickable. 

 

Inverse issue of what I had before. 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines