Could someone help me out with imagemapping a DIV?, I'm posting it in both webmasters and designers cafe. |
![]() ![]() |
Could someone help me out with imagemapping a DIV?, I'm posting it in both webmasters and designers cafe. |
Aug 8 2007, 09:05 AM
Post
#1
|
|
|
Newbie ![]() Group: Member Posts: 2 Joined: Aug 2007 Member No: 558,166 |
mmk, I know how to imagemap, I got it from a tutorial on create blog, but that method isn't working with my DIV,
Please help! About me code: CODE <style type="text/css"> .contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12, btext,.redtext,.redbtext{display:none;height:0px;!important;visibility:hidden} td td td td{border:0px;width:0px;text-align:left;} table,td,tr{padding:0px;width:;background-color:transparent} table table table{padding:1px;height:.01%;width:100%;} table table,table table table table,table,tr,td{height:0px;!important;border:0px;!important} a.text,table div font a,table div div,.navbar font,tr td font{visibility:hidden;display:none;height:0px;!important;} table table table table,table table table table td.text, td.text td.text table{display:none;} td.text table table{display:inline;visibility:visible;} table td table tr td.text table{visibility:hidden;} table td table tr td.text table table,table td table tr td.text table table td.text{visibility:visible;} </style> <style type=text/css> body { background-color: transparent; background-image: url("http://i18.tinypic.com/4yip0e1.gif"); background-position: bottom right; background-repeat: repeat; background-attachment: fixed; scrollbar-arrow-color:0DEA21; scrollbar-track-color: 00BFF5; scrollbar-shadow-color: 0DEA21; scrollbar-face-color:00BFF5; scrollbar-highlight-color:0DEA21; scrollbar-darkshadow-color:00BFF5; scrollbar-3dlight-color:0DEA21;} 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: transparent; background-color: transparent; } {sets the default style for the body, table data, list data, divisions and text areas} body,table, td, li, p, div, textarea {font:normal 11px arial; color:ffffff; font-weight:bold; border:0px; text-transform: none; line-height:12px;} {class for the basic font for the page} .text {font:normal 11px arial; color:ffffff; font-weight:none; border:0px; text-transform: bold; line-height:12px;} {style for the number of comments you have. The actual ..} .redtext{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; } {style for the number of friends you have.} .redbtext{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; } {”Blurbs”, “About Me”, “Who I’d like to Meet”, “Friend Space”, and “Friend’s Comments” style} .orangetext15{font-family: arial; color: ######; font-weight: bold; font-size: 20px; letter-spacing: -2px;} {”General”, “Music”, “Movies”, “Television”, “Books”, “Heros”, “Status”, “Here for”, “Hometown”, “Body Type”, “Ethnicity”, “Religion”, “Sign”, “Smoke/Drink”, “Children”, “Education”, “Occupation”, and “Income” title style} .lightbluetext8{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; } {”Contacting”, “Interests”, “Details”, and “Schools” title styling} .whitetext12{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;} {”In your extended network” style} .blacktext12{font-family: arial; color: ######; font-weight: bold; font-size: 20px; letter-spacing: -2px; } {Stylizing of your name above your picture } .nametext{font-family: arial; color: ######; font-weight: bold; font-size: 30px; letter-spacing: -3px; line-height: 35px;} {date stamp on comments} .blacktext10{font-family:times new roman; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;} {This is how all anchor points will be displayed; anchor points appear before all links.} a{font-family:times new roman; font-size:11px; color:000000; font-weight:none;border:0px; text-transform: uppercase; } a:link{font-family:times new roman; font-size:11px; color:ffffff; font-weight:none;border:0px; text-transform: lowercase;} a:active{font-family:times new roman; font-size:11px; color:ffffff; font-weight:none;border:0px; text-transform: lowercase;} a:visited{font-family:times new roman; font-size:11px; color:ffffff; font-weight:none;border:0px; text-transform: lowercase;} a:hover{font-family:times new roman; font-size:11px; color:ffffff; font-weight:none;border:0px; text-transform: lowercase;} {”View all friends” and “invite more” link style} a.redlink{font-family:times new roman; font-size:11px; color:ffffff; font-weight:none;border:0px; text-transform: lowercase;} a.redlink:link{font-family:times new roman; font-size:11px; color:ffffff; font-weight:none;border:0px; text-transform: lowercase;} a.redlink:active{font-family:times new roman; font-size:11px; color:ffffff; font-weight:none;border:0px; text-transform: lowercase;} a.redlink:visited{font-family:times new roman; font-size:11px; color:ffffff; font-weight:none;border:0px; text-transform: lowercase; } a.redlink:hover{font-family:times new roman; font-size:11px; color:ffffff; font-weight:none;border:0px; text-transform: lowercase;} {2 links in very top on the left, and the 13 links above your picture with make the navigation bar} a.navbar{font-family:times new roman; font-size:11px; color:ffffff; font-weight:none;border:0px; text-transform: lowercase;} a.navbar:link{font-family:times new roman; font-size:11px; color:ffffff; font-weight:none;border:0px; text-transform: lowercase;} a.navbar:active{font-family:times new roman; font-size:11px; color:ffffff; font-weight:none;border:0px; text-transform: lowercase;} a.navbar:visited{font-family:times new roman; font-size:11px; color:ffffff; font-weight:none;border:0px; text-transform: lowercase;} a.navbar:hover{font-family:times new roman; font-size:11px; color:ffffff; font-weight:none;border:0px; text-transform: lowercase;} {Default Links} a:link, a.man{font-family:times new roman; font-size:11px; color:ffffff; font-weight:none;border:0px; text-transform: lowercase; letter-spacing: 0px;} a:active{font-family:times new roman; font-size:11px; color:ffffff; font-weight:none;border:0px; text-transform: lowercase;} a:visited{font-family:times new roman; font-size:11px; color:ffffff; font-weight:none;border:0px; text-transform: lowercase;} a:hover{font-family:times new roman; font-size:11px; color:ffffff; font-weight:none;border:0px; text-transform: lowercase;} {bolded words} .standard b, p b, B, strong { font-family:times new roman; font-size:11px; color:ffffff; font-weight:bold;border:0px; text-transform: lowercase; } </style> CODE <MAP NAME="DIV2_Map"> <AREA SHAPE="rect" ALT="Everything." COORDS="173,333,543,459" HREF="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLnZpZXcmZnJpZW5kSUQ9MTk0MzQxNTA4JmJsb2dJRD0yNjk2MTMxMzgmTXlU 2tlbj1hZDBiM2Q3Yi0wMDE5LTQ2ZDYtODgwYi05NDI5ZDY3MGU2ZDM="> <AREA SHAPE="rect" ALT="Pictures <3" COORDS="468,498,513,529" HREF="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=194341508" TARGET="_self"> <AREA SHAPE="rect" ALT="Block me :'[" COORDS="364,496,433,532" HREF="http://collect.myspace.com/index.cfm?fuseaction=block.blockUser&userID=194341508" TARGET="_self"> <AREA SHAPE="rect" ALT="Message" COORDS="277,495,348,529" HREF="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=194341508" TARGET="_self"> <AREA SHAPE="rect" ALT="Add me!" COORDS="191,490,258,532" HREF="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=194341508" TARGET="_self"> </MAP> <style>embed, object {width:0px; height:0px;} table table table embed, table table table object {width:320px; height:240px;} </style> <div class="bg" style="position: absolute; left:200px; top:140px; width:704px; height:620px; overflow: hidden;"><img src="http://i14.tinypic.com/4pmiog0.png"></div> <div class="about" style="position: absolute; left:320px; top:270px; width:190px; height:175px; overflow: auto;">©2003-2007 MySpace.com. All Rights Reserved.<br>Copyrighted by myspace, yoo!<br> Hello!- and we are Caricature. :] [formally known as Broken Glass Syndrome!] 2 very cool kids own this site, but Ashley does most of the work ;] Click the heart to go to our pics :]<br>We're always open to talk, so whenever you want to, you can drop a comment, here: <form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment"> <input name="friendID" value="194341508" type="hidden"> <textarea name="f_comments" class="whateverlife2">Suppp</textarea><br> <input type="submit"class="whateverlife3" value="Bam"></form> <style type="text/css"> input.whateverlife3 {color: ff4b5c; !important; background-image:url(""); font-size:8pt !important; width:200px !important; height:15px !important; font-family: 'arial' !important; background-color: ffffff !important; border-color:404040 !important; border-width:1px !important; border-style:solid !important; letter-spacing:0px !important; text-transform:uppercase !important; line-height:7px !important; font-weight: bold !important;} textarea.whateverlife2{ background-image:url("http://img.photobucket.com/albums/v221/ashbernie311/welife/headphones_skinnypatterned.gif"); background-color:ffffff !important; width:200px !important; height:60px !important; font-family: 'arial' !important; color: ff4b5c !important; line-height:17px !important; font-size:18px !important; border-color:404040 !important; border-style:solid !important; border-width:1px !important; letter-spacing:-2px !important; font-weight:bold !important; }</style> </div> <div class="support" style="position: absolute; left:600px; top:260px; width:170px; height:180px; overflow: auto;">Support4Support?<br> <textarea><center><a href="http://www.msplinks.com/MDFodHRwOi8vcHJvZmlsZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdwcm9maWxlJmZyaWVuZGlkPTE5NDM0MTUwOA=="><img src="http://i10.tinypic.com/6eup6r6.png"></a><br><a href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJRD0xOTQzNDE1MDg="><img src="http://i15.tinypic.com/63jt6x5.png"> border=0</a><br> <font color=F18DC1><font face=KRAVITZ><font size=7> We also have sign requests for sites, and fun games for personals!<br></font></font><font color=B7CDFE>So what are you waiting for? Add them today!<br><br></font> <font color=ED9EED> Support code: featuring site model, Brandon, and site owner, Ashley.</textarea> <br>Limit=1K<br> Other wise? Just support twice w/proof and comment my default.<br> -and don't title the bulletin 'add' or '+++' or anything of that nature <3<br> ALSO<br> If you've read this.<br> say 'I love to get crunk!'<br> in your <b>COMMENT!</b> <br><br>♥<br><br></center> </div> NOW, the image mapping part is in the I'd like to meet section, but I don't know where it's supposed to go, or if it is even right. So, help???! |
|
|
|
| *IVIike* |
Aug 8 2007, 10:10 AM
Post
#2
|
|
Guest |
i posted in the other thread you made what you would do when coding a web layout however is a bit different.
when your coding the areas for your layout you would do something like this: CODE .main{ position:absolute; left:0px; top:0px; z-index:1; padding:0px; border:0px; background-color:transparent;} then you would set up your div area like this: CODE <div class="main"> <MAP NAME="whatever"> <AREA SHAPE=rect COORDS="0,0,0,0" HREF="URLHERE" ALT="blah blah"> </MAP> <IMG SRC="imageurlhere" border=0 width=700 height=500 USEMAP="#whatever"> </div> but as far as myspace questions you already have a topic in that forum so Topic Closed |
|
|
|
![]() ![]() |