?

Log in

No account? Create an account

Previous Entry | Next Entry

How To: Have An Image Map As Your Header

  • Sep. 11th, 2006 at 12:18 AM
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:

#header-inner {
background-image: url("http://www.sampleurl.com/headerimagemap.jpg");
}


[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:

#header-name { display:none; }
#header-description { display: none; }
.nav { display: none; }


Now for the actual image map CSS - here's what you need to add:

/* Set the size of the definition list dl and add the background image. */
#imap {
display:block;
background:url("http://www.sampleurl.com/headerimagemap.jpg") no-repeat;
position:relative;
}

/* Place the dd's in the correct absolute position. */
#imap dd {
position:absolute;
padding:0;
margin:0;
}
#imap #picusername {
left:-5px;
top:134px;
z-index:20;
}
#imap #picrecent {
left:69px;
top:6px;
z-index:20;
}
#imap #picuserinfo {
left:413px;
top:4px;
z-index:20;
}
#imap #picmemories {
left:611px;
top:1px;
z-index:20;
}
#imap #picpost {
left:593px;
top:137px;
z-index:20;
}
#imap #picupload {
left:831px;
top:98px;
z-index:20;
}

/* Style the dd and a links physical size and the background for the hover. */
#imap a#username {
display:block;
width:313px;
height:65px;
background:transparent -100px -100px no-repeat;
text-decoration:none;
z-index:20;
}
#imap a#recententries {
display:block;
width:45px;
height:126px;
background:transparent -100px -100px no-repeat;
text-decoration:none;
z-index:20;
}
#imap a#userinfo {
display:block;
width:60px;
height:168px;
background:transparent -100px -100px no-repeat;
text-decoration:none;
z-index:20;
}
#imap a#memories {
display:block;
width:44px;
height:96px;
background:transparent url -100px -100px no-repeat;
text-decoration:none;
z-index:20;
}
#imap a#post {
display:block;
width:45px;
height:66px;
background:transparent -100px -100px no-repeat;
text-decoration:none;
z-index:20;
}
#imap a#upload {
display:block;
width:58px;
height:58px;
background:transparent -100px -100px no-repeat;
text-decoration:none;
z-index:20;
}

