Create Your Own Image Maps in Thesis and WordPress Using CSS

A 4-step tutorial (3 steps for some) to help you create an image map quickly and simply using a few lines of HTML in your post and some CSS styling – code included. Links to additional image map tutorials, free image map editor, free image map tool and examples of image maps used on a variety of sites.

Contents at a Glance

• How Long Will it Take to Create an Image Map?
• Create An Image Map Quickly and Simply
• What You Will Need To Create An Image Map
• What Is An Image Map?
• 10 Benefits of Using An Image Map
• Step 1: Create Your Image & Re-size it if Necessary
• Step 2: Identify the Pixel Coordinates of the Image
• NEWSFLASH:Free Software that creates your image map HTML
• Step 3: Write Your HTML & CSS Code for the Image Map
• Step 4: If You Need More Information, Help, Examples & Resources…

How Long Will it Take to Create an Image Map?

There are many different ways to create an image map in WordPress and more ways using Photoshop and Dreamweaver. If you are a self-taught hacker like myself, you can easily spend 5 hours creating your image and coding the image map – only to find out that it doesn’t work in WordPress! Stop, read this article and find out how to create an image map in 15 minutes without prior knowledge.

Create An Image Map Quickly and Simply

Okay I confess – I tried at least 6 ways to create a working image map before I got it right. Take out the hour I took creating the image and resizing it so that it all fitted above the fold in my browser, I wasted approximately 4 hours – half a day! Don’t do it the hard way – read on and get yours done in about 15 minutes flat.

Warning: If you are a perfectionist or mess about with your image for hours (like I did because I’m still teaching myself how to use Photoshop) then it will take you longer!

What You Will Need To Create An Image Map

• An image that you want to have as your image map background. The image below is the one I used on Beyond 2012 HQ and will be the one I give you the html and css for.
• An image editor program like Photoshop.
• An HTML or text-editor like Dreamweaver or Notepad for typing the code to copy and paste into your WordPress post/page and custom style sheet.

• When you hover over each of the words on the above image (you will have to visit the site to see the live image), title text appears telling you about the destination page. If you click on any of these words, you will jump to that page. Just like a ‘real’ website I’m proud to say. Let’s get started so you can make your own.

What Is An Image Map?

If you are still unsure about what an image map is, here is what Wikipedia says:

In HTML and XHTML , an image map is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to various destinations (as opposed to a normal image link, in which the entire area of the image links to a single destination). For example, a map of the world may have each country hyperlinked to further information about that country. The intention of an image map is to provide an easy way of linking various parts of an image without dividing the image into separate image files.

10 Benefits of Using An Image Map

• Fewer files: Many WordPress themes use a larger single image for navigation buttons, with the image providing a selection of appearances on the one image by using CSS.
  • For example a navigation button is one colour when it is not highlighted and another when it is hovered over or actively in use.
• Faster page loads: with fewer files to upload to your server and fewer files to download to a visitor’s browser, pages will load more quickly. Visitors won’t have to wait for images to appear if they have already been downloaded to their cache.
• Looks cool: An image map is a common feature on ‘real’ websites and were not very easy for novices to create until recently.
• Simple: You don’t have to know how to code a web page in Dreamweaver or slice up an image in Photoshop to create an image map.
• Sophistication: add an extra element of sophistication to your site.
• Interactivity: your readers have something to do other than read your text and view your images.
• Entertainment: An image with lots of links with additional words when hovered over, provides the reader with a game of discovery.
• Longer visits: Viewing an image map with many options like the one above keeps your readers on your site longer than the average 0-15 seconds.
• Greater chance of bookmarking: Consider the perceived usefulness of a ‘portal’ page to a visitor versus 20 pages on your site. If they like the image map and think that there is a lot more to explore (when they have more time) they are more likely to bookmark it and/or share it.
• Learn coding gradually: By creating an image map you will learn about pixels, coordinates, margins, linking, image creation and resizing, html and css – just to mention a few things. By learning something extra every now and again you will escape from your newbie/hacker rank to beginner/novice rank and beyond…you just have to keep learning bit by bit.

Step 1: Create Your Image & Re-size it if Necessary

• You may already have an image to use or you may want to create one. Work out what size your image needs to be.
  • Does it need to fit in a sidebar, a post, the header, footer, etc?
• Create a draft post or page and insert your image, save the draft and preview its size in your browser. If you need to resize it after calculating the coordinates for your hotspots, you will take twice as long to create your image map.

The 2012 Alternate Futures image is one I created to display the different elements of the Beyond 2012 HQ website.

The visitor can see in an instant what is on offer and be able to get there within 3 clicks - always best practice. It also provides an interesting ‘call to action‘ in my sidebar. Note: at the time of writing this post, my landing pages are still in development, but they won’t be too far away.

Step 2: Identify the Pixel Coordinates of the Image

This is where you will need an image editor program or similar. By hovering over the image you can identify the x and y and width and height pixel coordinates.

Free image map editors: Try this online image map editor by Peter Schlömer if you have a URL for your image.

• To use with WordPress, upload/insert your image and identify its URL.
• If you right click on your image and select view image it will often take you to its unique URL.
• Copy and paste the image URL and select your hotspot areas with the click of a mouse.

NEWSFLASH: Free Software that creates your image map HTML

I just found a free Image Map Tool that does your HTML for you! Check it out. You can use an image from your computer or from a URL and mark multiple hot spots of different shapes.

Hint: use the SHIFT+click to identify your last coordinate when selecting your hotspot.

