How to Embed Links Into Your Header Image

When I was in school at the University of Utah, I learned in my HTML class that if you wanted to link different parts of an image to different pages, you had to splice them, load them individually and hope that you could get them all lined up exactly using a table in HTML.

If I lost you.. just know it was a LOT of work and headache to get everything to look just right.

But when blog hopping the other day, I saw someone's header and checked out their page source (the html behind the page) to see how they did it.. and I learned something new: Image Maps.

Holy Moses, I'm excited about this!

Basically, using HTML code, you give the computer a "hot spot" using coordinates, that if clicked, will direct to another page just like a text link.

So I redid my header using an image map. Isn't it great? :)

Here's how you can do one too:
1. Create your header image.

2. Upload your header image to your blog.

• Go to Design > Page Elements, and click on the Edit link in the Header Section. 
• Upload your image, and save.

3. Edit the HTML of your header image so it will recognize the Image Map (you will create this in a second.)

• Go to Design > Edit HTML, and click the "Download Full Template" link, just in case you need to revert back. It will save a backup on your computer.
• Above the template editor, click the Expand Widget Templates box.
• Find this line of code (Edit>Find, and you can type some of it in to search):

• Add in the bolded words.
• Click Preview to make sure the template still works, then Save.

4. Create the code for your Image Map.

• Go to Image-Maps.com, and upload your picture. The website says it cannot host your photo, but don't worry about it. Your photo is already hosted - you uploaded it into the header already, and we won't be using that part of the code anyway.
• Click "Start Mapping Your Image." (Click through again when the "successful" message comes up.)
• Create rectangle or circle shapes, move and resize them so they are over the spaces you want to link, and add in the information the website asks for. The "ALT id" is just the page name - like About Me.
• Scroll down and add in your "base url" (your main blog address), uncheck the box "Show Text Links", and then click Create Code.

5. Preview your Image Map code.

• Click the tab: HTML Output. What you see is what you get. Go back to change things you don't like. 
• Click the tab: HTML Code. Highlight and Copy everything from to
• Basically, don't highlight/copy the first three lines of code, and the last tag . You don't need them.

6. Add your Image Map code to your blog.

• Go to Blogger>Design>Page Elements.
• Add a gadget for HTML/JavaScript (It doesn't matter where; I put mine in the footer).
• Title your gadget: Image Map.
• Right click in the box, and choose Paste. You should see all the code you copied from the Image-Maps website.
• Now copy and paste this above the code you just entered:

• Click Save. And view blog.

Now you should have a header image with "hot spots" linking wherever you specified! Yay!

Questions? Comments? Pin It Now!