image mapping in a div ?, help me please Options

[ukrides]

ok so i need to image map this ive done it in gimp but now ive inserted it into my div its not workign the pics shows up but no image map :(

heres my code i no its wrong somewhere just not sure where :(

CODE

<style>
.map {position:absolute; top:626px; margin-left:-400px; left:50%; width:000px; height:000px; z-index:2;}
</style>

<div class="map">

<img src="http://i39.tinypic.com/6rpqc9.png" width="801" height="498" border="0" />

<map name="map">

<area shape="rect" coords="23,324,234,348" href="http://friends.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&amp;friendId=360757587" />
<area shape="rect" coords="23,356,247,384" href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&amp;friendID=360757587" />
<area shape="rect" coords="22,389,115,409" href="http://blogs.myspace.com/index.cfm?fuseaction=blog.ListAll&amp;friendId=360757587" />
</map>

</div>

[crafty-designs]

Add

CODE

usemap="#map"

inside the image src code.
so it would be.

CODE

<img src="http://i39.tinypic.com/6rpqc9.png" width="801" height="498" border="0" usemap="#map" />

Hope that helps.

[lizardkingfan]

how do you get your codes?
i'm new to cb and i'm trying to make a new layout but idk how to get the codes
can help me plz?

[ukrides]

how do you get your codes?
i'm new to cb and i'm trying to make a new layout but idk how to get the codes
can help me plz?

when u first start out just use a tutorials theres lots on here :D

Add

CODE

usemap="#map"

inside the image src code.
so it would be.

CODE

<img src="http://i39.tinypic.com/6rpqc9.png" width="801" height="498" border="0" usemap="#map" />

Hope that helps.

still not working this is what i have as my code

CODE

<style>
.map {position:absolute; top:626px; margin-left:-400px; left:50%; width:000px; height:000px; z-index:2;}
</style>

<div class="map">

<img src="http://i39.tinypic.com/6rpqc9.png" width="801" height="498" border="0" usemap="map" />

<map name="map">

<area shape="rect" coords="23,324,234,348" href="http://friends.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&amp;friendId=360757587" />
<area shape="rect" coords="23,356,247,384" href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&amp;friendID=360757587" />
<area shape="rect" coords="22,389,115,409" href="http://blogs.myspace.com/index.cfm?fuseaction=blog.ListAll&amp;friendId=360757587" />
</map>

</div>

this is my whole code :

CODE

<style>.a {hide search form} form {display:none;} table table table form {display:inline;} </style>

<style>
.contactTable {display: none;}
.orangetext15 {display: none;}
.whitetext12 {display: none;}
.nametext {display: none;}

table table div embed, table table div object {position:relative; z-index:9;}

table, tr, td{
background-color:transparent;
border-style:none;
}

body {
background-color:afa676;
background-image:url(http://i44.tinypic.com/epgf83.jpg);
background-position:top center;
background-repeat:repeat;
background-attachment: scroll;
margin-top:461px;
}



table table table table, table table table td{
background-image:none;
background-color:transparent;
}

body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited{
color:000000;
font-size:9pt;
line-height: 10pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

strong, .lightbluetext8, .btext, .redtext, .redbtext{
color:FF0000;
font-size:9pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

a font, a:link, a:visited, a.navbar, a.navbar:link, a.navbar:visited, a.man, a.man:link, a.man:visited, a.man font, a.redlink, a.redlink:visited{
color:000000;
font-size:9pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

a {
color: 000000 !important;
font-family: Arial !important;
}

a:hover {
color: 666666 !important;
font-family: Arial !important;
}

a:hover, a:hover font, a:active, a.navbar:hover, a.navbar:active, a.man:hover, a.man:active, a.man:hover font, a.searchlinkSmall:hover, a.searchlinkSmall:active, a.redlink:hover, a.redlink:hover{
color:0000FF;
font-size:9pt;
font-weight:normal;
font-style:normal;
text-decoration:normal;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

table table table table, div table table table{
border-style:none;
}

</style>



<style>
.masthead {position:absolute; top:0px; margin-left:-400px; left:50%; width:000px; height:000px; z-index:2;}
</style>

<div class="masthead">
<img src="http://i39.tinypic.com/17vjp2.jpg" />



</div>
<style>
.profileWidth table { margin-bottom:20px; width:800px; }
.rail { display:none; }
.gap {
background:url() top left no-repeat;
width:800px; height:897px;
position:absolute; top:0; left:50%;
margin:0px 0 -400px -690px;
</style>

<div class="gap"></div>


<style>
.map {position:absolute; top:626px; margin-left:-400px; left:50%; width:000px; height:000px; z-index:2;}
</style>

<div class="map">

<img src="http://i39.tinypic.com/6rpqc9.png" width="801" height="498" border="0" usemap="map" />

<map name="map">

<area shape="rect" coords="23,324,234,348" href="http://friends.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&amp;friendId=360757587" />
<area shape="rect" coords="23,356,247,384" href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&amp;friendID=360757587" />
<area shape="rect" coords="22,389,115,409" href="http://blogs.myspace.com/index.cfm?fuseaction=blog.ListAll&amp;friendId=360757587" />
</map>

</div>

Reason for edit: Please use [codebox] tags instead of [code] tags when posting longer codes. - Mike

[crafty-designs]

still not working this is what i have as my code

CODE

<style>
.map {position:absolute; top:626px; margin-left:-400px; left:50%; width:000px; height:000px; z-index:2;}
</style>

<div class="map">

<img src="http://i39.tinypic.com/6rpqc9.png" width="801" height="498" border="0" usemap="map" />

<map name="map">

<area shape="rect" coords="23,324,234,348" href="http://friends.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&amp;friendId=360757587" />
<area shape="rect" coords="23,356,247,384" href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&amp;friendID=360757587" />
<area shape="rect" coords="22,389,115,409" href="http://blogs.myspace.com/index.cfm?fuseaction=blog.ListAll&amp;friendId=360757587" />
</map>

</div>

It's not working because you didn't include the # symbol in usemap.
It's really important to include to for it to work.
So every time you need to add a # inside usemap parameters.

CODE

<img src="http://i39.tinypic.com/6rpqc9.png" width="801" height="498" border="0" usemap="#map" />

Has to be exactly like that.

[schizo]

Please try not to double post ukrides.

Is this for a band page or a regular myspace? As far as I know, image maps don't work on band pages at all because they delete all the #s in your code.

[ukrides]

Please try not to double post ukrides.

Is this for a band page or a regular myspace? As far as I know, image maps don't work on band pages at all because they delete all the #s in your code.

yeh its band page how do i do it instead ?

[Mickey]

Topic closed & moved.