Clickable Links in Your Header: Image Mapping

By: Unknown on 11:43 PM

Share it Please

Tweet

What's the first thing you look at when you click on a blog? The header, right? If you like that blog, what is the next thing you look for? The follow {or subscribe} button! Wouldn't it be nice to have it all in one place? I was recently asked how I did the clickable buttons in my header, so today I thought I would show how you can do this! I have to admit, that my previous header was the first time that I played with image mapping. I found a great tutorial here when I was in search of how to do it. And although I was thrilled that I managed to make it work, I wasn't happy with how the banner turned out. So I decided to make a new header first (if you've followed me for any time at all, you know I like to change the header quite a bit!) Here is what my banner looked like before...

The colors made it hard to see what each link was, and I also couldn't figure out how to make the buttons not look transparent. Even though they were white, on a white background. So I started over, and I am much more happy this time! I'm going to try to explain what I did without confusing you too much, but feel free to email me with any questions. Here goes....

CREATE BUTTONS (OR HAVE YOUR BUTTONS)

The first thing I did was look for a color combination that I liked for the design. Pinterest is a great place for that! I used the Chrome extension Color Picker to find out what the hex #'s of each color were. It's really an awesome thing! Your able to place your arrow anywhere on the screen and by clicking on the color, it gives you the hex# (the html color code). You can find that extension at the the Chrome Store (it's free). Then I designed my buttons. There are tons of places to find great icons, so don't feel like you have to make your own. For all of my header including the buttons, I used Inkscape. Another free image creator/editor. I used Gimp for the last header, but I really loved using Inkscape! Here are my buttons......

Each button is 64x64

One thing you have to remember when using Inkscape....make sure that when you save your image, save it as a .png file. Inkscape will automatically save it as a .svg file if you don't change it.

CREATE YOU HEADER

Then I made my header. Here is my header without the buttons....

I left the space on the right blank for my buttons. I also left space at the bottom, so that I can add pages there another day (update: I've added pages!). I saved it as a png file, then uploaded it again (so that all of the layers are now one image).  On Inkscape you have to import the buttons (on gimp you add the buttons by adding layers). Once I had my buttons where I wanted them, I saved it again.

MAPPING YOUR IMAGE

 Now being new to Inkscape, I'm not sure how to map the buttons, so I went back to gimp for this part. 

This can seem a bit tricky, but you can do it! 

 Upload your image, click on filters, web, then Image map

Here is what your screen should look like....

Next, click on Mapping, and choose the Rectangle (or circle if your buttons are circle. Click on the corner of the button (one at a time), that will create a square around the icon like in the picture below. A window will pop up and you will add the URL of the link of the icon. Do that for each button (it doesn't have to be exact). 

By clicking on the area #, you will be able to open the box for that image. As you add the URL's, you will see them appear to the right. I have 9 for mine (areas #1 through #9). 

With the same box open that you put your URL's in, click on the the Rectangle. If you don't have the box open anymore, just double click on the url in the box to the right. You will need to adjust your pixel size for each of the images. Mine is easy since it is square and I know that each button is 64x64, so I was able just to type that in the width and height.  

Now your finished mapping your image!! Not that bad, right?? Your not quite finished though. You will have to turn the image map coordinates into an html code. You can do it! Save you image (it will be .map)

CONVERT INTO HTML

You'll need to use a text editor. I used Komoto Edit (free also!). Once you have installed Komoto, Open your .map. Copy all of the text starting with < map

The next step is to .....

ADD IT TO YOUR BLOG

Go to Design, Layout, add a gadget, HTML/Java Script

Paste your code

SAVE.

ADD IMAGE TO LAYOUT

Go to Design, Template, Customize, edit header, upload new image, and apply to blog

the final step....

EDIT HTML

I know we all get a little scared when it comes to making any changes to our html. Just make sure you back it up. Go to Template, Edit HTML

Expand Widget Template and scroll down until you see the text < div id='header-inner' > 

delete the line below that and the line above < !--Show the Description'>

*note* mine was already deleted when I did this, so you don't see it in the picture below.

Then after you see block' add this text:

usemap='#map'

make sure you keep   />  after '#map'

You now have clickable buttons in your header!! 

You'll notice that your header isn't clickable anymore. When I first did my previous header, someone told me that it would be better if my header would still take you to my home page. I totally agreed, but forgot to change it. So I did on this one. To make it clickable to take you to the home page (if you don't do it at the same time as your buttons), upload your image to gimp, use the rectangle to outline the coordinates (minus the area your buttons are in) with the url of your blog, upload the .map file to Komoto and highlight only the portion beginning with

and ending in /> copy and paste that into the same html widget that you used before before and your header will be be clickable to your homepage!

You don't have to redo the entire process every time you change your header. As long as your buttons stay the same size and in the same order, just make a new image and upload the image into your blog. The rest stays the same!!