When I was planning for my third Dashboard Week project, I wanted to have an interactive landing page where it consist of a single image that filled up the entire Tableau dashboard, with different areas that can each be clicked on and then hyperlinked to different destinations. This is similar to the HTML image maps, and in my mind I was convinced that it can be replicated (to an extent) in Tableau. It ended up being pretty close to what an HTML image map would look and behave, and I thought I would make a short post to describe how I did it.
Step 01: Find an Image
In this case, I wanted an image where the clickable areas are distinct and obvious, even without any instructions or explanations. I went with a black-and-white sketch, with my clickable zones filled in with vibrant colours. I also added my “signature” of sorts in the bottom-right hand corner, which I wanted to link to my LinkedIn profile. The end result is this:
Step 02: Add the Clickable Zones
There are not too many elements in a Tableau Dashboard that can be linked to destinations. For the parts that I want to link to other parts of the same dashboard (i.e., the map, books, and desk), I added a button for each of them. Each of these buttons has a title with a single dot in the Title, and a Tooltip that describes what would happen after they click the button. I also turned the Background‘s opacity to 0%, so that it’s completely transparent. Lastly, and perhaps optionally, I changed the Font colour to match the background of where the dot would be, so that it would be more camouflaged and less visible.
Next, I added an image object for the “signature” that links to my LinkedIn profile. This image is basically one with a transparent background and no foreground. Just select the options to Fit Image, and then the destination URL for when the image is clicked.
And that’s it! As promised, this has been a short blog. If you would like to see how the finished dashboard looks like, you could check it out on Tableau Public.