In this tutorial I will be teaching you how to create a XHTML compliant header for Wordpress that includes clickable areas, much like an image map but not. (Like in my russian dolls layout).

I designed my entire layout for Wordpress as an image first. Later, when when it came to coding it I realized that I couldn’t get an image map to work on my header. I had to think of a new way to “cheat” a menu into my header without using text or any coding that wasn’t XHTML compliant.

So after hours and days of searching for alternatives on google, I finally got some answers and I’ve come up with a tutorial to help others with the same problem.

For this tutorial you will need:

• Wordpress (installed)
• Adobe ImageReady

Firstly, we need a header image to work with. Let’s pretend your image looks like this: (You may save this image to practice with)

This is your final image, all layers are merged. We’ll say it’s a .gif file.

Open ImageReady. Go to View › Rulers and make sure it is checked.
Go to View › Snap and make sure it is checked.
Open your image. Let’s say it’s called sampleheader1.gif.
Click on the left ruler and drag to to the center of the image. Seperate it into the three parts you want to be links. Like this:

The blue lines are your rules. These will soon be sliced into three separate images.

Take the Slice Tool (K) and drag it to select the first box you’ve ruled. Then select the other two just as you did the first one. It should look like this:

Go to Part Two of this tutorial.