image mapping Options

[CharlieT]

I need the image mapping scripts for Add, Message and home, I found them on here before, but now I can't find them. If someone could direct me to them it would be appreciated. Thanks

[freeflow]

To image map you use this:
http://www.createblog.com/tutorials/download.php?id=168


Home link:

CODE

http://www.myspace.com/index.cfm?fuseaction=splash&MyToken=cb23d2af-0864-47ec-840c-307b481691b5

or just go to link myspace.

Add me:

CODE

http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=RAWRR&MyToken=e80524dc-178a-48ac-9d74-7f28ce531c11

Where it says RAWRR put your friend ID.

[CharlieT]

ok I came up with this


<map name="image_Map">
<area shape="rect" alt="" coords="520,525,612,541" href="http://www.43things.com/person/CharlieTang2010">
<area shape="rect" alt="" coords="520,494,592,510" href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=142839613&MyToken=39d275fe-791c-4140-b0b4-34751c0a5be3">
<area shape="rect" alt="" coords="520,511,562,525" href="http://www.myspace.com/index.cfm?fuseaction=splash&MyToken=cb23d2af-0864-47ec-840c-307b481691b5">
<area shape="rect" alt="" coords="520,477,585,494" href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=142839613&MyToken=e80524dc-178a-48ac-9d74-7f28ce531c11">
</map>

Do I place it where the div content is? because when I tried it it didn't work

[freeflow]

Your missing an image. You should have an image above the map code. Then you place both of those inside of a div.

[CharlieT]

thank you so much, I got it to work.
http://profile.myspace.com/index.cfm?fusea...endid=142839613



I was also wondering if you could direct me towards how I could make those "image hover" thingys, where when you put your cursor over a mapped part it changes shape, color ect.

thanks again

[freeflow]

Thats image rollovers. You can try doing it with an image map but you may have to slice your image instead. Visit this page.

[CharlieT]

Can I get the image rollover to make an image someone where else? I am trying to make it so when someone mouses over one of the bigger words on the left brown box, it shows an image in the brown box in the top right.

[freeflow]

I believe you would use the same script. Except when you are editing it in css you just add positions. So you would add:

position: absolute;
left: #px;
top: #px;

before the }

[CharlieT]

Thanks, this is what I got sofar, but it still doesn't work, I don't know if I am inputing things
in incorrectly.

<img name="image_01" src=" http://img213.imageshack.us/img213/874/imageaq0.png" width="840" height="777" border="0" alt="" usemap="#image_01_Map">
<map name="image_01_Map">
<area shape="rect" alt="" coords="522,524,612,546" href="http://www.43things.com/person/CharlieTang2010">
<area shape="rect" alt="" coords="522,509,561,524" href="http://www.myspace.com/index.cfm?fuseaction=splash&MyToken=cb23d2af-0864-47ec-840c-307b481691b5">
<area shape="rect" alt="" coords="522,494,589,509" href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=142839613&MyToken=39d275fe-791c-4140-b0b4-34751c0a5be3">
<area shape="rect" alt="" coords="522,477,590,494" href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=142839613&MyToken=e80524dc-178a-48ac-9d74-7f28ce531c11">
<area shape="rect" alt="" coords="178,517,217,531" href="#">
<area shape="rect" alt="" coords="300,402,352,416" href="#"
onmouseover="changeImages('image_01', ' http://img293.imageshack.us/img293/131/mys...cpu9.png'); return true;"
onmouseout="changeImages('image_01', ' http://img213.imageshack.us/img213/874/imageaq0.png'); return true;"
onmousedown="changeImages('image_01', ' http://img293.imageshack.us/img293/131/mys...cpu9.png'); return true;"
onmouseup="changeImages('image_01', ' http://img293.imageshack.us/img293/131/mys...cpu9.png'); return true;">
<area shape="rect" alt="" coords="178,318,248,331" href="#"
onmouseover="changeImages('image_01', ' http://img251.imageshack.us/img251/603/mys...two8.png'); return true;"
onmouseout="changeImages('image_01', ' http://img213.imageshack.us/img213/874/imageaq0.png); return true;"
onmousedown="changeImages('image_01', ' http://img251.imageshack.us/img251/603/mys...two8.png'); return true;"
onmouseup="changeImages('image_01', ' http://img251.imageshack.us/img251/603/mys...two8.png'); return true;">
<area shape="rect" alt="" coords="308,202,358,218" href="#"
onmouseover="changeImages('image_01', ' http://img224.imageshack.us/img224/2663/my...tys6.png'); return true;"
onmouseout="changeImages('image_01', ' http://img213.imageshack.us/img213/874/imageaq0.png '); return true;"
onmousedown="changeImages('image_01', ' http://img224.imageshack.us/img224/2663/myspaceaboutys6.png '); return true;"
onmouseup="changeImages('image_01', ' http://img224.imageshack.us/img224/2663/myspaceaboutys6.png '); return true;">
</map>



also this is the code which I copied from Image Ready, I uploaded the other layers on imageshack

<img name="image_01" src="images/image_01.png" width="840" height="777" border="0" alt="" usemap="#image_01_Map">
<map name="image_01_Map">
<area shape="rect" alt="" coords="522,524,612,546" href="http://www.43things.com/person/CharlieTang2010">
<area shape="rect" alt="" coords="522,509,561,524" href="http://www.myspace.com/index.cfm?fuseaction=splash&MyToken=cb23d2af-0864-47ec-840c-307b481691b5">
<area shape="rect" alt="" coords="522,494,589,509" href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=142839613&MyToken=39d275fe-791c-4140-b0b4-34751c0a5be3">
<area shape="rect" alt="" coords="522,477,590,494" href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=142839613&MyToken=e80524dc-178a-48ac-9d74-7f28ce531c11">
<area shape="rect" alt="" coords="178,517,217,531" href="#">
<area shape="rect" alt="" coords="300,402,352,416" href="#"
onmouseover="changeImages('image_01', 'images/image_01-Music_over.png'); return true;"
onmouseout="changeImages('image_01', 'images/image_01.png'); return true;"
onmousedown="changeImages('image_01', 'images/image_01-Music_over.png'); return true;"
onmouseup="changeImages('image_01', 'images/image_01-Music_over.png'); return true;">
<area shape="rect" alt="" coords="178,318,248,331" href="#"
onmouseover="changeImages('image_01', 'images/image_01-Current_over.png'); return true;"
onmouseout="changeImages('image_01', 'images/image_01.png'); return true;"
onmousedown="changeImages('image_01', 'images/image_01-Current_over.png'); return true;"
onmouseup="changeImages('image_01', 'images/image_01-Current_over.png'); return true;">
<area shape="rect" alt="" coords="308,202,358,218" href="#"
onmouseover="changeImages('image_01', 'images/image_01-About_over.png'); return true;"
onmouseout="changeImages('image_01', 'images/image_01.png'); return true;"
onmousedown="changeImages('image_01', 'images/image_01-About_over.png'); return true;"
onmouseup="changeImages('image_01', 'images/image_01-About_over.png'); return true;">
</map>

[freeflow]

I'm not really good with image rollovers but the image ready code you used for rollovers, may be the problem. It might not be compatible with myspace.

You need to slice up your image and use the script I gave you above. You should use slicing instead of image mapping.

[CharlieT]

ok thanks, i'll do that instead