?

Log in

No account? Create an account

Previous Entry | Next Entry

image map problem... - SOLVED

  • Apr. 5th, 2007 at 11:10 AM
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

Comments

( 7 comments — Leave a comment )
av8rmike
Apr. 5th, 2007 05:37 pm (UTC)
Something is definitely wrong because the HTML you've added to the page isn't printing at all. Check that your theme layer is the active layer in your style. If it is, make your layer viewable (instructions are in the sidebar) and post the layer ID#.
Also, I saw the books header image pop up before yours. Add #header {background-image: none;} to your CSS.
The body group is missing a closing "}".
"pos: center" is not a valid declaration.
hearmemeep
Apr. 5th, 2007 05:42 pm (UTC)
I'm not entirely sure how to make it viewable, but the ID is 12095113 and it is currently my active layer :/

I'll try correcting the header and putting in that missing closing bracket :)
av8rmike
Apr. 5th, 2007 06:07 pm (UTC)
That's your style ID. Click "Edit" next to that style, then look under Theme layer. The number next to "image map" is your layer number, which will probably start with a 7 or 8. Edit this layer and add
layerinfo "source_viewable" = 1;
after the first two lines.
hearmemeep
Apr. 5th, 2007 06:13 pm (UTC)
Ah, okay. I think I understand. It should be 7531467
av8rmike
Apr. 5th, 2007 06:41 pm (UTC)
Apart from needing to edit the code to change where it says "username" to "hearmemeep", I didn't see any problems with the code. It even compiled and displayed properly in my layer. So, I'm sticking with the original problem: your theme layer, "image map" (ID# 7531467) isn't the active theme layer in your style.
So, click on the "your styles" link above. The style name with the number in bold, which should have a greyed-out "Use" box next to it, is the active style. Click "Edit". In the pulldown box under "Theme" on the next page, scroll past all the base Expressive themes and select "image map", then Save Changes.
If that still didn't do it, then there must be something in your User layer that's interfering. Edit that layer, which is probably called "Auto-generated Customizations" and delete everything but the layerinfo lines and the "set custom_css" section.
hearmemeep
Apr. 5th, 2007 06:46 pm (UTC)
Yay! That worked! Yeah, I need to go back and re-edit the links so that they go to my actual username, but they at least work! :)

Tons of thanks! =^.^=
av8rmike
Apr. 5th, 2007 07:00 pm (UTC)
You're welcome! I'm always happy to hear something worked. =)
( 7 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