Image Mapping, How do you go about doing it? Options

[lghtrfld64]

I have been working with css for a long time, and i want to try my hand at image mapping for layouts.....how do i do it? o.0


EDIT

I have a mapped image and the code for it now, but how do i turn it into a layout?

This post has been edited by lghtrfld64: May 14 2005, 03:20 PM

[shortvi3tlaydee]

try this place
http://www.pcoward.com/imagemapper/stage1.asp

theres also tutorials in the tutorials section here on image mapping

[YourSuperior]

You need a style sheet here, you can use this one:

<!-- begin code provided by createblog.com --><br /><"style type="text/css"><br />/* Name Of Skin*/<br />/*Creator's Name Here*/<br />#rblEprops, #pnlEnabled table, #pnlEprops table { <br />width: auto !important; <br />}<br />table.header, table.main, table.footer, table.navigation{<br />/* edit width */<br />width:350;<br />}<br />table.blogbody, div.blogheader, .caption{<br />width:345;<br />}<br />td.maincenter{<br />margin-left:0px;<br />margin-bottom:0px;<br />margin-right:0px;<br />margin-top:0px;<br />}<br />body {<br />background:#000000 url();<br />scrollbar-Arrow-Color: #COLOR CODE;<br />scrollbar-Track-Color: #COLOR CODE; <br />scrollbar-Shadow-Color: #COLOR CODE;<br />scrollbar-Face-Color:#COLOR CODE; <br />scrollbar-Highlight-Color: #COLOR CODE; <br />scrollbar-darkshadow-color: #COLOR CODE;<br />scrollbar-3dLight-Color: #COLOR CODE;<br />font-family: tahoma;<br />font-size:11px;<br />}<br />texttable.left, td.mainleft, table.left, table.navigation, table.footer, table.search {<br />display: none;<br />} <br />.module, .left, .blogbody, table.footer, .standard, .leftmodulefontcolor, td, p, .content, .smalltext, .standard {<br />/* edits main text */<br />font:normal 11px tahoma;<br />color: #COLOR CODE;<br />}<br />a:link{<br />/* edit the links */<br />color: #COLOR CODE;<br />text-decoration: none;<br />font:normal 11px tahoma;<br />}<br />a:visited{<br />/* edit visited links */<br />color: #COLOR CODE;<br />text-decoration: none;<br />}<br />a:hover {<br />color:#COLOR CODE;<br />border:1px solid #COLOR CODE;<br />background:#COLOR CODE url();<br />}<br />.blogbody td{<br />/* entry margins */<br />width: 0px;<br />padding-left: 0px<br />}<br />input, select, textarea, .textfield, .button{<br />/* this edits buttons, drop down menus etc. */<br />border: 1px solid #COLOR CODE;<br />font:normal 11px tahoma #COLOR CODE;<br />background:#COLOR CODE url();<br />letter-spacing:0px;<br />color:#COLOR CODE;<br />font-family: tahoma;<br />}<br />div.blogheader, .caption {<br />/* edit the dates */<br />font-family:tahoma;<br />font-size:14px;<br />color:#COLOR CODE;<br />background-color: transparent;<br />text-align: left;<br />font-weight:bold;<br />padding-left:4px;<br />padding-bottom:1px;<br />padding-right:0px;<br />}<br />b, strong{<br />color:#COLOR CODE;<br />}<br />table.blogbody {<br />/* edits your blog or entry space */<br />border: 0px;<br />background-color:transparent;<br />padding-top:0px;<br />padding-right:0px;<br />}<br />.smalltext {<br />text-align:right;<br />}<br />hr {<br />color: #COLOR CODE;<br />}<br />div.blogspace {<br />width:###;<br />height:###;<br />margin-left: ###px;<br />margin-top:###px;<br />padding-top:##px;<br />overflow:auto;<br />background-color:transparent;<br />scrollbar-Arrow-Color: #COLOR CODE;<br />scrollbar-Track-Color: #COLOR CODE; <br />scrollbar-Shadow-Color: #COLOR CODE;<br />scrollbar-Face-Color:#COLOR CODE; <br />scrollbar-Highlight-Color: #COLOR CODE; <br />scrollbar-darkshadow-color: #COLOR CODE;<br />scrollbar-3dLight-Color: #COLOR CODE;<br />FILTER: chroma(color=#fCOLOR CODE) allowTransparency;<br />}<br /></style><br /><center><br /><br /><!--IMAGE MAPPING HERE--><br /><!--END IMAGE MAPPING--><br /><br /><div style="position:static; margin-left: 430px;margin-top: -460px;border: 0px solid #FE0101; width: 200px; height: 400px;background: none; overflow: auto"><br /><br /><table border="0" width=100%><br /><tr><br /><td colspan=2><br /><b class=nav>About Me</b><br /><tr><br /><td colspan=2><br><br />Stuff about yourself…here<br />Stuff about yourself…here<br />Stuff about yourself…here<br />Stuff about yourself…here<br /><br /><tr><br /><td colspan=2><br><br /><b class="nav">Navigation</b><br><br /><a href="http://www.xanga.com/">Xanga</a><br><br /><a href="http://www.xanga.com/signin.aspx">Sign In</a><br><br /><a href="http://www.xanga.com/logout.aspx">Sign Out</a><br><br /><a href="http://www.xanga.com/private">Home</a><br><br /><a href="http://www.xanga.com/claf">CLAF</a><br><br /><a href="http://www.xanga.com/Private/subs.aspx">Your Subs</a><br><br /><a href="http://www.xanga.com/guestbook.aspx?user=YOURXANGAUSER">Guestbook</a><br><br /><a href="http://www.xanga.com/profile.aspx?user=YOURXANGAUSER">Profile</a> (<a href="http://www.xanga.com/Private/profilebasic.aspx">Edit</a>)<br><br /><a href="http://www.xanga.com/private/tracking.aspx">Your Comments</a><br><br /><a href="http://www.xanga.com/Private/feedback.aspx">Feedback</a><br><br /><a href="http://www.xanga.com/Private/SubscribeTo.aspx?user=YOURXANGAUSER" target="blank">Add Me</a><br><br /><tr><br /><td colspan=2><br /><b class="nav">Subscriptions</b><br /><tr><br /><td><br /><a href="http://www.xanga.com">link</a><br><br /><a href="http://www.xanga.com">link</a><br><br /><a href="http://www.xanga.com">link</a><br><br /><a href="http://www.xanga.com">link</a><br><br /><a href="http://www.xanga.com">link</a><br><br /><a href="http://www.xanga.com">link</a><br><br /><td><br /><a href="http://www.xanga.com">link</a><br><br /><a href="http://www.xanga.com">link</a><br><br /><a href="http://www.xanga.com">link</a><br><br /><a href="http://www.xanga.com">link</a><br><br /><a href="http://www.xanga.com">link</a><br><br /><a href="http://www.xanga.com">link</a><br><br /></tr><br /></table><br /></div><br /><div align="center" class="blogspace"><br /><style type="text/css"><br />.#rblEprops{display: none;}<br />#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops <br />/* edits comment page*/<br />{width:300px;}<br /></style><br /><!-- end code provided by createblog.com -->

[Pulchritude]

You need to know the basics to code a layout. So heres a tutorial
- http://www.createblog.com/forums/index.php?showtopic=34220