Thursday, February 3, 2011

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?

15 comments:

  1. Thanks so much for this tutorial! I'm a design dummy, and I'm trying to make my blog look less amateurish. Your blog looks fantastic! Great inspiration!

    ReplyDelete
  2. I have been looking for something like this. Thanks, I'll have to try it out.

    ReplyDelete
  3. I am loving this tutorial... However when I use image map, the image I created (which is 1180x471, is shrinking down to 1022 x whatever... so it is throwing the whole look of my blog off... do you have any ideas? I also like how your blog is opaque on the sidebar and header, is that just the template you are using?

    Thanks,
    Carlee
    www.ladybirdln.com

    ReplyDelete
    Replies
    1. Carlee,

      Hey Carlee,

      Where is it resizing? When you upload it to your blog? Did it do the same thing before you used the image map? They are two separate items on my blog (header and html/javascript), so one shouldn't affect the other. Or is the image map website resizing it?

      And thanks! I use the "Picture Window" Template in blogger, and customize the background/fonts/colors/etc. :)

      Delete
  4. Drats! I can't find the code. I'm in the html and did the expand of widget templates but the code up above isn't showing up. Any tips? cafescrapper@gmail.com susie

    ReplyDelete
  5. I cannot for the life of me get this to work LOL I got it to work in an html but cant get the html centered at the top of my blog . sparklemepink88.blogspot.com

    ReplyDelete
  6. Now that the template has changed, even though that bit still looks similar, I've added it and doesnt work.

    Any suggestions?

    Thanks so much,

    ReplyDelete
    Replies
    1. It didn't work for me as it's written here. But it does work by putting the code from Step 6 (the map info) directly into the blogger html and NOT into a gadget. :)

      Delete
    2. It should work. My blog header links are all working, and if the code needs have changed, my links would be broken.

      I found the spot by clicking on "Jump to Widget" > Header1

      Make sure you click the little black arrow on the left side (the first one, it has "main" in the text). This is what "expands" the widget for you to see.

      Then I clicked inside the editor and hit Ctrl+F continued following my tutorial.

      Hope that helps.

      Delete
  7. Thanks so much for this tutorial. I have searched for ages to find out how to do this simply. Easy to follow too :)
    New follower

    practicaleverafter.blogspot.co.uk

    ReplyDelete
  8. Can anybody help me? The code is weirdly aligned, when I hover over the instagram link, it's showing me the twitter link... and so on. Any advice?

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. How do I find how to download my template? I don't even know where page elements is! would be great if you could email me some help! Complete newbie.... littlerose-rozzi@hotmail.com
    Thanks! X

    ReplyDelete
  11. Thanks for the useful tutorial! Check out my use of it:
    www.the-waste-paper.blogspot.com

    ReplyDelete
  12. It works perfectly! Thank you so much for sharing :)

    ReplyDelete

I've been getting so many spam comments lately, I've decided to disable "anonymous commenting" for a while. Sorry for any difficulty!

LinkWithin

Related Posts with Thumbnails