The White Ghost (nimoloth) wrote in s2expressive,
The White Ghost
nimoloth
s2expressive

  • Mood:

How To: Have An Image Map As Your Header

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].
Tags: !tutorial, $acct level:paid or perm, advanced, header:image, s2:theme layer
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

  • 19 comments