Some people have been asking how to remove the text links from the header image (e.g. journal title, subtitle, and navigation links) and use an image map instead. This is actually pretty complicated - you'll need to be comfortable with advanced CSS, and be able to use custom themes or layers (therefore requires paid or permanent account). Alternatively, you need to be good at following instructions, because I'm going to go into this in full detail!

1. What Is An Image Map?

Lets start with the basics. An image map is an image which, when you click on different parts of it, takes you to different places - the links are effectively embedded within the image. This makes for much prettier sites and navigation rather than the usual method of placing HTML text on top of a background image. It allows you, for example, to create lots of pretty text effects with Photoshop for your header image and use that text in the image as your navigation links.

2. Creating Your Image To Use As A Map

Firstly, here is the one I created for my journal:

You can see the text on the trees that I'm going to use as links, as well as the main journal name (which will also be a link). You need to create something like this, sized about 1090px by 200px for Expressive.

You will need to know the top left coordinates in pixels of an imaginary box around each of the bits of text to be used as a link, and the width and height of this box, as illustrated below:

(Photoshop has a useful little Info dialogue which tells you the x,y coordinates of your cursor on the image in various dimensions.) So note down the top left corner coordinates and the width and height of these boxes in pixels for each bit of text to be used as a link (remember to note which is for which!).

3. The CSS

In Livejournal, go to Journal - Edit Journal Style - Custom Options - Custom CSS. This is where we'll be inserting all the following bits of CSS.

Firstly, upload your newly created image to wherever you keep your images, and set it as the header background image like so:

[You may need to play about with sizes here to get your image fit the header area properly, but hopefully it'll be fine without. If you do need to, add position: relative ; height: 201px; or similar to the above css id tag, with the required height of your image there.]

Secondly, we need to get rid of the existing header links and text. To do this, add:

/* style the span text so that it is not displayed */#imap a span, #imap a:visited span { display:none; }

Here, you can see in blue the things I have links to. You could add others and take some of these away if you like - as long as you match your id's here (in blue) with those in the HTML code I'll show you later. I am creating links here to my journal root page through the name of my journal, recent entries, userinfo, memories, post entry and upload picture to scrapbook.

In red are things you need to change. First, the url of your header image again (sorry, it's turned out blue because it's a link!), as the background of the dd structure (it's a defined list, but you don't really need to know about that here). Secondly, you need to put the top left positions of all those little boxes you took note of when you created your image into the #imap#pic {} tags. Make sure you put the right values for the right links.

Then you need to put the width and height of all those little boxes into the second #imap#a {} tags. Again, make sure you put the right values for the right links.

That final bit of CSS down the bottom stops link text being printed on top of your carefully prepared beautiful image!

4. The S2 HTML Bit

Now for the final part - we need to alter a custom theme or layer. If you haven't already created one, here's how to create a custom theme.

Go to Edit Journal Styles - Advanced - Your Layers then go down to Create Layout Specific Layer. Choose Theme from the dropdown menu and choose Expressive from the layout menu, and press Create. Now you have a custom theme. It should appear in the list above as a child of Expressive. It will be unnamed so far. Click on Edit next to it and we're ready to go.

Now we have arrived at a three pane window. We are interested in the biggest one - this is where we're going to put code. First off, you can put a name in the space for a name at the top there - it will make it easier to find and use.

Secondly, you'll probably need to specify whatever colour theme you're are using as your base theme so the style sheets work properly as you already have them. You put this in below the existing stuff in the big panel (i.e. the name and type). It will depend what theme you've been using as your base theme, but if it was Urban Green for example, you'd put:

set base_theme = "urban-green";

Now you have a custom theme to add S2 code to. The function we are going to alter is this one:

This may look complicated, but don't worry - you just need to cut and paste this. But wait, not yet! You first need to change some of the blue text there to match the id names you have in the CSS section above, remembering to replace all occurences of username with your username. [Incidentally, that section within the """ """ ; where the blue text is located, is the actual addition to the function that creates the image map. It is simply HTML that needs to be output.]

Simply cut and paste this code into your custom theme, below where you set your default colour theme, and make these alterations. Then, press the Save & Compile button to the top let of the main code window. Hopefully it should compile without errors (the box at the bottom tells you if there are errors).

Now, go back to the main customisation area, Edit Journal Styles - Look & Feel and in the drop down box under Themes choose your newly created theme. Save that, and voila! You should now hopefully have a working image map as your header!

Ah, sorry! I see what's up. I've missed out some of the < and > tags when formatting it for the post - as a result there was a chunk of code missing at the bottom. That should solve the problem. Note I've also removed:if ($text != "the past" and $text != "the befriended") {print """

Ah, sorry! I see what's up. I've missed out some of the < and > tags when formatting it for the post - as a result there was a chunk of code missing at the bottom. That should solve the problem. Note I've also removed:<font face="courier">if ($text != "the past" and $text != "the befriended") {print """<li$class><a href="$url">$text</a></li>""";}</font>

That's something I'd added that you don't want, and I'd forgotten to remove it earlier.

So now it should work if you cut and paste it - I've edited the entry to fix it. Let me know if there are still problems. Thanks for letting me know of this one so I could fix it!

[It's a right nusiance having to change all the < > to &lt; &gt; to put code into Livejournal entries! I'm sure I saw a thing somewhere once that did it for you, but I don't know where.]

Aw, I did it again! Darn < and >. Anyway, what I was saying was, I've removed some code that shouldn't have been in there and edited the entry to fix the S2 code (there was a bit missing). This new version should work now if you cut ad paste it (making the same changes as noted before to the blue text).

it works! my first image map. thank you. although i didn't read this part:

"[You may need to play about with sizes here to get your image fit the header area properly, but hopefully it'll be fine without. If you do need to, add position: relative ; height: 201px; or similar to the above css id tag, with the required height of your image there.]"

and i was not fine without it. it was cutting off the bottom third or so of the header image, making it closer to 130px tall instead of 200ish. which of course i did not realize until after i'd suffered a bit of frustration trying to figure out why it wasn't working. :P

The code works great, but I'm having some real trouble locating the area to move my image map. Do I locate the X and Y co-ordinates in JUST the header in Photoshop? If so, shouldn't does LEFT represent x and top represent TOP. It's a bloody stupid question, I know, but this is beginning to get to me.

I'm not sure what you're asking here - do you want to move the whole header image?

The x and y coordinates of the little boxes that make the links are defined as in Photoshop, i.e. relative to the top left of the header image. Top and left represent the distance in pixels of the little link box from the top and left of the image respectively.

I had a look at your page, but the image is not there. There may be some confusion if your header image is not located exactly in the header box for some reason. In mine, I had to tweak the left and right values a bit to get them to match in LJ - there does seem to be a slight discrepancy bewteen the positions measured in Photoshop and the actual positions in Livejournal.

Yes, I think so. It sounds like your image has been resized slightly when it's gone into the header, smaller than it's true size. That can sometimes happen. Make sure you're header div is exactly the same size as your image - you can size it manually (although it might do funny things to your layout).

/* style the span text so that it is not displayed */#imap a span, #imap a:visited span {display:none;}

I remembered to change what kind of layout I'm using in my code (I'm now using the Books layout), but it's still being fussy and not wanting to even display any links inside the image. Any help would be greatly appreciated :)