Mapping not working in Safari and possibly IE, Image Mapping not working in Safari and i think IE...Please help!& Options

[Wainwright]

i have an image map mapped out but it doesn't seem to be working in Safari and I think IE. It works great in Caminio and Firefox.... Any help would be sooooo great!!!

CODE

<style type="text/css"> .ImgOnlineNow{display:none;} table table,table table table table,table table{background-color:transparent;width:;border:0px;} th{background-color:transparent;text-align:center;border:0px;} a.navbar,font,.whitetext12,.btext,.orangetext15, .redbtext,.redtext,.blacktext12,.blacktext10, .lightbluetext8,strong,.nametext,div b font font, div font font u,table table table table, table.contacttable{display:none;} div table form tr td,td.text table,a.text, table div font a,table div div,{visibility:hidden;di-splay:none} table td table tr td.text table {visibility:hidden;} table td table tr td.text table table, table td table tr td.text table table td.text {visibility:visible;} td.text table table {display:inline; visibility:visible;} embed{position:absolute;top:0px;left:0px;display:block;width:0px; height:0;} table, tr, td { background-color:FFFFFF; border:none; border-width:0;} table table a img{ border-width:0px;}a, a.man, a:link, a:visited{font-family:Times New Roman, arial, times new roman;color:FFFFFF; font-size:11pt; font-weight:normal; text-decoration:none; font-style:normal} a:active, a:hover{font-family:Times New Roman, arial, times new roman;color:; font-size:10pt; font-weight:normal; text-decoration:none; font-style:normal;}td, table, tr, span, li, p, div, textarea, DIV {font-family:Times New Roman, arial, times new roman;font-size:10pt;color:666666; font-weight:normal; font-decoration:none; font-style:normal;background-color:transparent} td, li, p, div, textarea {font-family:Times New Roman, arial, times new roman;border-color:666666} table{border-color:666666}a.navbar{font-family:Times New Roman, arial, times new roman; color:666666 font-size:10pt; text-decoration:none; font-weight:normal; font-style:normal;}a.navbar:link{color:666666 font-size:10pt; text-decoration:none; font-weight:normal; font-style:normal;}a.navbar:active{color:font-size:10pt; text-decoration:none; font-weight:normal; font-style:normal;}a.navbar:visited{color:FFFFFF font-size:10pt; text-decoration:none; font-weight:normal; font-style:normal;}a.navbar:hover{color:font-size:9pt; text-decoration:none; font-weight:normal; font-style:normal;}a.searchlinkSmall{font-family:Times New Roman, arial, times new roman;font-size:9pt;color:666666 font-size:9pt; text-decoration:none; font-weight:normal; font-style:normal;}a.searchlinkSmall:link{font-family:Times New Roman, arial, times new roman;font-size:11pt;color:666666 font-size:10pt; text-decoration:none; font-weight:normal; font-style:normal;}a.searchlinkSmall:active{font-family:Times New Roman, arial, times new roman;font-size:10pt;color:font-size:10pt; text-decoration:none; font-weight:normal; font-style:normal;}a.searchlinkSmall:visited{font-family:Times New Roman, arial, times new roman;font-size:11pt;color:FFFFFF font-size:10pt; text-decoration:none; font-weight:normal; font-style:normal;}a.searchlinkSmall:hover{font-family:Times New Roman, arial, times new roman;font-size:9pt;color:font-size:9pt; text-decoration:none; font-weight:normal; font-style:normal;}body{font-family:Times New Roman, arial, times new roman;background-color:FFFFFF;background-image:url(); background-position:0%; background-repeat:repeat; background-attachment:fixed;}.nametext{font-family:Times New Roman, arial, times new roman;font-size:9pt;color:666666; font-weight:normal;}.blacktext10{font-family:Times New Roman, arial, times new roman;font-size:9pt; color:666666; font-weight:normal;}.blacktext12{font-family:Times New Roman, arial, times new roman;font-size:10pt; color:666666; font-weight:normal;}.btext, .itext, .text{font-family:Times New Roman, arial, times new roman;font-size:10pt; color:666666; font-weight:bold;}.orangetext15{font-family:Times New Roman, arial, times new roman;font-size:11pt; color:666666; font-weight:normal;}.lightbluetext8{font-family:Times New Roman, arial, times new roman;font-size:10pt; color:666666; font-weight:normal;}.whitetext12{font-family:Times New Roman, arial, times new roman;font-size:9pt; color:666666; font-weight:normal;}.tmz_imp{font-family:arial;color:FF0000;font-weight:bold} table table table{background-color:FCFCFC}table table table table a img{}table table table table a:hover {music navigation header} .musicbar {position:absolute; left:50%; margin-left:-500px; top:135px; width:1000px; height:45px; padding:0px; border:0px; background-color:transparent; overflow:hidden; z-index:2;} .musicbar a:link, a:active, a:visited {color:ffffff; font-family:tahoma; font-weight:bold; font-size:10px;} .musicbar a:hover {color:ffffff;}

