Image mapping on div? Options

[kimmytree]

I'm having a really hard time figuring out how to image map my layout...

http://profile.myspace.com/index.cfm?fusea...96-b0ab77486e9f

I found a code, but it wont let me position the links over my main layout image. Can anyone help generate a code for me? Thank you.

[synatribe]

have you tried my tutorial?
http://www.createblog.com/tutorials/tutorial.php?id=1243

also keep in mind that if you move your layout like lets say 10px left then you have to add that in too your image map :]

[kimmytree]

Thank you for your help, but I've tried that type of code... and I just tried again. I think what is happening is the image is being positioned behind my layout image. Is there any way I can position links over the text that's already on the image? (below the bird.. the navigation)? Or am I going to have to slice the image up into a million pieces?

[Lj-Phresh]

do u use photoshop?
if you do you can use corrds to locate your links on your profile

[kimmytree]

^ Thanks for the help everyone... but I caved in and just took the text off... and decided not to image map. Mapping using photoshop is too much trouble for a myspace layout. This can be closed.

[Lj-Phresh]

^ Thanks for the help everyone... but I caved in and just took the text off... and decided not to image map. Mapping using photoshop is too much trouble for a myspace layout. This can be closed.

kimmytree!

what you said before about links on the image!

its called corrds and its easy!

this the code i use and you can have

CODE

<div class="div" style="position: absolute; left:340px; top:200px; width:874px; height:650px; overflow: hidden;">
<img src="http://i36.tinypic.com/2liwnps.jpg" usemap="#swagga" border="0" /><map name="swagga">

<area shape="rect" alt="home" coords="213,71 274,90" href="http://home.myspace.com/index.cfm?fuseaction=user" />
<area shape="rect" alt="add" coords="215,107 253,119" href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=XXXXXX"/>
<area shape="rect" alt="msg" coords="213,135 298,151" href="http://mail.myspace.com/index.cfm?fuseaction=mail.message&friendID=XXXXXX" />
<area shape="rect" alt="pics" coords="214,168 256,180" href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=XXXXXX" />
<area shape="rect" alt="cmt me" coords="214,195 293,211" href="http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=XXXXXX" />
<area shape="rect" alt="view cmts" coords="212,227 320,241" href="http://comments.myspace.com/index.cfm?fuseaction=user.homeComments&friendID=XXXXXX" />


</map> </div>

well im not good at coding but ..you put the image in the code
then on photoshop
go to the info box

and then theres a x and y
use your pointer then go to the top right oof the locatioon link you want
the put in the first number whch is

x then y then go to the bottem left then
put them numbers in

<area shape="rect" alt="home" coords="x,y(right top) x,y(bottem left)"

thats how i do it

make sure you have your x,y in px not inches

[schizo]

Are you sure you want this closed? Image mapping is actually pretty simple. I have a tutorial here that you could try. I'm not sure if it's much different than the one given to you earlier, but you never know.

[only-tuesdays]

This is how I always do image mapping.

CODE

<img src="IMGURL.JPG" width="973" height="530" border="0" alt="" usemap="#MAPNAME" />
<map name="map">
<area shape="rect" alt="" coords="222,9,385,43" href="URL HERE" />
<area shape="rect" alt="" coords="406,8,589,39" href="URL HERE/>
<area shape="rect" alt="" coords="600,13,716,40" href="URL HERE" />
<area shape="rect" alt="" coords="734,12,890,47" href="URL HERE" />
</map>

To get the coord. I just pull the image into paint or something similar and hover over two different corners to get the coord. for those points. Very simple.

[Lj-Phresh]

This is how I always do image mapping.

CODE

<img src="IMGURL.JPG" width="973" height="530" border="0" alt="" usemap="#MAPNAME" />
<map name="map">
<area shape="rect" alt="" coords="222,9,385,43" href="URL HERE" />
<area shape="rect" alt="" coords="406,8,589,39" href="URL HERE/>
<area shape="rect" alt="" coords="600,13,716,40" href="URL HERE" />
<area shape="rect" alt="" coords="734,12,890,47" href="URL HERE" />
</map>

To get the coord. I just pull the image into paint or something similar and hover over two different corners to get the coord. for those points. Very simple.

thats how i do it

but i add this..

position: absolute; left:340px; top:200px;