img map and post area, i need some help Options

[terencec]

Um... im testing how to make a xanga skin right now, ive got a img map up, and a spot i want to put my posts on, but the problem is, i cant seem to get the post area on the image! i tried searching this forum, but i cant find anything helpful, please help!

[Phischie]

Can we see your xanga and code please? It's a little easier to help when i have both. :)

[*Kathleen*]

It's called DIV layering. Go to Xanga Scripts for it or the Webdesign Forum in tutorials.

[terencec]

Heres the code, and ill read about the div layering, thx!!

CODE

<!-- begin code provided by createblog.com -->
<MAP NAME='imgmap'>
<AREA SHAPE='rect' COORDS='188,13,188,17' HREF='http://www.xanga.com/CLAF' ALT='CLAF'>
<AREA SHAPE='rect' COORDS='199,19,248,45' HREF='http://www.xanga.com' ALT='xanga home'>
<AREA SHAPE='rect' COORDS='282,27,333,54' HREF='undefined' ALT='undefined'>
</MAP>

<IMG SRC='http://img4.imgspot.com/u/04/222/20/exterior.jpg' border=0 width=467 height=250 USEMAP='#imgmap'> <div style="
overflow: auto;
width: 400px;
height: 230px;
margin-top: 0px;
margin-left: 0px;">
<style type="text/css">
.#rblEprops{display:none;}
#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops
/* width of the comment page */
{width:245px;}
.leftmoduletitlebar, .leftmoduleborder, .leftmoduleinterior, table.left, table.left TH, table.left TD, table.navigation, table.footer
{display: none;}
</style>
<style type="text/css">
/*Name of Your Skin*/
/*by YOU*/

background-repeat: repeat-y-x;
background-color: #ffffff;
scrollbar-face-color: #COLOR CODE;
scrollbar-shadow-color: #COLOR CODE;
scrollbar-highlight-color: #COLOR CODE;
scrollbar-3dlight-color: #COLOR CODE;
scrollbar-darkshadow-color: #COLOR CODE;
scrollbar-track-color: #COLOR CODE;
scrollbar-arrow-color: #COLOR CODE;
}

#rblEprops, #pnlEnabled table, #pnlEprops table {
width: auto !important;
}

table.blogbody {
width:WIDTH OF THE BLOGpx;
font-family: Arial;
font-weight: none;
font-size: 12pt;
color: #COLOR;
text-align: justify;
padding: 0px;
margin-top: 2px;
}

.caption, .blogheader {
width: 380px;
padding: 3px;
font-family: CHANGE FONT;
font-size: 16pt;
text-align: center;
color: #COLOR;
background-color: #COLOR;
text-transform: lowercaps;
margin-top: 10px;
}

div.smalltext{
width: WIDTHpx;
padding: 3px;
text-align: left;
}

P, B, I, TD, TH
{font-family: FONT; color: #COLOR CODE OF FONT; font-size: 8pt; }
A:link, A:visited, A:active
{color:#COLOR CODE OF A LINK; text-decoration:none; font-size:8pt;}
a:hover
{text-decoration: underline; color:#COLOR; font-size: 8pt; );}
b, strong, i, u, {
/* edit colors when bold italic underline */
font-family: arial;
font-size: 8pt;
color: #000000;
font-weight: bold;
text-transform: lowercaps;
</style>



<!-- end code provided by createblog.com -->

[aznmech]

yea u have to use div.. i would try and do it for you but i need a link to ur xanga

[lilphoenix]

I have a quick question...

<MAP NAME='imgmap'>
<AREA SHAPE='rect' COORDS='188,13,188,17' HREF='http://www.xanga.com/CLAF' ALT='CLAF'>
<AREA SHAPE='rect' COORDS='199,19,248,45' HREF='http://www.xanga.com' ALT='xanga home'>
<AREA SHAPE='rect' COORDS='282,27,333,54' HREF='undefined' ALT='undefined'>
</MAP>


The bolded area, why is it undefined?

[See... we don't really get your question if we can't see the problem, visually that is.]


And for the spot to put your blog, (posting/new entry area), in...

Try using this:

CODE

<!-- begin code provided by createblog.com -->

<div style="position:static;margin-top: 0px;margin-left: Xpx;margin-top: -Xpx;align: left;border: none; width: Xpx; height: Xpx; overflow: auto">

<!-- end code provided by createblog.com -->

X - variables in which are for you to change.

Margins - directing the blog to where you want it to be.

Height/Width - size of the blog itself.

Hope that helps.

[terencec]

I have a quick question...

<MAP NAME='imgmap'>
<AREA SHAPE='rect' COORDS='188,13,188,17' HREF='http://www.xanga.com/CLAF' ALT='CLAF'>
<AREA SHAPE='rect' COORDS='199,19,248,45' HREF='http://www.xanga.com' ALT='xanga home'>
<AREA SHAPE='rect' COORDS='282,27,333,54' HREF='undefined' ALT='undefined'>
</MAP>


The bolded area, why is it undefined?

oh i guess i did an extra link while image mapping and forgot to put a url into it, thx for pointing that out.

I figured out the DIV layering stuff, so thanks for all the help, u guys are real great
oh btw.. thx for the code pheonix, ill give it a try

[terencec]

ok, now i have another problem, i dunno how to make the image map a background so i can get the blog on top of it, is there a special code out there that might do this?

[Relentless]

umm.. i dont noe if this will work.. but try putting this in front of ur image mapping.. code..

CODE

<!-- begin code provided by createblog.com -->
<IMG SRC='http://img4.imgspot.com/u/04/222/20/exterior.jpg' border=0 width=467 height=250 USEMAP='#imgmap'>
<!-- end code provided by createblog.com -->

put that in front of ur image mapping code.. instead of putting it at the end of ur image mapping code..

[terencec]

dont u have to make it a div layer of some sort so stuff can just hover over it? eg the blog

[terencec]

i tried making it a background, but then it automatically repeats the picture to fill up the whole page, any code that can fix that?

[*NatiMarie*]

You have to fix the numbers in this code:

CODE

<!-- begin code provided by createblog.com -->
<div style="
overflow: auto;
width: 400px;
height: 230px;
margin-top: 0px;
margin-left: 0px;">
<!-- end code provided by createblog.com -->

You have 0px margin at the top and in the left in your code. Put like 200 or something. Then it won't show. Put numbers in there.
=P

[terencec]

oh thank u so much, btw, thx for ur tutorial, it motivated me to try and make a skin

[terencec]

but how do i make the image map into a background so stuff can get piled on top of it? sorry if im making anyone angry, but im really confused at this point.

[Relentless]

I can help you.. but i dont get you..