.bg {position:absolute; left:50%; margin-left:-490px; top:225px; width:1200px; height:1864px; padding:0px; border:0px;}

.scrolling {position:absolute; left: 50%; margin-left:-500px; top:183px; width:1000px; height:1000px; z-index:3; font-size:16px}

.scrolling2 {position:absolute; left: 50%; margin-left:-235px; top:1250px; width:1000px; height:1500px; z-index:3; font-size:20px; color:FFFFFF}

.last {position:absolute; left: 50%; margin-left:-540px; top:2100px; width:1000px; height:1450px; z-index:3; font-size:20px; color:FFFFFF}

.up {position:absolute; left:50%; top:1200px; margin-left:30px; z-index:3}
.shows{position:absolute; left:50%; top:1250px; margin-left:50px; z-index:2}
.saying{position:absolute; left:50%; top:1200px; margin-left:-510px; z-index:3}
.showstamp {position:absolute; left:50%; top:1385px; margin-left:-475px; z-index:6}
.newsstamp {position:absolute; left:50%; top:1390px; margin-left:-260px; z-index:6}

.searchin {position:absolute; left:50%; top:1652px; margin-left:45px; z-index:3}
.birthday {position:absolute; left:50%; top:2080px; margin-left:-520px; z-index:3}

.backto {position:absolute; left:50%; top:2080px; margin-left:45px; z-index:3}

.pettus {position:absolute; left:50%; top:2498px; margin-left:-520px; z-index:3}
.run {position:absolute; left:50%; top:2505px; margin-left:35px; z-index:3}
.lost {position:absolute; left:50%; top:2925px; margin-left:35px; z-index:3}
.birth {position:absolute; left:50%; top:2925px; margin-left:-510px; z-index:3}
.tour {position:absolute; left:50%; top:1260px; margin-left:-10px; z-index:5}
.blog {position:absolute; left:50%; top:1430px; margin-left:100px; z-index:5}
.home1{position:absolute; left:50%; top:400px; margin-left:100px; z-index:5}

