Finally attempting my own layout..., I need a little bit of help with image mapping and divs Options

[0100017]

I've done a lot of the basic customization of myspace, so I have some limited knowledge of html/css and whatnot. But now I want to try to make my own div layout. I've read most of the tutorials and pretty much get the idea, but here's the thing, I also want to incorporate image mapping (in psp7) for the background and navigation. So basically if anyone could help me out, or just point me the right direction for help, I would be forever grateful.


Kelsey

[0100017]

Well, I'm using Paint Shop Pro, so...

Here's the image I want to use:
http://img406.imageshack.us/img406/1193/imagemappingns6.png

And here's the image mapping code that I got from the program:

CODE

<IMG NAME="imagemapping0" SRC="imagemapping.png" WIDTH="1040" HEIGHT="768" BORDER="0" USEMAP="#imagemapping">

<MAP NAME="imagemapping">
<AREA SHAPE="rect" COORDS="255,37,315,71" HREF="http://home.myspace.com/index.cfm?fuseaction=user">
<AREA SHAPE="rect" COORDS="334,37,398,73" HREF="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=215885094&MyToken=a81ba93e-ae90-4a65-904e-709f026cb114">
<AREA SHAPE="rect" COORDS="404,35,507,75" HREF="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=215885094&MyToken=a81ba93e-ae90-4a65-904e-709f026cb114">
<AREA SHAPE="rect" COORDS="516,33,579,80" HREF="http://blog.myspace.com/index.cfm?fuseaction=blog.ListAll&friendID=215885094">
</MAP>

So basically, how do I work this info in with the code for the divs to go on top of it?

[Insurmountable]

^Take the code you have now and where it says imagemapping.png replace that with the URL for the main image your going to using..or the image you took the coordinates from.

You may want to tweak your coding so it looks like this instead:

CODE

<div class="navigation">

<img src="IMAGE URL" width="000" height="000" border="0" alt="" usemap="#navibar_Map">
<map name="navibar_Map">
<AREA SHAPE="rect" COORDS="255,37,315,71" HREF="http://home.myspace.com/index.cfm?fuseaction=user">
<AREA SHAPE="rect" COORDS="334,37,398,73" HREF="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=215885094&MyToken=a81ba93e-ae90-4a65-904e-709f026cb114">
<AREA SHAPE="rect" COORDS="404,35,507,75" HREF="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=215885094&MyToken=a81ba93e-ae90-4a65-904e-709f026cb114">
<AREA SHAPE="rect" COORDS="516,33,579,80" HREF="http://blog.myspace.com/index.cfm?fuseaction=blog.ListAll&friendID=215885094">
</map>
</div>

Make sure to replace the IMAGE URL with the URL to the image that you got the coordinates from. Also in width and height..replace the 000 with the actual width and height number.

Next to position all of this so its in the right place. (The image that is) use this:

CODE

<style>.navigation {
    width:450px;
    height:470px;
    overflow-x:hidden;
    position:absolute; z-index:2;
    background-color:transparent;
    border:0px solid;
    border-color:white;
    margin-left:255px;
    margin-top:458px;
    text-align:justify;
    visibility:visible;
}</style>

Change anything in that to what you need it to be.

[0100017]

Thank you!

[Insurmountable]

You're Welcome

Topic closed, if you need this re-opened for any reason feel free to PM me or a design staff member Also please keep in mind after two days of this topic being closed it will be moved to the Myspace Resolved Topics forum, and if that happens before you need this re-opened feel free to make a whole new topic