Step 1: You need to open up your banner.

Step 2: Go to view > toolbars > web.

A little tool should show up.

Step 3: Click on the button I have circled in red (and pointed to XD) below.

Step 4: Now you need to do the image mapping! Select the rectangle tool (circled in lilac) & draw around your first chosen link (it will appear as a green rectangle). Once this is done, you’ll see several options for this link. You need type in the URL you want this link to go to. For example, below I have selected ‘home’ so I have put ‘/’ in the URL box (highlighted in lilac) as this will direct to my home page on tumblr.

Step 5: now you need to select your next chosen link, using the rectangle tool again & fill in the URL for that link… and so on until all of the links are done. The links already created will have a RED rectangle around them. Once you have finished the image mapping, you then need to click ‘save as’ and save the file. For example, I saved mine as ‘linkmap’. Once you have saved the html file, an option to save your link image as a gif will appear… when this does, click save.

Step 6: Next, you need to upload your original banner/link image to an image hosting site, such as photobucket. You then need to open up your documents and find the image mapping file you saved earlier (the one I named ‘linkmap’). You’ll notice that it will have the icon of your dominant web browser on the file like below (mine is firefox). Open this file.

Step 7: Opening this file should open your web browser onto a page that has your banner/link image on it. Just underneath the image, right click & go to ‘view page source’.

Step 8: The html code should open up. You need to copy the bit of the code I have highlighted below (the image map code).

Step 9: Now you need to insert the banner & image map into you theme. Go to customize > theme > use custom html & scroll all the way down to the BOTTOM of your code. Now you need to copy & paste the code here: http://pastebay.com/131086 into the bottom of your theme code. You then need to paste the image map code you copied earlier underneath this code.

Step 10: Finally you need to adjust your banner. Replace the my image url (highlighted in blue) with your banner url. Notice that the parts i’ve highlighted in lilac are the same… You need to keep this two the same. The only difference is that you need a # infront of the first one. Last but not least, you need to position your banner by changing the numbers i’ve highlighted in green. Now save your theme & hey presto!

(Source: mynameisflicktutorials)