Iris (hearmemeep) wrote in s2expressive,
Iris
hearmemeep
s2expressive

image map problem... - SOLVED

I've been following the image map tutorial that was posted on here, but I seem to be having some trouble getting it to work.


Here's the code I have in my Custom CSS:

#header-inner
{
background-image: url(http://pics.livejournal.com/hearmemeep/pic/000warg9);
}
#header-inner
{
height: 285px;
}


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


/* 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 #picrecent {
left:43px;
top:235px;
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 -100px -100px no-repeat;
text-decoration:none;
z-index:20;
}
#imap a#calendar {
display:block;
width:153px;
height:63px;
background:transparent -100px -100px no-repeat;
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;
}

.asset-footer
{
pos: center; height: 24px; width: 477px; background: url(http://pics.livejournal.com/hearmemeep/pic/000w7egz)
}


body {
background-color: #B5B5B5;




Here's the code that I have compiled in my layers:

layerinfo "type" = "theme";
layerinfo "name" = "image map";
set base_theme = "books";

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="picrecent">
<a id="recententries" title="Recent Entries" href="http://username.livejournal.com/"><span>Recent Entries</span></a>
</dd>
<dd id="piccalendar">
<a id="calendar" title="Calendar" href="http://hearmemeep.livejournal.com/calendar"><span>Calendar</span></a>
</dd>
<dd id="picfriends">
<a id="friends" title="Friends" href="http://hearmemeep.livejournal.com/friends"><span>Friends</span></a>
</dd>
<dd id="picmemories">
<a id="memories" title="Memories" href="http://www.livejournal.com/tools/memories.bml?user=hearmemeep"><span>Memories</span></a>
</dd>

<dd id="picuserinfo">
<a id="userinfo" title="Userinfo" href="http://username.livejournal.com/profile"><span>Userinfo</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 -->""";
}


It all compiles just fine, but for some reason the links never come up on the imagemap... I've moved my mouse around the image to try and see if maybe I'm just mis-placing the links, but I can't seem to find anything clickable :/

Any help would be greatly appreciated!

~Iris
Tags: 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

  • 7 comments