Advanced Tips

by Steph Ortiz | published on Dec 21, 2014

Click headline for full article.

Image Mapping

Here is a good interactive tutorial you can use for image mapping:

http://www.w3schools.com/TAGS/tag_map.asp

You can also see the Wikipedia “Image Map” article and look at the source for that page. What we are working with here is a client side map (in case you ever need to know). That’s just a fancy word for “we are using instructions that come from the viewers browser”.

The convio system will change the code you enter automatically.

Here is an explanation in Plain (as possible) English of the image map source code

This is the code that drops in the Image that is used for your map. IMG style is just defining the properties of the image (how it looks). Alt=”” here is the text you get when you hover your mouse over something that has not been define (meaning the background. Since that is too confusing and I dont want it to say anything, I just put quotes with nothing in between.)

NOTE: If you just want to change the way this map looks…you can just save the image to your computer, edit it…delete the old one from the server and then add a new one that is the same name and file type as the old one. where it says src=”images/maps/all.gif” it is saying “internet explorer…please look for the image all.gif in this folder”. You can trick it by swapping it out….and the image map coordinates will work as long as its the same height and width.

MAP id and name are needed to tell the users browser “hey, im making a map” out of this image. They are essential

In between these < >’s we are telling the browser to draw a specific area. Convio Wants Area ID’s…they want to know which area is drawn first. You probably wont find this in any other tutorials, but remember when you want to make a new area, just make sure its next in line (in the case of this map it would be 7. It does not matter where is is physically, its just that the computer wants a sequence to work with or it will go crazy.

Again, Alt=”Whatever” would make the text say Whatever when you mouse over your area.

Shape is just telling the browser what shape to draw. Squares or rectangles will only have two points. Polygons can have as many as you want. The COORDS are the coordinates (the points) you tell the browser to make in order to draw the map. Imagine clicking on the image and drawing a shape on it with paint or photoshop. Every click represents a point that will have an x,y coordinate. (For a square think of the point you click, and the point you release) This is probably the most difficult part. I will show you an easy way to get this informationhere.

hrf=”/usa”….href is code for MAKE A LINK. This is a relative link (a link on the same site) so we only needed /usa. if you put http://globalministries.org/usa in between the quotes…that would still work. You can put any web address you want there. I dont usually care about if its a relative link or not, I just copy and paste the whole address in there and convio likes to change it for me.

</MAP>

This says “end of the map”. Without it…the browser will get confused.

<P>For an alphabetical list of countries click <A href=”/countries.html”>here</A></P>