Friday, April 13, 2012

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.

27 comments:

  1. Thanks so much for posting this tutorial! I have one question. Do you need to use pixlr to make the header? I mean, could you use gimp, photoshop or another editor?

    ReplyDelete
    Replies
    1. Hello, Gloria!
      Yes, any other editor will work! I know some who have used photoshop and gimp.

      Delete
  2. Mary Ann-
    I never understood the x/y stuff. But when you compared it to a coordinate plane... I was like, duh. So I'm ready to tackle it soon. :)

    ReplyDelete
  3. hey! i want to put this on the sidebar... how are the instructions different, for that, than putting the links in the headers? thanks! :)

    ReplyDelete
  4. Hello!
    I <3 this! But, I do mine a different way. I use this site:
    http://www.image-maps.com/
    Tell me what you think. I find it much easier to use and navigate to beginners.

    ReplyDelete
    Replies
    1. Hey, Stephanie! That does sound like a nice and easy way to create image maps - thanks for letting us know about it! :)

      Delete
  5. Oh man...awesome! I just used dreamweaver to create the image map- but could never figure out the blog coding! THANKS!

    ReplyDelete
  6. Hi,

    This is really hrlpful but I was wondering if you could help me out with something else..I have made two images that I want to make into a header on my blog using a rollover code.
    I hhave a code for it all but when I put it into the ''add gadget'' above my blog post it won't show me anything and it just says that I may have moved or deleted the images from photobucket (i used photobucket to save my images.) what do I do?

    ReplyDelete
    Replies
    1. Hey, thanks for your comment! It sounds like there's a small problem with the way you copied your links or wrote your code. I can't be sure what the problem is, but if you could email me your code at shutterhappyphotography.blog @ gmail.com, I can look at it and I will probably be able to tell you what's going on! Thanks!

      Delete
  7. Hi, I just used this tutorial. I was so excited to find one for this. I just uploaded it all to my blog, and the links for my social media are not working. I'm wondering if you can give me any help or direction. Also, because I deleted my orignal header, now when my blog it open it doesn't say anything on the tab at the top. Any suggestions for fixing that?
    Thanks so much!
    Amy @ The Happy Scraps
    thehappyscraps.blogspot.com

    ReplyDelete
    Replies
    1. Amy C-
      Went to your blog and found all your links to work! Even the social media ones went straight through to where they were supposed to go! You did a great job- Loved your header- so cute!

      Delete
  8. Hey there! This is great! Thanks! {I already commented, but I just found it again...} If you download GIMP it is a whole lot easier, and SO much quicker. :) The tutorial can be found online, too. :)

    Love this blog, though.
    SO helpful. :D

    ReplyDelete
  9. How do you do the same for the sidebar? Thanks!

    ReplyDelete
    Replies
    1. The instructions would be the same, except that you open an HTML/JavaScript widget on your sidebar instead of in your header area. Make sure you resize your image so that it's the same width as your sidebar (usually around 250px). Also, you can skip the last step about editing the HTML code for Header1. Let me know if that doesn't work for you. Thanks so much for reading! :)

      Delete
  10. Amazing! Thanks for all your help!

    ReplyDelete
  11. I use blogger, and I am having trouble with my map showing up off-center. It won't line up on the left with my navigation bar (you can see it on my site, www.itfoodie.com). I fudged it all because my header doesn't have borders and I just made the background white to match the image. But, I'd like to fix it so that it lines up on the left. Any thoughts? Thanks!

    ReplyDelete
  12. Whoa! I have always wanted to know how to do this and tried one way that was totally clumsy (uploading multiple images, each with their own link). This way sounds like it'll take a bit of setting up but should function a LOT better! I'm definitely going to try this!! :)

    ReplyDelete
  13. Thanks for sharing how to do this! I'm do ready to amp up my blog! One question, how do you get rid of the blue border around it? You can go to my sample site to see what I am talking about here http://shutterbellephotography.blogspot.com/

    Any help would be great! Thanks~!

    ReplyDelete
  14. Hello! I just sent you an email...I'm having some of the issues that others mentioned in the comments..I hope that you can help!

    Thank you!

    ReplyDelete
  15. I have been surfing on-line more than three hours as of late,but I never discovered any interesting article like yours.It is beautiful worth sufficient for me.
    website design

    ReplyDelete
  16. Ive just tried this and the links ive put for other pages on my blog work however when I have tried to link my social media links it takes me to my blog url/social media url. for example

    www.lbbsteph.com/www.instagram.com/lbbsteph

    how do I fix this?

    ReplyDelete
  17. Im having trouble with making mine into a map... like there are 2 titles. washed-water.blogspot.com and http://itsybitsy-things.blogspot.com

    Racic

    ReplyDelete
  18. Thanks for taking this opportunity to discuss this, I feel fervently about this and I like learning about this subject. I am using a mobile app to my business. And I think that this is a useful website t share with you: Simicart - Best Magento Mobile Shopping apps

    ReplyDelete
  19. Hi I did this and it looks good but none of the links work. Help?

    ReplyDelete
  20. SimiCart helps storeowners create Mobile shopping apps, which will automatically build a native Magento app for your online business within the information you provide. Within 3 mins, not 30 days or 3 months as normal, you can have powerful mobile shopping apps with optimized mobile UI.

    ReplyDelete
  21. Have FREE Magento mobile shopping apps and useful advices on mobile marketing tips at mobile shopping apps tutorials and tips.

    ReplyDelete