The code in this tutorial is for using without CSS. If you want to use the CSS method, keep reading.

Step 3: Write Your HTML & CSS Code for the Image Map

If you don’t use the free tool above…here is the CSS component

I researched many sites to finally find code that worked for me. As I said earlier there are many different ways to create an image map. You can slice an image up in Photoshop and create a page of code (but I had trouble getting it to work inside my WordPress site and don’t know how to insert it into the center of a page using Dreamweaver). You can create an image map in Dreamweaver – and if you know how to do this, why on Earth are you reading this tutorial?! You can use variations of HTML or HTML and CSS. I eventually found a way that worked for me.

Here is the HTML code that I used to insert the above Image and Image Map into a page on my WordPress Thesis site:

<div id="image_map"><a id="link1" title="2012 Beginners Guide" href="http://beyond2012hq.com/2012-beginners-guide/"></a>
<a id="link2" title="2012 Promotion &amp; Education" href="http://beyond2012hq.com/2012-promotion-and-education-products-events/"></a>
<a id="link3" title="2012 Science Fact or Science Fiction" href="http://beyond2012hq.com/2012-science-fact-or-science-fiction/"></a>
<a id="link4" title=" 2012 Conspiracy Theme" href="http://beyond2012hq.com/2012-conspiracy-theme-secret-agenda/"></a>
<a id="link5" title="2012 Prophecy &amp; Prediction" href="http://beyond2012hq.com/2012-prophecy-and-prediction-end-of-the-world/"></a>
<a id="link6" title="2012 New Age" href="http://beyond2012hq.com/2012-new-age-spirituality-metaphysics/"></a>
<a id="link7" title=" 2012 Survivalist" href="http://beyond2012hq.com/2012-survivalist-disaster-preparation/"></a>
<a id="link8" title="2012 Human Progress &amp; Evolution" href="http://beyond2012hq.com/beyond-2012-human-progress-and-evolution/"></a></div>

The “link1″, “link2″… references allow you to add styles to your links using CSS.

Tip: Theoretically, if you had multiple images and inserted hotspots/links in the same place on each image, you would just have to change the image link location and the #name of your image map. For example, always use images the same size and plan to have your hotspots in the same spot. Saves you calculating coordinates each time.

Here is the CSS I used to add the coordinates to the image in my custom style sheet:

The CSS provides the image location and coordinates for the links in your post.

/* wheel image map */
#image_map{
width:583px;
height:550px;
background:url(http://beyond2012hq.com/wp-content/uploads/2009/08/2012wheel_583x550.jpg) no-repeat;
position:relative;
} 

#image_map a{
display:block;
position:absolute;
} 

#image_map a.menu1{
width:165px;
height:75px;
top:50px;
}
#image_map a.menu2{
width:165px;
height:95px;
top:125px;
}
#image_map a.menu3{
width:130px;
height:85px;
top:125px;
}
#image_map a.menu4{
width:150px;
height:100px;
top:250px;
}
#image_map a.menu5{
width:150px;
height:100px;
top:250px;
}
#image_map a.menu6{
width:150px;
height:90px;
top:390px;
}
#image_map a.menu7{
width:185px;
height:90px;
top:390px;
}
#image_map a.menu8{
width:190px;
height:80px;
top:470px;
} 

#image_map a#link1{
left:235px;
}
#image_map a#link2{
left:65px;
}
#image_map a#link3{
left:400px;
}
#image_map a#link4{
left:15px;
}
#image_map a#link5{
left:415px;
}
#image_map a#link6{
left:45px;
}
#image_map a#link7{
left:380px;
}
#image_map a#link8{
left:200px;
}

Hit the save button on your post/page and custom.css file and test it to see if it works.

Tip: If you are creating an image map for posts/pages that don’t exist yet – create these pages and copy and paste the URLs from the address bar. I initially guessed what the URLs would be and ended up having to change them all again when I changed my mind about the page titles :-)

Step 4: If You Need More Information, Help, Examples & Resources…

I found the following sites great for:

• learning more about image maps
• discovering I could create an image map myself and use it in WordPress without having to worry about learning how to create a separate HTML webpage and link to it (and link back to my WordPress site again)
• viewing examples of image maps used on other blogs, including other Thesis sites, and
• detailed tutorials on how to create an image map.

If you are a little lost with my abbreviated explanation above, please check out some of the sites below:

CSSFlepStudio: a great tutorial – I used the code from this site and adapted it to my own purposes. I found this site after my 5th failed experiment. This is a must read tutorial.

Noobcube: a rather complicated tutorial but it has lots of illustrations and a great demo (click on the demo button just below the headline to see what you can achieve). I didn’t use the code from this tutorial because it didn’t serve my purpose; therefore I can’t comment on its effectiveness.

RedTuxedo: a Thesis site that uses an image map to link from a mind map to different parts of the page. Similar to using jump links on a page to link to different paragraphs on the same page e.g. contents.

MuKaoMedia: an interesting way of using an image map at the bottom of the post.

TheMarketingTechnologyBlog: a tutorial about using an image map for post footer image links like email, rss and subscribe. I didn’t have any success doctoring this code for my own purposes but that is not to say it won’t work for you.

JimThatcher: another good tutorial with an interesting use of the poly(gon) image map.

Elated: great explanation of coordinates of image maps with good illustrations and code examples. I found this after I found success.

The free Image Map Tool that does your HTML for you – if you decide to use a primarily HTML method.

A free online image map editor by Peter Schlömer to simply get map coordinates.