image map and div......

wild_eyed

hi. im just attempting to redesign a myspace page.... using the code from this website...

http://www.mikeindustries.com/blog/archive/2006/04/hacking-myspace-layouts.php

its very neat.. but there is an image on the page, a header if you will that i wanted to turn into an image map.....

the problem is, the code doesnt link to the image like normal html...

here's the code:

.masthead {width: 850px; height: 104px; position: absolute; margin-left: -425px; left: 50%; top: 162px; background-image: url(http://www.mikeindustries.com/scratch/myspace/header_myspace.jpg);}


what it does is assign the space for the image and then links to the image. but how and where in the code would and could i assign image map details and how would i link it to the above expression?

any help much appreciated.

ron_darrell

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_areamap

Image maps work on img tags (to the best of my knowledge) though it may be possible to get them to work on a div or td tag provided you can absolutely position the tag and absolutely set it's size (image maps work basically on x-y co-ordinates so if the size/position changes then the map ceases to work properly). May I ask what you are trying to do and maybe there is a better/other way to accomplish it?

-RD

wild_eyed

thanks so much for your reply....

what im trying to do is.... look at the following myspace....
http://www.myspace.com/mikeindustries

the image below the advertising and above the profile, im adding a similiar image to my myspace.... in fact im using the same code im just changing the image......

the myspace is for a band and i wanted to offer links to store, forum and other thngs in this header area i figured the best way would be to use an image map on the image but its proving quite difficult.......

any ideas would be much appreciated.

ron_darrell

Looks to me like (and I could be completely wrong here) that you don't know much HTML beyond what you cut and paste. If I'm looking at the right place (I'm assuming it's the menu bar along the top that you want to emulate) this code should do the job (you will need to put in the addresses of the links):

<div style="font-size:8pt;font-family:arial;text-align:center;width:800px;">
<span style="padding:5px;"><a href="" style="text-decoration:none;color:black;">Home</a></span>|
<span style="padding:5px;"><a href="" style="text-decoration:none;color:black;">Browse</a></span>|
<span style="padding:5px;"><a href="" style="text-decoration:none;color:black;">Search</a></span>|
<span style="padding:5px;"><a href="" style="text-decoration:none;color:black;">Invite</a></span>|
<span style="padding:5px;"><a href="" style="text-decoration:none;color:black;">Film</a></span>|
<span style="padding:5px;"><a href="" style="text-decoration:none;color:black;">Mail</a></span>|
<span style="padding:5px;"><a href="" style="text-decoration:none;color:black;">Blog</a></span>|
<span style="padding:5px;"><a href="" style="text-decoration:none;color:black;">Favourites</a></span>|
<span style="padding:5px;"><a href="" style="text-decoration:none;color:black;">Forum</a></span>|
<span style="padding:5px;"><a href="" style="text-decoration:none;color:black;">Groups</a></span>|
<span style="padding:5px;"><a href="" style="text-decoration:none;color:black;">Events</a></span>|
<span style="padding:5px;"><a href="" style="text-decoration:none;color:black;">Videos</a></span>|
<span style="padding:5px;"><a href="" style="text-decoration:none;color:black;">Music</a></span>|
<span style="padding:5px;"><a href="" style="text-decoration:none;color:black;">Comedy</a></span>|
<span style="padding:5px;"><a href="" style="text-decoration:none;color:black;">Classifieds</a></span>
</div>

Adjust the width of the the div tag from 800px to whatever suits your needs. The address of the links go in the href attribute of the <a> tag that surrounds the link text. Hope that helps. If I coded the wrong part of the page give me a buzz back and we'll see if we can reproduce it.

-RD