Is There a Better Alternative to HTML Image Map?

1

Hello,

I’ve been following the Hugo Quickstart tutorial using the Ananke theme and I’ve successfully added an HTML image with an image map containing href links. It works but the theme scales the image so I’m forced to manually scale all the coordinates in the map. Is there a native Hugo or Markdown way to add an image map?

Here’s an example of what I’m doing now:

---
title: "Top Level"
date: 2021-05-04T11:09:54-07:00
featured_image: "/images/my-image-200dpi.png"
description:Top Level Design
draft: true
---
# Top-Level Hardware
The top level block diagram is shown below:

<img src="/images/my-image-200dpi.png" alt="image using html" usemap="#my-image-map" />

<map name="my-image-map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:rob -->
<area shape="rect" coords="52,92,87,176" href="/circuits/power-supply" />
<area shape="rect" coords="11,56,60,82" href="/circuits/power-on-circuit" />
<area shape="rect" coords="151,46,374,193" href="/circuits/read-only-memory" />
<area shape="rect" coords="424,70,480,106" href="/circuits/clock-driver" />
<area shape="rect" coords="492,42,624,196" href="/circuits/display-system" />
<area shape="rect" coords="520,56,590,88" href="/circuits/cathode-driver" />
<area shape="rect" coords="520,106,590,138" href="/circuits/led-display" />
<area shape="rect" coords="520,153,590,186" href="/circuits/anode-driver" />
<area shape="rect" coords="6,204,101,332" href="/circuits/keyboard" />
<area shape="rect" coords="113,210,278,319" href="/circuits/control-and-timing" />
<area shape="rect" coords="460,210,610,319" href="/circuits/arithmetic-and-register" />
<area shape="rect" coords="381,353,460,385" href="/circuits/data-storage-circuit" />
</map>

Above is image using html.  Click a block.

Note that I’m not much of a web programmer - I don’t have experience with javascript, css, or the like so I’d like to use the normal markdown syntax but I need an image map function. I use Dokuwiki quite a bit at the office and there’s an image map plug-in available for it. I’m hoping for something like that.

Thanks,

-Rob

2

No, there is not.

You will need to use JavaScript to scale the image map with the image. You might find something useful here:

2 Likes
3

@jmooring,

Although I’m disappointed, it’s nice to get a definitive “No”. Thanks.

The Javascript solutions are more than I want to bite off at this time. However, I found something that solves part of my problem, namely the scaling. This Stack Overflow post:

Using this technique, I can specify my hit zones using percentages so they track the image scaling applied by the theme. Here’s an example of what I ended up with:

<!-- Based on https://stackoverflow.com/a/53597608 -->
<!-- "First of all, make sure your image is in a div that's relatively positioned." -->
<!-- "Then put the image inside this div, which means it'll take up all the space in the div." -->
<!-- "Finally, add absolutely positioned div's under the image, within the main div, and use percentages for top, left, width, and height to get the link hit areas the size and position you want." -->
<!-- "Choose a background-color of transparent when you're ready to use it since you want your hit areas to be invisible." -->
<div style="position: relative;">
    <img src="/images/my-image-200dpi.png" style="width: 100%; height: auto;" />
    <a href="/circuits/power-supply"><div style="position: absolute; left: 8.18%; top: 21.73%; width: 5.43%; height: 19.83%; background-color: rgba(0, 0, 0, .25);"></div></a>
    <a href="/circuits/power-on-circuit"><div style="position: absolute; left: 1.65%; top: 13.17%; width: 7.63%; height: 6.13%; background-color: rgba(0, 0, 0, .25);"></div></a>
</div>

Above uses divs with position divisions specified as percentages.

-Rob

1 Like
4

You might be able to do something with SVG with hyperlinks? I use SVG within markdown posts in Hugo, but haven’t tried hyperlinks. I just paste the SVG markup into the .md file and it renders as usual.

5

@dnorman,

Thanks for the suggestion. I see there’s a lot on the web about using SVG overlays to make images “responsive”. I’ll explore that.

-Rob

6

I use OmniGraffle (macOS) to create the graphics. It lets me select any objects and copy them as SVG, which I can just paste right into my markdown files.

7

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.