flowchart22

Below is the link that will show you a simple demonstration on how image mapping works.
http://bit.ly/jezweb-imagemap

Try clicking the 3 boxes and see what happens. Each time you click on the box there will be a corresponding box that will further give you an explanation or further action. Interesting? Please check the guide below on how we did this:

1. First you need to install this plugin into your WordPress site:
https://wordpress.org/plugins/imagemapper/

2. Once installed, you need an image for your image map. We will use the image below for testing.

flowchart22

3. Go to Image maps and click on Add new Image map.

imagemap-01

4. Write the title and click on Choose File to upload your image. Once image is uploaded, click on Publish at the right side.

imagemap-02

5. Start creating the shape of the new area by clicking the image of the image map. The first and the last point of the path are joined automatically. When the shape is ready, click on Add Area.

imagemap-03

6. Each time you click on Add area, this will be added in the All image map areas list (Image map areas > All Image map areas)

imagemap-04

7. To specify the action once the image map is clicked, hover you mouse to the map area title and click on Edit. This will give you an option on what specific action you want to take once the image map is clicked.

imagemap-05

8. At this point, we can see 3 mouse events to choose from (Link, Tooltip, Popup window). We will just use Popup Window and put some text inside inside that pop up window. After that click on Update.

imagemap-06

9. Go back to All image map areas and repeat steps 7 & 8.

10. Once done, we will now insert map to a post. Adding image map to the post is simple. After you have created the image map, go to the post page. Click Add Media (or Insert/Upload media) and choose Image map tab. Click the image map you want to insert into the post.

imagemap-07

11. Save your post and view the website online to test your image maps.


About 

    Find more about me on:
  • facebook
  • googleplus
  • linkedin
  • pinterest
  • twitter
  • youtube

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>