.frie {position:absolute; left:50%; top:2800px; margin-left:40px; z-index:3}
.comm {position:absolute; left:50%; top:3370px; margin-left:-490px; z-index:3} img{}body{scrollbar-arrow-color:666666;scrollbar-Track-Color:FCFCFC;scrollbar-Highlight-Color:666666;scrollbar-base-color:666666;scrollbar-Face-Color:FCFCFC;scrollbar-Shadow-Color:666666;scrollbar-DarkShadow-Color:666666 <br><br>


{friends comments} .friendsComments{ position:absolute; top:2700px; left:50%; margin-left:50px; padding:0px; border:0px; z-index:3; background-color:transparent; color:ffffff; max-width:100px} .friendsComments td.text td td{color:666666; font-size:10px;} table .friendsComments td.text table td table td a {margin:0px; padding:0px;} table .friendsComments table a img{max-width:160px; max-height:200px; width:100;} table .friendsComments table img{max-width:160px; max-height:200px; width:auto;} *html table .friendsComments table img{width:160px; height: 200px} *html table .friendsComments table a img{width:75px;}

Comments} .friendsComments{ position:absolute; top:2700px; left:50%; margin-left: 50px;height:-690px; overflow:auto; padding:0px; border:0px; z-index:3; max-width:300px; background-color:transparent; color:666666;} {numbers} .redtext {display:inline;} {style view all comments link} .friendsComments td.text td b a {display:inline; color:666666; font-family:verdana; font-size:11px; padding:0px;} .friendsComments td.text td b {display:inline;} .friendsComments td.text td b a:hover{color:666666;} {add comment bottom} .friendsComments td.text td a {color:666666; font-size:10px; font-family:verdana;} .friendsComments td.text td a:hover {color:666666;} {style datetime in comments} .blacktext10 {background-color:FFFFFF; border:1px silver thin; padding:3px; font-family:veranda; color:666666; font-size:10px; text-align:right;}

{friends} table.friendspace {visibility:visible; display:block; position:absolute; left:50%; margin-left:-490px; top:2700px; width: 425px; height:450px; padding:0px; border:0px; z-index:3; background-color:transparent; color:fff;} .friendspace a:link, a:visited{color:666666;} .friendspace a:hover, a:active {color:666666;} .orangetext15{display:inline;} .redbtext {color:666666;} span.btext{color:666666;} {view all friends} .redlink a{visibility:visible; color:666666;} a.redlink:hover {color:666666;} span.redbtext:after{content: " Kick-Ass"; color:fff; text-decoration:blink;} </style> <style type="text/css">{movie trailer}


.trailer2 {position:absolute; left:50%; top:780px; margin-left:610px;}
.trailer {position:absolute; left:50%; top:780px; margin-left:232px;}
.trailer3 {position:absolute; left:50%; top:1315px; margin-left:545px;}
.trailer4 {position:absolute; left:50%; top:780px; margin-left:0px;}
.pettus2 {position:absolute; left:50%; top:1315px; margin-left:0px;}

.trailer7 {position:absolute; left:50%; top:1050px; margin-left:0px;}
.trailer10 {position:absolute; left:50%; top:1050px; margin-left:305px;}
.trailer11 {position:absolute; left:50%; top:1050px; margin-left:610px;}
.trailer8 {position:absolute; left:50%; top:1050px; margin-left:0px;}
.trailer9 {position:absolute; left:50%; top:1315px; margin-left:305px;}
.youtube {position:absolute; left:50%; top:420px; margin-left:615px; z-index:5;}


</style>



<div class="trailer"> <a href="http://myspacetv.com/index.cfm?fuseaction=vids.individual&videoid=16910367">Moving McAllister Trailer</a><br><object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="all" height="200" width="240" data="http://lads.myspace.com/videos/vplayer.swf">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="all" />
<param name="movie" value="http://lads.myspace.com/videos/vplayer.swf" />
<param name="flashvars" value="m=16910367&v=2&type=video" />
</object></div>


<div class="trailer2"><object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="all" height="200" width="240" data="http://lads.myspace.com/videos/vplayer.swf">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="all" />
<param name="movie" value="http://lads.myspace.com/videos/vplayer.swf" />
<param name="flashvars" value="m=23964964&v=2&type=video" />
</object></div>

<div class="trailer3">
<a href="http://myspacetv.com/index.cfm?fuseaction=vids.individual&videoid=23531183">Searchin' for a Feelin'</a><br><object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="all" height="200" width="240" data="http://lads.myspace.com/videos/vplayer.swf">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="all" />
<param name="movie" value="http://lads.myspace.com/videos/vplayer.swf" />
<param name="flashvars" value="m=23531183&v=2&type=video" />
</object></a>

</div>


<div class="trailer4">

<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="all" height="200" width="240" data="http://lads.myspace.com/videos/vplayer.swf">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="all" />
<param name="movie" value="http://lads.myspace.com/videos/vplayer.swf" />
<param name="flashvars" value="m=23587403&v=2&type=video" />
</object>
</div>



