Astro Lesson #13 : irresistable.imagemaps

First of all, what is an imagemap and why would you want to use one?

Remember retrocity's main page? When you clicked on any nebula you were immediately (well, depending on the speed of your connection ...) transported to the page of choice (well, providing retrogrrl has done her job. OUCH! She heard!)

The main page is made with separate images, jpg files in fact. Except for the picture of retrogrrl.

Can't think? Go BACK and then return here. By 'mapping' individual coordinates that we want to make as clickable links, we have combined the Space Girl and the Cadets and the Title into one image.

This is, in effect, an imagemap - nothing to do with maps apart from the coordinate bit.

who.needs.it?
By moving your mouse over the retrogrrl image, the mouse pointer becomes active at particular areas - these are the parts of the image that we have instructed the browser to display just so - these 'coordinates' contain links to other URLS - addresses. Ergo, when these active areas are clicked they behave just like any button or normal link. Clever, huh?

Of course, the graphic be any image you like - even a real map!

Why use one these newfangled things?

1. It's something different
   
   
2. It encourages more interactivity
   
   
3. It can be purty
   
   
4. it can be more convenient - one large graphic instead of lots of little ones
   
   
5. It solves the nightmare of layout
   
   
6. It can relate well to products and services, rather than visitors having to choose from a boring old list
   
   
7. We like 'em.

client-side.up
Imagemaps come in 2 flavours - client-side & server-side.

Client-Side
Please use this kind. Everything happens at the coal-face : You point, You click, the browser peruses the lovely HTML, checks out the URL you asked for and magically transports you to that very spot.

Server-Side
Yukky. Everything happens at the production plant - the server. You point, you click, the browser says, "Hey Mr Server, look where this mouse is at and tell me what you think!" Mr Server looks at the coordinates, does a little investigating , finds out the appropriate URL and says, "Pardon me, Mr Browser, I believe this is what you were looking for" and gives Mr Browser the URL. Mr Browser then transports you to the correct spot. All this is very nice and polite, however ...

This brand of imagemap needs a cooperative server, and the server needs to understand what imagemaps are

A CGI ( Common Gateway Interface) Script is required - to do all the intergalactic translating from clicking and URL-ing.

ISP's (your service providers) are not always keen to play with CGI Scripts or share their toys with just anyone.

It's hard to mess around with your imagemap as it all needs to be done thru the server - this can be a pain if you are not sure all the coordinates are hunky dorey

Last but most important, as everything is server-reliant it takes extra time to do all this to-ing and fro-ing, and can cause loading delays.

Due to all of the above, we say "Boo, Hiss!" to server-side imagemaps and will only deal with client-side imagemaps in our lesson today. (Plus it's all too hard!)

imagemaps.r.us!
Lets look at the structure of an imagemap. First thing to consider is the shape of the bits we want to become active - hotspots if you like. We get a pleasant little choice of shapes - rectangle, circle and polygon. This is up to you and most likely will be determined by what is actually in your image - if we were to use buttons we would probably go for rectangles.

Polygons are useful because they cater for irregular shapes - up to 100 coordinate points can be specified. If you choose this option, be careful to make the starting coordinates the same as the ending coordinates - otherwise the polygon will be an unfinished shape.

Default is a selection you may want to use in conjunction with any of these shapes, but is not required. It simply caters for clumsy clickers - or you may want to force visitors to go to a particular page if they do not choose the main selections - for instance, a site map, or a page that says "YOU MISSED STOOPID!". in other words, if anywhere other than the main hotspots are clicked, the default URL is loaded.

The tricky bit is determining the coordinates for these 'hotspots'. It can be done manually in a drawing program, and although we found it a bit tricky at first, it's relatively simple - keep in mind that the measurements must be in pixels, and that 0,0 is considered to be the starting point from the UPPER LEFT CORNER of any given image. It is much easier, faster and nicer to use a purpose built program. Many Web-authoring software packages have a map-editing facility built in - like Macromedia Dreamweaver - which make it ever so easy to create an imagemap.

Otherwise try Mapedit or - Try the poor person's image mapper at http://zenith.berkeley.edu/~seidel/ClrHlpr/imagemap.html . If you are using Macromedia Dreamweaver, image maps are so easy it is not funny. Simply select the image you want to 'map' and check the properties window for Map, draw hotspots and add in corresponding url's. Nevertheless, read the following to find out what's really going on behind the scenes.

image.is.the.thing!
As with most things in HTML there are handy tags to get you started:

<map name="myrtle">
<area shape="circle" coords="32,92,32" href="myrtleshouse.html">
<area shape="circle" coords="131,28,28" href="myrtlescar.html">
<area shape="circle" coords="363,82,31" href="myrtlesmule.html">
<img src="myrtlepic.gif" usemap="#myrtle" width="300" height="200
alt="Click on different bits of Myrtle to see her house, car and mule">
</map>

It's pretty simple - we call the map a name ( nyah, nyah ) - in this case 'myrtle'. We specify what shape we want to use (circle), the coordinates on the image which are clickable, and the URL those hotspots relate to. Then we tell the browser what image we are talking about - 'myrtlepic.gif', its dimensions, and include an ALT description to boot. Note the usemap inclusion - this is merely relating the image 'myrtlepic.gif' to the imagemap specifications that we called 'myrtle'. It's a cinch.

remember.the.golden.rules
Although this is all rather exciting don't forget a few important facts:

Be careful when creating this image - it will be unpleasant if it is huge and takes forever to download - no-one is going to wait around and will more than likely buzz off before they see all your hard work. (One lesson soon we will talk more on converting images for the web.)

You will need to be able to use some kind of graphics package if you are creating your very own image - Adobe Photoshop or Corel PhotoPaint are at the high end of the market, JASC Paint Shop Pro is fairly affordable. Retrogrrl uses PhotoPaint as a matter of choice.

Remember to provide for those who surf without graphics turned on, or use a text-only browser (poor fools!). They will miss the imagemap altogether and will have no means of getting around unless you provide an alternative - perhaps at the bottom of the screen.

Remember too that search engines cannot 'see' the picture in an imagemap. If this is all there is on a page, be sure to use Meta tags in the HTML document, and make use of the ALT tag in describing the image. This is also useful for text-only browsers.

Ah, so much to learn. so little time.

Go away now and compute these composings - and look forward to next time when we discuss - well, something ....