Make a responsive image with HIGHLIGHTED clickable areas (using Inkscape)
Here's the video walk-through how to make an INTERACTIVE responsive image with HIGHLIGHTED clickable areas. Also, you can use it in WordPress (and not only there). The image is in SVG format. You can do everything for free.
It's a part of my tutorial - see here in my blog: http://researchasahobby.com/highlight...
You can make an image which has many interactive areas that get highlighted and can be clicked. These interactive areas have their own URLs.
Also when this image is scaled (e.g. when you open a page with the image on a mobile device or chcnage your browser window) the clickable areas scale too with the image.
The table of contents of my article which contains more details and tricks:
1. Intro
2. Before we get down to the tutorial (under the hood)
3. Video walk-through of the whole process
4. Tutorial starts: Create SVG from your image or from scratch
4.1. Take your image and put it inside a new SVG
5. Adding interactivity to your image
5.1. Adding interactive highlighted areas to your SVG image using Incscape
5.1.1. Before we start adding interactive highlighted areas
5.1.2. Adding an area to the image and edit area’s shape
5.1.3. Setting the initial color and transparency of the area
5.2. Making the areas clickable
6. Adding interactive SVG with raster image inside to your WordPress
6.1. SVG Support plugin helps to import and use your SVG images
6.2. This simple CSS code will make the width of your SVG image correct
7. Some practical tips on using SVG images in your WordPress site
8. Conclusion
Read the whole tutorial here: http://researchasahobby.com/highlight...
Having issues with creating links in SVG? Have a look at this tutorial then: https://researchasahobby.com/problems...
