Freckles in April: DIY Blog Design Part 8: Graduate Level Navigation

Tuesday, June 26, 2012

DIY Blog Design Part 8: Graduate Level Navigation

I am so ridiculously proud of this particular kind of nav bar. I figured it out all my own with Googling and Frankensteining code and digging into some super nerdy forums.

This tutorial is going to help you create an image map with rollover effects. Basically, an image map is an image that has clickable areas. It's a pretty easy HTML deal. The fancy part here is the rollover effects, which is when something happens when you put your mouse over the image.

My code isn't perfect and I don't know enough about coding to fix it. The one really big limitation I've run into is that you can only have one of these on a page. If you try to add another then they interfere with each other for some reason. I lack the knowledge to figure out why, though believe me I have tried.

Figure out exactly what you want in your nav bar and then commit to it because this is a lot of work and making it all the way to the end only to decide you want to add or remove's painful. I actually tell clients I will charge them if they change their mind after I've already started the nav bar. I redid this one about 4 times and was feeling sort of violent by the end (it actually looks slightly different than what you'll see here).

To begin, you need to make an image of your navigation bar.

I started with my background image. I want Summer's nav bar to match up with the background I've got going on but you don't have to do it that way. Just make sure your nav bar will fit within your main blog area.

I recommend uploading your nav bar as an image into your design just to make sure you like the look/sizing/etc. of it. It may not align properly but you will at least be able to tell if it works with the look of your blog. I ended up making the font a little smaller, spacing out the sections a bit more and cropping the whole thing so it wasn't quite so tall.

Then, figure out what you want to happen when you roll your mouse over each navigation option. I made the text turn purple and put a shape behind. Then you need to make an image for each one (including your plain old regular nav bar).

(see what I mean about Blogger making images fuzzy when you shrink them?)

Now, you're going to need to figure out the coordinates of each clickable area. This is a pain. You can do it in Photoshop but I'm going to show you how to do it in MS Paint because most of you probably have it. There are actually free online programs that do this for you but they usually turn out a little funky for me (which I'm positive is a user error, not the program) so I just do it by hand. If you want to try out a program, try Googling "image map generator" or something like that.

Click to enlarge
Open one of your nav bar images. You want to get the coordinates of the upper left and lower right corners of the box. Anywhere within that space will be linked to a specific location. You can see my red dots showing you the upper left and lower right corners of the box that will be linked to Summer's home page.

When you hover your mouse over one of those points, look at the bottom left corner of the screen. It will show you the coordinates. The coordinate for the upper left corner is 52,0 and the coordinate for the lower right corner is 155,69. Stick them together to get the coordinates for Summer's 'home' button: 52,0,155,69.

My list of coordinates

There are ways to do circles and other shapes but this tutorial will be plenty long without me describing how to do that. Google it if you need to figure out how to do the map for a different shape (it's not hard..just slightly different).

Now go host your images in blogger (see this post). Be sure to make them "original size."

And now, the code. It's kind of a beast but I'll walk you through it-

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN"

<script language="JavaScript" type="text/javascript">

var ImgAry=['','','','','','','','','']

var MapAry=[];
 for (var zxc0=0;zxc0<ImgAry.length;zxc0++){
  MapAry[zxc0]=new Image();

function Swap(id,nu){

<img id="tst" src="" usemap="#SumoNavBar" border="0" />
<map name="SumoNavBar" >

<area shape="rect" coords="77,0,173,55" onmouseover="Swap('tst',1);"  onmouseout="Swap('tst',0);"  alt="home" href="" />

<area shape="rect" coords="174,0,283,55" onmouseover="Swap('tst',2);"  onmouseout="Swap('tst',0);"  alt="About" href="" />

<area shape="rect" coords="284,0,420,55" onmouseover="Swap('tst',3);"  onmouseout="Swap('tst',0);"  alt="Tutorials" href="" />

<area shape="rect" coords="421,0,563,55" onmouseover="Swap('tst',4);"  onmouseout="Swap('tst',0);"  alt="Featured" href="" />

<area shape="rect" coords="564,0,674,55" onmouseover="Swap('tst',5);"  onmouseout="Swap('tst',0);"  alt="Follow" href="" />

<area shape="rect" coords="675,0,766,55" onmouseover="Swap('tst',6);"  onmouseout="Swap('tst',0);"  alt="Links" href="" />

<area shape="rect" coords="767,0,900,55" onmouseover="Swap('tst',7);"  onmouseout="Swap('tst',0);"  alt="Sponsor" href="" />

<area shape="rect" coords="901,0,1031,55" onmouseover="Swap('tst',8);"  onmouseout="Swap('tst',0);"  alt="Contact" href="" />



Areas highlighted in blue are where you need to add image links. That big chunk at the beginning is where you post each image link. Enclose the links in ' marks and separate each link with a comma. Start with your regular nav bar then add each of the rollover effect images in order. If you look at the code above, I have NavBar, HomeOver, AboutOver, TutorialsOver, etc which is the order they are in within the nav bar. Below that chunk you'll see one more blue highlighted area. Add the regular nav bar image link there.

See the darker green? Name your image map. Make sure these two highlighted areas match.

Then, we have our image map. The yellow highlighted areas are the coordinates for each section. Plug in all those numbers you got earlier.

Note the numbers. This tells the code which image to pull from that big blue chunk above. It ignores that first image (your plain nav bar) and then it pulls the first image after that as 1, then 2, etc. Which is why you need to make sure those images are in the correct order! If you add more stuff to your navigation bar you'll need to make sure you put the proper numbers here.

Purple- put in your alt text.

Light green- plug in the appropriate link.

Alrighty, now put all of that in a W3 try it page and make sure it all works. Test your links.

Installation is the same as with the previous two nav bars and can be found near the end of this post. Also, you may need the CSS snippet at the end of this post if your nav bar doesn't align properly.

We're getting there! Next up I'll be talking about adding in some social media.


  1. Sooo impressed by this! I was proud of myself for figuring out the 200 level navigation a while ago, but this is inspiring me to try learning something a little more complicated... just need to store up some patience first, and then I'll give it a whirl :)

  2. I love all of this info! So so helpful for this aspiring blogger. Thanks so much for taking time to do all of these.

  3. Can I tell you how much I love you for this?! It makes me all sorts of giddy! I was looking up how to do this and it's all techie speak. You made it so easy to follow. Thank you!


Thanks for your comment!

Any trolls will be dragged into the trees and beaten soundly.

Related Posts Plugin for WordPress, Blogger...