/* 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:

function Page::lay_print_header_links() {
# Menu start
"""<div id="message-window" class="hidden"></div>\n""";
container_open("header");
container_open("header-content");

"""
<dl id="imap">
<dd id="picusername">
<a id="username" title="Username" href="http://username.livejournal.com"><span>Username</span></a>
</dd>
<dd id="picrecent">
<a id="recententries" title="Recent Entries" href="http://username.livejournal.com/"><span>Recent Entries</span></a>
</dd>
<dd id="picuserinfo">
<a id="userinfo" title="Userinfo" href="http://username.livejournal.com/profile"><span>Userinfo</span></a>
</dd>
<dd id="picmemories">
<a id="memories" title="Memories" href="http://www.livejournal.com/tools/memories.bml?user=username"><span>Memories</span></a>
</dd>
<dd id="picpost">
<a id="post" title="Post Entry" href="http://www.livejournal.com/update.bml"><span>Post Entry</span></a>
</dd>
<dd id="picupload">
<a id="upload" title="Upload Image" href="http://pics.livejournal.com/manage/upload"><span>Upload Image</span></a>
</dd>
</dl>
""" ;

"""<div id="header-photo">\n<div id="header-photo-inner"></div>\n</div>\n""";
"""<div id="header-text"><ul class="nav">\n""" ;

# Standard Journal Pages (Recent, Archive, Friends, Userinfo)
foreach var string v ($.views_order) {
var string url = $.view_url{$v};
var string text = lang_viewname($v);
var string class = "item";
if($v == $.view) {
$class = $class + " current";
}
if($v == $.views_order[0]) {
$class = $class + " first";
}

$class = " class=\"$class\"";

}

var Link memories_url = $.journal->get_link("memories");

# Memories
if($memories_url.url != "") {
println """<li class="item"><a href="$memories_url.url" title="$*text_view_memories">$*text_view_memories</a></li>""";
}

# Menu end
"""
</ul>
<div id="header-name">""";
var string base_url = $.journal->base_url();
var string friends_url = $.view_url{"friends"};
if ($this isa FriendsPage) {
"""<a href="$friends_url"><span class="title">""" + $this->view_title() + """</span></a>""";
} else {
"""<a href="$base_url"><span class="title">$.global_title</span></a>""";
}
"""
</div>""";

if(not $this isa FriendsPage) {
"""
<div id="header-description"><span class="subtitle">$.global_subtitle</span></div>""";
}

"""
</div>
</div><span id="header-content-decor" class="decor"><b></b><u></u><s></s><i></i></span></div><!-- End Header Content -->
</div><span id="header-decor" class="decor"><b></b><u></u><s></s><i></i></span></div><!-- End Header -->""";
}


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!


References:

The required CSS and HTML as used above.
How To Create a CSS Image Map from www.webreference.com [rather more complicated than is necessary here - what I've described here is a much simplified version for our purposes].

Comments

( 19 comments — Leave a comment )
marecagee
Sep. 11th, 2006 02:39 pm (UTC)
Hopefully it should compile without errors

Sorry to be the bearer of bad news, but it says:

"Unexpected end of file. Unclosed string literal?" and then a bunch of lines like "S2::Compiler, S2/Compiler.pm, 27" and the like.

I thought maybe I'd deleted some stuff while changing the urls, so I tried again with your own code, and it still gave me the same thing.
nimoloth
Sep. 11th, 2006 08:36 pm (UTC)
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 """
[Error: Irreparable invalid markup ('<li$class>') in entry. Owner must fix manually. Raw contents below.]

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.]
nimoloth
Sep. 11th, 2006 08:38 pm (UTC)
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).
marecagee
Sep. 11th, 2006 08:53 pm (UTC)
Whee! *smooches* You rock!

(And eek! I hadn't even realized you needed to do that. You should have uploaded the file somewhere or something instead of bothering with all of this.)
nimoloth
Sep. 11th, 2006 08:57 pm (UTC)
I did! It's the first link at the bottom there (but I haven't removed that little bit of my code from that version yet).

It's not so bad - I used search and replace in a text editor, it just missed the end ones somehow.
nimoloth
Sep. 11th, 2006 09:01 pm (UTC)
Actually, I stand corrected - I uploaded some of the required HTML!
kharma_killer
Sep. 12th, 2006 06:28 am (UTC)
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
nimoloth
Sep. 12th, 2006 06:42 am (UTC)
I'm glad it mostly worked! Hope you get the sizing sorted.
nimoloth
Sep. 12th, 2006 06:43 am (UTC)
Nice header image!
bleakharvest
Sep. 22nd, 2006 12:54 am (UTC)
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.
nimoloth
Sep. 22nd, 2006 01:02 am (UTC)
I'm having some real trouble locating the area to move my image map

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.
bleakharvest
Sep. 22nd, 2006 01:08 am (UTC)
The header is in the right position, I think.

Photoshop is telling me the position is X: 850px, for example but LJ is saying left: 750px. Are you saying I just need to keep at it until I reach my desired location?
nimoloth
Sep. 22nd, 2006 01:13 am (UTC)
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).
clandescent
Dec. 15th, 2006 11:07 pm (UTC)
I am way too excited over this!
Oh wow! Thank you for this tutorial. I often wondered how people got their links in strange places. Now I know and I have my very own image map!

I also had a problem with the x and y coordinates not matching the ones in Photoshop. I managed to sort it out with a bit of trial and error though, lol.
srahman24
Jan. 6th, 2007 02:10 pm (UTC)
This was an amazing tutorial! Thanks so much for going through the trouble of putting it together :D
hearmemeep
Apr. 5th, 2007 03:25 pm (UTC)
I'm having issues with this working for some reason. I got it to work previously with a different background image, but now it's not wanting to cooperate with a new image I've put up :/

Here's my code:



/* Set the size of the definition list dl and add the background image. */
#imap {
display:block;
background:url("http://pics.livejournal.com/hearmemeep/pic/000warg9") no-repeat;
position:relative;
}

/* Place the dd's in the correct absolute position. */
#imap dd {
position:absolute;
padding:0;
margin:0;
}
#imap #recententries {
left:40px;
top:231px;
z-index:20;
}
#imap #piccalendar {
left:95px;
top:132px;
z-index:20;
}
#imap #picfriends {
left:387px;
top:174px;
z-index:20;
}
#imap #picuserinfo {
left:698px;
top:135px;
z-index:20;
}
#imap #picmemories {
left:759px;
top:237px;
z-index:20;
}


/* Style the dd and a links physical size and the background for the hover. */
#imap a#recententries {
display:block;
width:153px;
height:63px;
background:transparent -153px -100px no-repeat;
text-decoration:none;
z-index:20;
}
#imap a#calendar {
display:block;
width:153px;
height:63px;
text-decoration:none;
z-index:20;
}
#imap a#friends {
display:block;
width:153px;
height:63px;
background:transparent -100px -100px no-repeat;
text-decoration:none;
z-index:20;
}
#imap a#userinfo {
display:block;
width:153px;
height:63px;
background:transparent -100px -100px no-repeat;
text-decoration:none;
z-index:20;
}
#imap a#memories {
display:block;
width:153px;
height:63px;
background:transparent url -100px -100px no-repeat;
text-decoration:none;
z-index:20;
}

/* 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 :)
inaudiblechaos
Jul. 8th, 2007 01:42 am (UTC)
Is it possible to change the nav links to just images not an image map with a plus account?
themightybee
Sep. 2nd, 2007 11:57 pm (UTC)
I've followed this tutorial step by step, but I can't seem to get the image map to work. I've got everything in its proper place, so I'm not sure what I'm doing wrong.

Here's my theme layer, if it'll help.
themightybee
Sep. 3rd, 2007 12:26 am (UTC)
Nevermind! I just needed to flip the x,y coordinates.
( 19 comments — Leave a comment )

Latest Month

March 2016
S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  

S2 Help Communities

Tags

Powered by LiveJournal.com
Designed by chasethestars