Highlighted

Resize Images on smart phones in HTML5

Explorer ,
May 18, 2018

Copy link to clipboard

Copied

I created a workflow process in Visio, saved it as a .png and inserted it into a Robohelp topic. I applied image maps (hot spots) to each box in the workflow to link to those topics. When I resize the browser to see how it will look for a tablet or smart phone, the image doesn't resize smaller when the browser does. It only resizes when the hot spots are removed.

Is there any source code or any way I can make the hot spots relative so they shrink with the image? What's a good solution to create a linked image that shrinks to size on a smart phone or tablet?

Topics

HTML5 layout

Views

266

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

Resize Images on smart phones in HTML5

Explorer ,
May 18, 2018

Copy link to clipboard

Copied

I created a workflow process in Visio, saved it as a .png and inserted it into a Robohelp topic. I applied image maps (hot spots) to each box in the workflow to link to those topics. When I resize the browser to see how it will look for a tablet or smart phone, the image doesn't resize smaller when the browser does. It only resizes when the hot spots are removed.

Is there any source code or any way I can make the hot spots relative so they shrink with the image? What's a good solution to create a linked image that shrinks to size on a smart phone or tablet?

Topics

HTML5 layout

Views

267

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
May 18, 2018 0
LEGEND ,
May 19, 2018

Copy link to clipboard

Copied

There are several techniques to make image maps responsive. Most require a jQuery plugin.

If you like a more visual approach, give the following a try: https://www.zaneray.com/responsive-image-map/

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
Reply
Loading...
May 19, 2018 0