Mac SEO Blog

The video below will show you how you can incorporate an image map on your WordPress website. Image maps allow your websites users to click on different areas of your image and be taken to different links. Image maps are extremely easy to create when using MapDesign.

Video Transcript:

In this tutorial, I am going to show you how you can add an image map to a website in WordPress, using MapDesign.

Before I begin I want to mention that there is one tricky part that will require the user to do a bit of trial and error. The image that you want to use to create your image map will need to fit into the body of your posts or pages. Basically you want to make it so that your image is the same size or less than the width of the body where your posts or pages go. This might require you to make a mistake or two along the way and go back and correct it. So I will leave that part up to you and continue along with the tutorial.

So here I have my image ready on my desktop. I am going to drag it onto MapDesign. Then I will create my hot spots by selecting the Rectangle, Circles, or Polygon tools.

Next, I will link these hotspots by clicking on Edit, and typing in the URL on the Behavior tab.

When I am done creating my hot spots, I will click on the Export To Web Site button to export the image map. You will notice I have select Simple Image Map. I encourage all of you to do the same to ensure that our image maps will work properly on our WordPress sites.

I will leave the format as JPEG and the Quality as High. I will click the next button, and save export the image map to my desktop.

On my desktop, I will now have an index.html file and an images folder, which will contain my image map.

Open up the index.html file in your favourite HTML editor. Make sure you are not opening it a web browser. I am opening mine up in our HTML editor called WebDesign.

Highlight all of the code with the opening Body and Closing body tags just like I have done. Then copy this code.

Now go to your WordPress dashboard, and either add a new post, or add a new page, whichever your prefer. Make sure you are on the HTML tab and paste the code that you just copied.

Now I will open a new tab or a new window in your web browser and go to imageshack.us. You can choose to host the image on your own server, but for the purpose of this video, I am going to host it on imageshack. The choice is up to you, but it will be easier for you to follow along if you also host it on imageshack.

Click on the browse button, and locate the image map which is inside of the images folder. Highlight it and click Open. Then click on the Upload Now button on image shack.

Highlight the URL in the Link field, copy it, and paste it in your web browser. Then do a secondary click on your image, and select Copy Image Address, or copy image location. Now go back to your post in your WordPress dashboard.

At the bottom of the code that we copied and pasted, you should see a location for your image which reads images/rage_css_imagemap.jpg. Highlight that part of the code, and paste the URL that we have just copied. Make sure your URL has quotation marks around it like mine does.

Quickly click on the visual tab to confirm that everything has worked. If you are able to see your image, then you have done everything correctly and you can publish your post or page.