Changing header image to image map Options

[artoo_ai]

Hi everybody, long-time lurker, first-time poster. :)

I've got a question about my lj layout. Right now, I'm close to getting my lj looking exactly how I want it, but everything I've tried seems to screw things up.

My lj: [click here]

The overrides I currently am using are:

CODE

GLOBAL_HEAD<=
<title>:: ArtOo's Starship ::</title>
<meta content="revealTrans(transition=22, duration=1.0)" http-equiv="Page-Enter">
<meta content="revealTrans(transition=22, duration=1.0)" http-equiv="Page-Exit">
<style type="text/css">
body{
background-image: url(http://i17.photobucket.com/albums/b52/ArtOos_icons/other_and_custom_sigs/artooljheader.jpg);
background-attachment: fixed;
background-attachment: scroll !important;
background-color: #1a3f97;
background-position: top center;
background-repeat: no-repeat;
margin-top: 450px;
}
</style>
<style type="text/css">
<!--
table {
margin-bottom: px;
}
-->
</style>
<style type="text/css">
<!--
body, td, font, div, p {
font-family: "Arial", "Arial", "Arial", Arial;
font-size: 11pt;
color: #1e3467;
}
-->
</style>
<style type="text/css">
<!--

table {
width: 614px;
margin-left: 189px;
}

table table {
width: 100%;
margin:0;
}
table table table {
width: auto;
}
-->
</style>
<style type="text/css">div, th, p, table, tr, module{ text-align: justify;}</style>
<style type="text/css">
<!--
body {
scrollbar-base-color: #1a3f97;
scrollbar-track-color: #1a3f97;
scrollbar-face-color: #1a3f97;
scrollbar-highlight-color: #1a3f97;
scrollbar-3dlight-color: #f2f1f9;
scrollbar-darkshadow-color: #f2f1f9;
scrollbar-shadow-color: #f2f1f9;
scrollbar-arrow-color: #f2f1f9;
}
-->
</style>
<style type="text/css">
<!--
a:link {
font-weight: normal;
text-decoration: none;
color: #ffffff;
}
-->
</style>
<style type="text/css">
<!--
a:visited {
font-weight: normal;
text-decoration: none;
color: #ffffff;
}
-->
</style>
<style type="text/css">
<!--
table {
border: 1px solid #f2f1f9;
}
table table {
border: 0;
}
-->
</style>
<style type="text/css">
<!--
a:hover {
color: #ffffff;
text-decoration: none;
}

-->
</style>
<=GLOBAL_HEAD

FRIENDS_TALK_LINKS<=
<tr>
<td align="right" colspan="2" width="100%" bgcolor="%%color:weak_back%%" class="comments">
%%readlink%% - [ <a href="%%urlpost%%"><i>R2-D2</i></a> ]-
</td>
</tr>
<=FRIENDS_TALK_LINKS

LASTN_TALK_READLINK=>-[ <A HREF="%%urlread%%">%%messagecount%%</A> ]

FRIENDS_TALK_READLINK=>-[ <A HREF="%%urlread%%">%%messagecount%%</A> ]  

DAY_TALK_LINKS<=
<tr>
<td align="right" colspan="2" width="100%" bgcolor="%%color:weak_back%%" class="comments">
%%readlink%% - [<a href="%%urlpost%%"><i>R2-D2</i></a> ]-
</td>
</tr>
<=DAY_TALK_LINKS

DAY_TALK_READLINK=>-[ <A HREF="%%urlread%%">%%messagecount%%</A> ]

LASTN_TALK_LINKS<=
<tr>
<td align="right" colspan="2" width="100%" bgcolor="%%color:weak_back%%" class="comments">
%%readlink%% - [ <a href="%%urlpost%%"><i>R2-D2</i></a> ]-
</td>
</tr>
<=LASTN_TALK_LINKS

The colors I'm using are:
Page background:#a5a3bf
Page text:#1e3467
Page link:#ffffff
Page visited link:#ffffff
Page active link:#ffffff
Page emphasized text:#a5a3bf
Page title:#ffffff
Weak accent:#a5a3bf
Text on weak accent:#a5a3bf
Strong accent:#a5a3bf
Text on strong accent:#a5a3bf
Stronger accent:#a5a3bf
Text on stronger accent:#f2f1f9

The current header image I'm using is this, and I want to use this image for my header instead with this image map:

CODE

<IMG SRC="http://i17.photobucket.com/albums/b52/ArtOos_icons/other_and_custom_sigs/artooljheader2.jpg" USEMAP="#artooljheader2.jpg" WIDTH=614 HEIGHT=450 BORDER=0>
<MAP NAME="artooljheader2.jpg">
<AREA SHAPE=RECT COORDS="44,61,152,106" HREF="http://www.livejournal.com/users/artoo_ai/">
<AREA SHAPE=RECT COORDS="44,130,149,176" HREF="http://www.livejournal.com/users/artoo_ai/friends">
<AREA SHAPE=RECT COORDS="35,206,158,251" HREF="http://www.livejournal.com/userinfo.bml?user=artoo_ai">
<AREA SHAPE=RECT COORDS="49,279,146,324" HREF="http://www.xanga.com/immortalana">
<AREA SHAPE=RECT COORDS="32,351,160,395" HREF="http://www.myspace.com/artoo_ai">
</MAP>

Is there any way to change my current header to the other one with the image map? I'd really appreciate any help on this matter. :)

[jordanriane]

You'll have to remove your navigation table.
View the thread in this subforum, which has been stickied.

Then all you need to do is enter in your image map codes (make sure you tag the image properly, as stated in the tutorial) into the lastn_website.

Also make sure to have a website listed in your userinfo, or it will not show up properly.

[artoo_ai]

Thanks for the help. I've got the image up and it works, except my journal's not looking too great. How can i get rid of my icon on the recent entries page and center the header to match the body (or resize the body to match)? Thanks so much.

EDIT: Never mind; I seem to have gotten it. :D