Image Map With Hover Dots

… or how I showed you that I pimped my 2013 Retina MacBook Pro

I’m not going to write too much about this, because I’m lazy. Also because good content doesn’t need to be commented, it’s self-explainatory

Step 1: the Hugo shortcode

Keep in mind the image and points values will be used as parameters below

1

{{ < imagemap image="laptoplid" points="stickers" > }}

Step 2: the front matter of the post

The parameters are self explainatory: the laptoplid is used as image and we have a map (an array) of the stickers, which will be looped as points.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


laptoplid: "/path/to/image.jpg"
stickers:
- title: Ceva Marunt - Vaca
  from: cevamarunt.ro sticker pack
  left: 8
  top: 10
- title: Parov Stelar - Demon Diaries
  from: came with record
  left: 17.2
  top: 21.7

Step 3: the shortcode html

This is straight forward, we get the image and the points from the shortcode parameters, being invoked either by imagemap image="foo" points="bar" or by imagemap foo bar. Then we just loop through the points showing the “title” and the “from”, while absolutely positioning the dot at the left and top percentage coordinates. I’m also adding a <details> block with a table with the main fields, just in case you’re on a mobile and shit’s broken. You can also see the CSS used for displaying them below.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32


{{ $image := index $.Page.Params (.Get 0) }}{{ if (.Get "image") }}{{ $image = index $.Page.Params (.Get "image") }}{{end}}
{{ $points := index $.Page.Params (.Get 0) }}{{ if (.Get "points") }}{{ $points = index $.Page.Params (.Get "points") }}{{end}}
<div class="imagemap-container">
	<img src="{{ $.Site.Params.mediaURL }}{{ $image }}">
	<div class="imagemap-points">
	{{ range $points }}
		{{ $parent := . }}
		<div style="left: {{ $parent.left }}%; top: {{ $parent.top }}%">
			<span class="tooltip-content"><strong>{{ $parent.title | markdownify }}</strong><br>{{ $parent.from | markdownify }}</span>
		</div>
	{{ end }}
	</div>
</div>

<details>
<summary>Click to see all items as a list</summary>
<table>
	<thead>
		<th>Title</th>
		<th>Comments</th>
	</thead>
	<tbody>
{{ range $points }}
	{{ $parent := . }}
	<tr>
		<th>{{ $parent.title | markdownify }}</th>
		<td>{{ $parent.from | markdownify }}</td>
	</tr>
{{ end }}
	</tbody>
</table>
</details>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


<style type="text/css">
.imagemap-container {
    position: relative; margin-bottom: 20px;
}
.imagemap-points {
    position: absolute; opacity: 0.3; left: 0; right: 0; top: 0; bottom: 0;
}
.imagemap-container:hover img {
	opacity:0.6;
}
.imagemap-container:hover .imagemap-points {
	opacity: 1;
}
.imagemap-points div {
    position: absolute; z-index: 999; display: block !important; width: 20px; height: 20px; background: #f00; border-radius: 50%; border: 4px solid #fff; margin: -10px; text-decoration: none !important; color: #fff; box-shadow: 0px 0 4px 2px #000; z-index: 69; cursor: default !important;
}
.imagemap-points div:hover {
    color: #fff; z-index: 6969; width: 30px; height: 30px; margin: -15px; border: 4px solid #000;
}
span.tooltip-content {
    box-shadow: 0px 0 4px 2px #fff; background: #000; margin: -4px; display: block; width: 250px; padding: 10px; font-size: 14px; display:none; cursor: crosshair;
}
.imagemap-points div:hover span.tooltip-content {
    display:block;
}
</style>

Step 4: the result

Click to see all items as a list

Title	Comments
Ceva Marunt - Vaca	cevamarunt.ro sticker pack
Parov Stelar - Demon Diaries	came with record
Minion	gift from my niece
E mare – Nu-i chiar asa mare	cevamarunt.ro sticker pack
Minion 2	gift from my niece
Schwarzwald	gift from Silvia
LateNightTales	came with record
Rabbit on a Bike	gift from Silvia
Om La Luna	came with record
Starbucks	cute barista named Alexandra in Gara de Nord
finest ego	hvv.de sticker pack
Luigi	Kinder egg surprise
The Kryptonite Sparks	from the band
Zen Raccoon	Chillhop sticker pack
Gary the Snail	gift from my niece
Rafinaria La Prezent	taken at the event
LateNightTales - Bonobo	came with record
Chillhop Raccoon	Chillhop sticker pack
Smiley face	Deliric x Silent Strike II
Mondo Eye	Mondotees.com sticker pack
Alternosfera	From a concert
Mario	Kinder egg surprise
Carrera	My current glasses
Black Mirror - San Junipero	came with record
Central Perk Coffee	gift from Patricia
Rupe-le Capu’ Gogule	from Andreea at some comics fair
Rammstein	their shop
Maru	From a concert
Coma	From a concert
hhv	hhv.de sticker pack
Toma	cevamarunt.ro sticker pack
Monster Energy Drink	don’t remember

And that’s it!

Guestbook