I think you've nearly got it right. If you have a main image with the words porphyrias and porphyrins in it then you can set a rectangle over each word with coordinates, which you seem to have done. So your code is used to put a link over the words in the main image and hovering just shows a hand pointer, but not to change the main image or to put a small image over the word when hovering. My tutorial item 1 http://www.wickham43.supanet.com/tut...imagemaps.html is almost exactly the same.
You can put a small image when hovering over each word in the main image as item 2b in the above link underneath the hand pointer. I don't think you can change the whole main image, but you can put a different small image with different text over the text of each word in the main image.
Although item 2b is on my image maps page, it isn't using the image maps principle with usemap and coordinates, etc; it is in fact just images layered over a background-image. The main div has the background-image and position: relative and the normal and hover states have small divs with background-images layered over the top with position: absolute.
What I did was to have a transparent image over the place I wanted the link for the normal state because I discovered that a blank patch shows otherwise. I used the same transparent image I used for example 2a for convenience which is bigger than necessary, but I did discover that it's best to make the transparent images a bit bigger than the normal images used on hover. Since they are transparent, they don't show how big they are.
A normal image is used for the hover state. I used the same gold normal image for both links but you can separate the hover styles and use different images. Look at the head section styles for #map2 a#maleswan2 and a#femaleswan2.
I think the difference between urls being relative to the site or the document probably just means using a local url like porphyriasmainpage.html or an external url like www.yourdoamin/porphyriasmainpage.html
At present you have urls
C:\Documents and Settings\Marvin & Angelique\My Documents\Websites\Porphyrins & Porphyrias\porphyriasmainpage.html which will never work online. Get rid of C:\Documents and Settings\Marvin & Angelique\My Documents\Websites
and just link to Porphyrins & Porphyrias\porphyriasmainpage.html and then make sure that your hosting service directory structure has the same Porphyrins & Porphyrias sub-directory and that the root directory is equivalent to your websites folder.
Don't have spaces in directories/folders and filenames and I think using & is not allowed in some situations. It's better to have no spaces or to use a - like
Porphyrins-and-Porphyrias
Last edited by Wickham; 03 Dec 2008 at 03:10 AM.
Code downloaded to my PC will be deleted in due course.
WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.