<div class="pettus2">
<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="all" height="200" width="240" data="http://lads.myspace.com/videos/vplayer.swf">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="all" />
<param name="movie" value="http://lads.myspace.com/videos/vplayer.swf" />
<param name="flashvars" value="m=25473100&v=2&type=video" />
</object></div>

<div class="trailer8">
<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="all" height="200" width="240" data="http://lads.myspace.com/videos/vplayer.swf">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="all" />
<param name="movie" value="http://lads.myspace.com/videos/vplayer.swf" />
<param name="flashvars" value="m=22958828&v=2&type=video" />
</object></div>

<div class="trailer9">
<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="all" height="200" width="240" data="http://lads.myspace.com/videos/vplayer.swf">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="all" />
<param name="movie" value="http://lads.myspace.com/videos/vplayer.swf" />
<param name="flashvars" value="m=26962387&v=2&type=video" />
</object>
</div>

<div class="trailer10">
<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="all" height="200" width="240" data="http://lads.myspace.com/videos/vplayer.swf">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="all" />
<param name="movie" value="http://lads.myspace.com/videos/vplayer.swf" />
<param name="flashvars" value="m=26868533&v=2&type=video" />
</object>
</div>

<div class="trailer11">
<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="all" height="200" width="240" data="http://lads.myspace.com/videos/vplayer.swf">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="all" />
<param name="movie" value="http://lads.myspace.com/videos/vplayer.swf" />
<param name="flashvars" value="m=23580945&v=2&type=video" />
</object>
</div>

<div class="youtube">
<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="200" width="240" data="http://www.youtube.com/v/Djm5vwMSvew&hl=en">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://www.youtube.com/v/Djm5vwMSvew&hl=en" />
</object>
</div>

<style type="text/css">{music player} object {position:absolute; left:50%; top:1090px; margin-left:-435px; z-index:6} embed{width:415px; height:320; z-index: 6} </style>

<div class="bg"><img src="http://i182.photobucket.com/albums/x302/uniqueinvites2/bag12.jpg" width=950px height=1563px usemap="nav_Map" border="0">

<map name="nav_Map">
<AREA shape="rect" coords="70,75,191,118" ALT="Home" href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy">

<AREA shape="rect" coords="325,76,541,133" ALT="Message"
href="http://www.msplinks.com/MDFodHRwOi8vbWFpbC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1tYWlsLm1lc3NhZ2UmZnJpZW5kSUQ9MTIyNDc4OTQ5">

<AREA shape="rect" coords="539,47,627,99" ALT="Pictures" href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld3BpY3R1cmUmZnJpZW5kaWQ9MTIyNDc4OTQ5JmFsYnVtaWQ9MA==" >

<AREA shape="rect" coords="218,36,307,92" ALT="Add me" href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRpZD0xMjI0Nzg5NDk=" >

<AREA shape="rect" coords="654,66,755,122" ALT="Blog" href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLkxpc3RBbGwmZnJpZW5kSUQ9MTIyNDc4OTQ5" >

<AREA shape="rect" coords="764,48,864,103" ALT="Buy" href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld1BpY3R1cmUmZnJpZW5kSUQ9MTEwNDAzODU5" ></map></div>




<p><a href=http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15c3BhY2UuY29t class='cb4stats'></a><a href=http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15c3BhY2UuY29t title='Myspace Layouts' class='cb4layouts'></a></p><style type='text/css'>.cb4stats { display:block; float:left; height:31px; width:88px; background-image:url('http://www.createblog.com/tracker/track67990.jpg'); } .cb4layouts { display:block;float:left;height:31px;width:10px;background-image:url('http://www.createblog.com/images/link2.gif'); }</style>

<br>

<div class="comments"><table><tr><td><table><tr><td>

[miyashu]

you need to have a "#" sign before the name of the map element, like this:

CODE

