myspaceprodesigns.com
image mapping
- bookmark us
- add me on myspace
- add me on xuqa
- add me on yfly
10/15/2007 05:59 AM
Re: HELP!!
10/14/2007 05:39 PM
Re: HELP!!
server side image maps
Client Side Image Maps • Server Side Image Maps
OK, so now you understand client side image maps. We are going to go over server side image maps in this tutorial, which you MUST use on MySpace if you want mapping to work. The main disadvantage of server side maps is bandwidth and load time, as a server side map is hosted elsewhere and imported into your browser. Since most map files are relatively small, neither is a huge concern, but can slighly decrease load time depending on the upload speed of your host.
If you have something like Adobe Image Ready, here is a great tutorial by Mark on how to do it.
If you don't have it, we're going to start the same way that we started the client side tutorial, which is by first getting our image in the browser and using the MeasureIt Extension for Firefox. Since I recommend using both client side and server side maps, you should already have the coordinates for your image if you followed the first tutorial.
However, we're going to lay things out a little differently this time.
1. Open up a text editor.
2. We need to put our code in and format it properly so it can be read as a map file.
In our client side map, we laid it out like this:
<MAP name="ImageMap">
<AREA shape="CIRCLE" coords="X1, Y1, r" href="URL OF LINK" alt="ALTERNATE TEXT" title="TITLE">
<AREA shape="RECT" coords="X1, Y1, X2, Y2" href="URL OF LINK" alt="ALTERNATE TEXT" title="TITLE">
<AREA shape="POLYGON" coords="X1, Y1, X2, Y2, X3, Y3, X4, Y4, etc." href="URL OF LINK" alt="ALTERNATE TEXT" title="TITLE">
</MAP>
However, for a server-side map, we need to lay it out a little differently. The coordinates, shapes and links are all the same, but the format is a little different and we can't use the alt and title tags for server side maps.
3. We can take the above information and change it to look like this:
default LINK
circle LINK X1, Y1, R
rect LINK X1, Y1, X2, Y2
poly LINK X1, Y1, X2, Y2, X3, Y3, X4, Y4, etc.
Now there are several things we need to look at:
default LINK - You will need this to tell the browser what the default link is if someone should happen to click outside of the map. For MySpace, as an example, you may want to make this LINK the url of your page.
The next three things are the shape names. Notice that they are named circle, rect (as opposed to rectangle), and poly (as opposed to polygon). The next section is the link for each shape. Then, lastly, we list the coordinates.
4. So, after we have put this into our text document, we will save it as a .map file. I don't know of all the people that will host MAP files and what file structure you have to put them in, but they must go into the cgi-bin of a directory. I use File Lodge (which is free).
5. So now that we're uploaded our file, we just need to get the filename. It will look something like this:
http://www.filelodge.com/files/hdd5/97505/filename.map
6. Now we are going to go into our code. We need the URL to the image that we are making a map of, as well and enter this:
<a href="URL_OF_MAPFILE"><img src="URL_OF_IMAGE" ismap></a>
7. The ismap tells our browser that this image is using a serverside map. If you recall, we used usemap="MAPNAME" for our client side map. So, since we will use both, we will add the usemap to our code above to get this:
<a href="URL_OF_MAPFILE"><img src="URL_OF_IMAGE" ismap usemap="MAPNAME"></a>
That's it! We've made both a client-side map and a server-side map to use. We are no longer restricted to rectangular links and can make a nearly-infinate amount of shapes! In addition, the days of positioning image links individually is gone since we can put it all on our image map!
Comments
View Comments (5) • Leave Comment • Support Forum