make a header using image mapping

We've gotten a couple of requests for making images that link to different blog pages - thanks, GC readers! The best way to do this is with image mapping: it uses one image but links each part of the image to a different page. Using a single image instead of a whole sidebar full of them saves space on your computer and cuts down on page loading time. In this tutorial, we're going to make a header with a menu of links to different pages, but you can use it for other parts of your blog design as well.

Warning: this tutorial is pretty tricky. I'll try to walk you through it the best way I can, but if you're confused, feel free to leave questions in comments or by email. If I still can't explain if in a way that makes sense to you, try another tutorial like Emily Grace's - that's the one that taught me how to do this in the first place.

[click on the screenshots to view larger]

First, you need to make the image that you want to use for linking. I opened up our header in Pixlr to add text, but you can certainly use Photoshop if you own it (you lucky duck!) or some other editing program; I'm just not sure if the instructions would be exactly the same.

[click on the screenshots to view larger]

Next, I'm going to add the words that will turn into links. You can add text in Pixlr by clicking the A button on the sidebar, then customize it to whatever font, color, and size you want. I know my text looks super tacky, but it's just an example! :)

Once you've done this, it's a good idea to flatten the image by going to Layer > Flatten image. 

[click on the screenshots to view larger]

Move your mouse around on the image. Look at the Navigator menu on the top right. Do you see those numbers changing? That's important. 

this is kinda geeky stuff that you can probably skip if it gets too confusing:

One of those numbers is the x-coordinate for the point where your mouse is hovering. It's a way to represent the distance from the left side of the image. The other number is the y-coordinate for the point where your mouse is. That tells us how far down your mouse is from the top of the image. Every single pixel on the image has its own set of x and y values to represent its position. If you're a math whiz, you'll notice that it's kind of like an x-y coordinate plane, or graph. If not, forget that last statement :)

What you're going to do with an image map is create rectangular sections of the image that are linked to certain pages. You specify the size and location of the rectangles by using the xy-coordinates.

[click on the screenshots to view larger]

no longer geeky:

Save the image to your computer (change the format to PNG to avoid fuzzy text) - BUT DON'T CLOSE PIXLR! Open a new tab or window and upload it on a website like Imgur or Photobucket.

Now you're ready to create the code for your header. Go to your blog design tab and open up a new HTML/JavaScript widget. Paste in this code:

<map name="headerlinks">
<area coords="x1,y1,x2,y2," href="LINK TO BLOG PAGE HERE" shape="rect"></area>
</map>
<img src="DIRECT IMAGE LINK HERE" usemap="#headerlinks" />

The parts in red are the parts you're going to change.
First, copy and paste the direct link to your image from Imgur or Photobucket (Ashlyn taught us how here) to replace the words DIRECT IMAGE LINK HERE.

Next, copy and paste the second line over and over again to make as many links as you need in your header. I have six pages, so I need six of those lines. Here's what my code looks like now:

<map name="headerlinks">
<area coords="x1,y1,x2,y2," href="LINK TO BLOG PAGE 1" shape="rect"></area>
<area coords="x1,y1,x2,y2," href="LINK TO BLOG PAGE 2" shape="rect"></area>
<area coords="x1,y1,x2,y2," href="LINK TO BLOG PAGE 3" shape="rect"></area>
<area coords="x1,y1,x2,y2," href="LINK TO BLOG PAGE 4" shape="rect"></area>
<area coords="x1,y1,x2,y2," href="LINK TO BLOG PAGE 5" shape="rect"></area>
<area coords="x1,y1,x2,y2," href="LINK TO BLOG PAGE 6" shape="rect"></area>
</map>
<img src="http://i.imgur.com/4Owtz.png" usemap="#headerlinks" />

This is where it can get really confusing, so we'll take it slow. We'll use the first area line for our first link: the home page.

[click on the screenshots to view larger]

Go back to Pixlr and use the selection tool (first column, second row on the toolbar) to draw a rectangle around your first link. Hover your mouse over the top left corner of that rectangle, and look at the xy coordinates in the Navigator menu. These are x1 and y1 in the image map code. Replace the letters with the numbers:

<map name="headerlinks">
<area coords="5, 310, x2,y2," href="LINK TO BLOG PAGE 1" shape="rect"></area>
<area coords="x1,y1,x2,y2," href="LINK TO BLOG PAGE 2" shape="rect"></area>
<area coords="x1,y1,x2,y2," href="LINK TO BLOG PAGE 3" shape="rect"></area>
<area coords="x1,y1,x2,y2," href="LINK TO BLOG PAGE 4" shape="rect"></area>
<area coords="x1,y1,x2,y2," href="LINK TO BLOG PAGE 5" shape="rect"></area>
<area coords="x1,y1,x2,y2," href="LINK TO BLOG PAGE 6" shape="rect"></area>
</map>
<img src="http://i.imgur.com/4Owtz.png" usemap="#headerlinks" />

Now hover your mouse over the bottom right corner of the selected rectangle, and copy and paste the numbers to replace x2 and y2.

[click on the screenshots to view larger]

<map name="headerlinks">
<area coords="5, 310, 107, 382," href="http://tips4thetrendyblogger.blogspot.com" shape="rect"></area>
<area coords="x1,y1,x2,y2," href="LINK TO BLOG PAGE 2" shape="rect"></area>
<area coords="x1,y1,x2,y2," href="LINK TO BLOG PAGE 3" shape="rect"></area>
<area coords="x1,y1,x2,y2," href="LINK TO BLOG PAGE 4" shape="rect"></area>
<area coords="x1,y1,x2,y2," href="LINK TO BLOG PAGE 5" shape="rect"></area>
<area coords="x1,y1,x2,y2," href="LINK TO BLOG PAGE 6" shape="rect"></area>
</map>
<img src="http://i.imgur.com/4Owtz.png" usemap="#headerlinks" />

We're almost done with the first line! All you have to do now is find the link to your blog page - in our case, it's just the main home page - and paste it in to replace the words LINK TO BLOG PAGE 1. Make sure your link starts with http:// , otherwise it won't work. If you copy and paste it directly from your browser window, it will usually include this part.

[click on the screenshots to view larger]

Now all you have to do is repeat the same steps for each link that you're using. Draw a rectangle around the next word/link, hover over the corners, paste in the x and y values, and then paste in your blog page link. Here's what ours looks like all finished:

<map name="headerlinks">
<area coords="5, 310, 107, 382," href="http://tips4thetrendyblogger.blogspot.com" shape="rect"></area>
<area coords="154, 316, 272, 373," href="http://tips4thetrendyblogger.blogspot.com/p/about.html" shape="rect"></area>
<area coords="331,319,471,380," href="http://tips4thetrendyblogger.blogspot.com/p/contact.html" shape="rect"></area>
<area coords="544, 321,624,377," href="http://tips4thetrendyblogger.blogspot.com/p/why.html" shape="rect"></area>
<area coords="687, 321,841, 369," href="http://tips4thetrendyblogger.blogspot.com/p/tutorials.html" shape="rect"></area>
<area coords="885, 327,1075, 378," href="http://tips4thetrendyblogger.blogspot.com/p/get-started.html" shape="rect"></area>
</map>
<img src="http://i.imgur.com/4Owtz.png" usemap="#headerlinks" />

Once you've finished all this, save your HTML/JavaScript widget, and move it up to the header section of your blog. If it lets you do that, you're just about done! If not, we can fix it with this next step. Just be sure to save the widget first!

Go to your Edit HTML page and search (CTRL+F) for the word Header1. You should find a section of code that looks something like this:

<div id="header-wrapper">

<b:section class="header" id="header" maxwidgets="1" showaddelement="no">

<b:widget id="Header1" locked="true" title="Geek Chic- Tips for the Trendy Bloggers (Header)" type="Header">

</b:widget></b:section></div>

Change the red number 1 to 2 to allow more widgets in the header section of your blog - now you can drag up the widget to the top of your blog. Change the word "true" to the word "false" so that you can delete your old header (there will be a nice big Remove button at the bottom of the window when you edit the widget).

Once you've got all that sorted out, you should have a beautiful new image map / header at the top of your blog! Click on the links to make sure they work, and if they don't, pleasepleaseplease leave a comment or email us because I'd love to help you out!

Want to see how ours turned out? Click here to see the new header on our sample blog.