<div class="bg">
<img src="http://i182.photobucket.com/albums/x302/uniqueinvites2/bag12.jpg" width=950px height=1563px usemap="#nav_Map" border="0">
<map name="nav_Map">
<AREA shape="rect" coords="70,75,191,118" ALT="Home" href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy">
<AREA shape="rect" coords="325,76,541,133" ALT="Message"href="http://www.msplinks.com/MDFodHRwOi8vbWFpbC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1tYWlsLm1lc3NhZ2UmZnJpZW5kSUQ9MTIyNDc4OTQ5">
<AREA shape="rect" coords="539,47,627,99" ALT="Pictures" href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
lld3BpY3R1cmUmZnJpZW5kaWQ9MTIyNDc4OTQ5JmFsYnVtaWQ9MA==">
<AREA shape="rect" coords="218,36,307,92" ALT="Add me" href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRpZD0xMjI0Nzg5NDk=">
<AREA shape="rect" coords="654,66,755,122" ALT="Blog" href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLkxpc3RBbGwmZnJpZW5kSUQ9MTIyNDc4OTQ5">
<AREA shape="rect" coords="764,48,864,103" ALT="Buy" href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
lld1BpY3R1cmUmZnJpZW5kSUQ9MTEwNDAzODU5">
</map></div>

let me know if this works for you.

[Wainwright]

With Myspace though the # Symbol doesn't work, as it was there orignally but when it is saved to myspace it deletes it.... that is the unfortunate problem.

Any other suggestions?

[CrotchetTheLeper]

It should work, even though myspace deletes the symbol. Myspace will change it to something like: "&035;" but it should still make the image map work.

Try it, and it should work.

[Wainwright]

I have tried.. i dunno if somthing is stopping it in my coding.. does all my coding look right? the link is

www.myspace.com/testingwa


My personal myspace is mapped so i dunno if i has to do with the fact it is a music page or not?
i am just getting so annoyed will all these browser issues.... please someone help me!!!

[CrotchetTheLeper]

Make sure you have a # sign, like miyashu said, before where it says "usemap":

CODE

<img src="http://i182.photobucket.com/albums/x302/uniqueinvites2/bag12.jpg" width="950px" height="1563px" #usemap="nav_Map" border="0">

As well as where it says, right below it:

CODE

<map name="#nav_Map">

That should do the trick.

***Edit: Nevermind, I screwed up too!
I'll keep looking at your code. My bad!

[CrotchetTheLeper]

Yayy! I really figured it out this time!

Okay, it appears that you've forgotten a few quotation marks!
Here's what you have:

CODE

<div class="bg"><img src="http://i182.photobucket.com/albums/x302/uniqueinvites2/bag12.jpg" width=950px height=1563px usemap="#nav_Map" border="0"><map name="nav_Map">

Here's what you should have:

CODE

<div class="bg"><img src="http://i182.photobucket.com/albums/x302/uniqueinvites2/bag12.jpg" width="950px" height="1563px" usemap="#nav_Map" border="0"><map name="nav_Map">

Do you see where you had width=950px? You forgot a few quotes in there. It should be: width="950px". You did the same thing for "height" as well.

I tested the layout after I fixed that little blooper, and it worked just fine! (I'm using IE)

[MissHygienic]

Ah, I'm glad you've solved this out for yourself. Are there any further questions or may I close this topic, and have it moved to MySpace Resolved Topics, whereupon other people can use your knowledge if they so wish?

[Wainwright]

okay so i tried that. I have that in the code right now and it isn't working in IE for some reason or Safari still?
I dunnow what i am doing wrong... :(

[CrotchetTheLeper]

Are you sure that you fixed the quotations after height & width? Because once I fixed that in your code, it worked perfectly in IE.

[foxdanger]

I have the same problem... i post another topic about this, because i dont see this topic before...


I even dont know about firefox and others, BUT in IE, my map areas DONT WORK! :/

can i post my code here too or you see in my topic?

I apreciate for help!


CYA! AND TNX!


and... SFME