help with image mapping Options

[shampoo192]

heres the code... i have it up but the image mapping for the navigation doesn't work...
thanks for any help

CODE

<style type="text/css">
div table td font {visibility:hdden;}
div table table td font a {visibility:visible;}
table td div {visibility:hidden;}
table table td div {visibility:visible;}
</style>


<style type="text/css">
.image{
position:absolute;
left:200px;
top:180px;
}


<style>

table td div {visibility:hidden;}
table table td div {visibility:visible;}
tr {background:transparent;}</style>

<style type="text/css">
    table, tr, td {background:transparent;}
    table table table table, table table table table td.text, table.contactTable {display:none;}
    td.text table, .orangetext15 {visibility:hidden;}
    td.text table table {display:inline; visibility:visible;}
    td.text td.text table {display:none;}
    div b font font, div font font u {display:none;}
.whitetext12 { display: none; }
.nametext { display:none;}
</style>

<style type=text/css>

body {
background-color: FFFFFF;
background-image: url("");
background-position: bottom right;
background-repeat: no-repeat;
background-attachment: fixed;
scrollbar-arrow-color:######;
scrollbar-track-color: ######;
scrollbar-shadow-color: ######;
scrollbar-face-color:######;
scrollbar-highlight-color:######;
scrollbar-darkshadow-color:######;
scrollbar-3dlight-color:######;}

table, tr, td {background-color: transparent; border: 0px; padding:2;}
table table {border: 0px;}
table table table table{border: 0px;}

{The actual modules}
table table table {border: 1px solid; border-color: ######; background-color: ######; }

{sets the default style for the body, table data, list data, divisions and text areas}
body,table, td, li, p, div, textarea  
{font:normal 9px arial; color:000000; font-weight:none; border:0px; text-transform: none; line-height:12px;}

{class for the basic font for the page}
.text {font:normal 9px arial; color:000000; font-weight:none; border:0px; text-transform: none; line-height:12px;}  


{This is how all anchor points will be displayed; anchor points appear before all links.}  
a{font-family:arial; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase; }  
a:link{font-family:arial; font-size:9px; color:ffffff; font-weight:none;border:0px; text-transform: uppercase;}
a:active{font-family:arial; font-size:9px; color:ffffff; font-weight:none;border:0px; text-transform: uppercase;}
a:visited{font-family:arial; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}
a:hover{font-family:arial; font-size:9px; color:ffffff; font-weight:none;border:0px; text-transform: uppercase;}


{bolded words}
.standard b, p b, B, strong {
font-family:arial; font-size:9px; color:ffffff; font-weight:none;border:0px; text-transform: uppercase; }




</style>

<Style>
table, tr, td {background-color: transparent; border: 0px; padding:2;}
table table {border: 0px;}
table table table table{border: 0px;}
table table table {border: 0px solid; border-color: transparent; background-color: transparent; }</style>

<style>td td object {position:absolute; left:355px; top:1080px; display:block; width:0px; height:0px;}</style>

CODE

<div class="image">
<img src="http://img218.imageshack.us/img218/7750/goongsdiv8lz.jpg" width="600" height="900" border="0" usemap="#imap_21">
<map id="imap_21" name="imap_21" >
  <area shape="rect" coords="178,861,233,883" alt="home" title="" href="http://home.myspace.com/index.cfm?fuseaction=user&MyToken=cf7b45eb-a300-4e1c-8fc6-7496e9faf590">
  <area shape="rect" coords="233,862,271,883" alt="add" title="" href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=89157186&MyToken=eaa25d05-1dc8-4452-916d-58c88ab47118">
  <area shape="rect" coords="271,861,314,886" alt="msg" title="" href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=89157186&MyToken=eaa25d05-1dc8-4452-916d-58c88ab47118">
  <area shape="rect" coords="315,863,352,884" alt="pics" title="" href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=89157186">
  <area shape="rect" coords="353,861,397,884" alt="comments" title="" href="http://comment.myspace.com/index.cfm?fuseaction=user.viewComments&friendID=89157186">
</map></div>

<div class="aboutme" style="position: absolute; left:310px;  top:650px; width:350px; height:170px; overflow: auto;">
<center><a href="http://blog.myspace.com/index.cfm?fuseaction=blog.ListAll&friendID=89157186">WISH LIST 2007</a><br>
<a href="http://youtube.com/watch?v=VJYuZjXFla8">POSSIBLY THE HOTTEST MUSIC VIDEO CLICK HERE!</a><p></p>
This is the second layout I've ever made so don't rain on my parade! <br>
I'm Sarah and I really love Korean Dramas and eating<br>
I go the Harker School<br>
I have the best, craziest friends in the world and they make me laugh <br>
I'm hella shy so be the first to say Hi!<br>
Thats all</center>
</div>

<div class="comment me" style="position: absolute; left:300px;  top:870px; width:600px; height:200px; overflow: auto;">if that doesn't work <a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=89157186&MyToken=18ef88d3-aa19-41e6-8eba-53ba260412d9">comment here</a>
</div>

<div class="comments" style="position: absolute; left:300px;  top:890px; width:400px; height:200px; overflow: auto;">
<br><form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment"><input name="friendID" value="89157186" type="hidden"> <textarea name="f_comments" class="CKLbox"&gtComment here</textarea><br /><input type="submit" value="hiya" class="CKLsub"></form></a><style type="text/css">
textarea.CKLbox {width:130px; height:50px;color:white;font-size:8pt;font-family:Arial;text-align:left;background-color:67c6dc;background-image:url(http://i77.photobucket.com/albums/j70/amphoto4/blackfuz.gif); background-position:bottom right; background-repeat:repeat;border-color:black; border-style:solid; border-width:1px;}
input.CKLsub {width:130px;color:white;font-size:8pt;background-color:black; border-color:black; border-style:solid; border-width:1px;}
</style><br>
</div>

[protos]

can you post a link?

I can't see any problem just by reading it

[shampoo192]

myspace.com/hugs_sarah

thanks

[adafsdfasdfadasd...]

very nice layout

The problem was with your layers [Edit: the image links were underneath something so they were visible but not clickable]... I used it on my test profile here

I added "z-index: 2;" to the image div and it worked

.image{
position:absolute;
left:200px;
top:180px;
z-index: 2;
}

This post has been edited by ximonolithix: Jan 20 2007, 10:30 PM

[shampoo192]

thanks but how do i get the other stuff that i have to show up???
hahah
sry

[adafsdfasdfadasd...]

Edit: Nevermind the heights were too large >_> same thing as if the z-index was off [one layer over another when it shouldn't be

CODE

<style type="text/css">
div table td font {visibility:hdden;}
div table table td font a {visibility:visible;}
table td div {visibility:hidden;}
table table td div {visibility:visible;}
</style>


<style type="text/css">
.image{
position:absolute;
left:200px;
top:180px;
}


<style>

table td div {visibility:hidden;}
table table td div {visibility:visible;}
tr {background:transparent;}</style>

<style type="text/css">
    table, tr, td {background:transparent;}
    table table table table, table table table table td.text, table.contactTable {display:none;}
    td.text table, .orangetext15 {visibility:hidden;}
    td.text table table {display:inline; visibility:visible;}
    td.text td.text table {display:none;}
    div b font font, div font font u {display:none;}
.whitetext12 { display: none; }
.nametext { display:none;}
</style>

<style type=text/css>

body {
background-color: FFFFFF;
background-image: url("");
background-position: bottom right;
background-repeat: no-repeat;
background-attachment: fixed;
scrollbar-arrow-color:######;
scrollbar-track-color: ######;
scrollbar-shadow-color: ######;
scrollbar-face-color:######;
scrollbar-highlight-color:######;
scrollbar-darkshadow-color:######;
scrollbar-3dlight-color:######;}

table, tr, td {background-color: transparent; border: 0px; padding:2;}
table table {border: 0px;}
table table table table{border: 0px;}

{The actual modules}
table table table {border: 1px solid; border-color: ######; background-color: ######; }

{sets the default style for the body, table data, list data, divisions and text areas}
body,table, td, li, p, div, textarea  
{font:normal 9px arial; color:000000; font-weight:none; border:0px; text-transform: none; line-height:12px;}

{class for the basic font for the page}
.text {font:normal 9px arial; color:000000; font-weight:none; border:0px; text-transform: none; line-height:12px;}  


{This is how all anchor points will be displayed; anchor points appear before all links.}  
a{font-family:arial; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase; }  
a:link{font-family:arial; font-size:9px; color:ffffff; font-weight:none;border:0px; text-transform: uppercase;}
a:active{font-family:arial; font-size:9px; color:ffffff; font-weight:none;border:0px; text-transform: uppercase;}
a:visited{font-family:arial; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}
a:hover{font-family:arial; font-size:9px; color:ffffff; font-weight:none;border:0px; text-transform: uppercase;}


{bolded words}
.standard b, p b, B, strong {
font-family:arial; font-size:9px; color:ffffff; font-weight:none;border:0px; text-transform: uppercase; }




</style>

<Style>
table, tr, td {background-color: transparent; border: 0px; padding:2;}
table table {border: 0px;}
table table table table{border: 0px;}
table table table {border: 0px solid; border-color: transparent; background-color: transparent; }</style>

<style>td td object {position:absolute; left:355px; top:1080px; display:block; width:0px; height:0px;}</style>

/* Note Changes are in red */

<div class="image">
<img src="http://img218.imageshack.us/img218/7750/goongsdiv8lz.jpg" width="600" height="900" border="0" usemap="#imap_21">
<map id="imap_21" name="imap_21" >
<area shape="rect" coords="178,861,233,883" alt="home" title="" href="http://home.myspace.com/index.cfm?fuseaction=user&MyToken=cf7b45eb-a300-4e1c-8fc6-7496e9faf590">
<area shape="rect" coords="233,862,271,883" alt="add" title="" href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=89157186&MyToken=eaa25d05-1dc8-4452-916d-58c88ab47118">
<area shape="rect" coords="271,861,314,886" alt="msg" title="" href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=89157186&MyToken=eaa25d05-1dc8-4452-916d-58c88ab47118">
<area shape="rect" coords="315,863,352,884" alt="pics" title="" href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=89157186">
<area shape="rect" coords="353,861,397,884" alt="comments" title="" href="http://comment.myspace.com/index.cfm?fuseaction=user.viewComments&friendID=89157186">
</map></div>

<div class="aboutme" style="position: absolute; left:310px; top:650px; width:350px; height:170px; overflow: auto;">
<center><a href="http://blog.myspace.com/index.cfm?fuseaction=blog.ListAll&friendID=89157186">WISH LIST 2007</a><br>
<a href="http://youtube.com/watch?v=VJYuZjXFla8">POSSIBLY THE HOTTEST MUSIC VIDEO CLICK HERE!</a><p></p>
This is the second layout I've ever made so don't rain on my parade! <br>
I'm Sarah and I really love Korean Dramas and eating<br>
I go the Harker School<br>
I have the best, craziest friends in the world and they make me laugh <br>
I'm hella shy so be the first to say Hi!<br>
Thats all</center>
</div>

<div class="comment me" style="position: absolute; left:300px; top:870px; width:600px; height:100px; overflow: auto;">if that doesn't work <a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=89157186&MyToken=18ef88d3-aa19-41e6-8eba-53ba260412d9">comment here</a>
</div>

<div class="comments" style="position: absolute; left:300px; top:890px; width:400px; height:150px; overflow: auto;">
<br><form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment"><input name="friendID" value="89157186" type="hidden"> <textarea name="f_comments" class="CKLbox"&gtComment here</textarea><br /><input type="submit" value="hiya" class="CKLsub"></form></a><style type="text/css">
textarea.CKLbox {width:130px; height:50px;color:white;font-size:8pt;font-family:Arial;text-align:left;background-color:67c6dc;background-image:url(http://i77.photobucket.com/albums/j70/amphoto4/blackfuz.gif); background-position:bottom right; background-repeat:repeat;border-color:black; border-style:solid; border-width:1px;}
input.CKLsub {width:130px;color:white;font-size:8pt;background-color:black; border-color:black; border-style:solid; border-width:1px;}
</style><br>
</div>

[freeflow]

^ The rest are not in a stylesheet they are just there. To answer your question (topic starter), you may just need to add z-indexes to all the other divs. Add z-index: #; before the "> of the rest of your divs . (give each one a diff. number and don't use 2)