imagemaps

Link parts of the same picture to different links: media type="custom" key="4470105" code Click on one of the students to view their eportfolio:     code Here's another. Move the mouse over different parts (head, arms, torso, legs) of the picture and click to view further information. media type="custom" key="4477384" code Click on any part of the body to view close up        code To make image maps you will first of all need to know the size (in pixels) of your image and the parts in your image. Use something like photoshop or preview (Mac) to find this out, but you can also use trial and error if you know approximates. 1. Copy the above code and paste into embed widget 'Other Html' box. 2. Put the source of your image where you see 'img src'. In the top photo I used an image in my own wikispace and in the second example I used an image from the internet. Remember to leave the code space/showimage code if you are using an image from wikispaces. 3. If you are making the second image map (the body) that links to images, you should upload the images you are going to use. 4. Enter your own links - either links to pages as in the first example or links to images as in the second. 5. You now need to enter the co-ordinates. The first example has 2 defined areas, and the second example has 5. You will see they start with 'area shape'. You can make as many as you wish. The co-ordinates are worked out as follows.

0,0,135,106 means 0 = distance from the left edge of the image 0 = distance from the top of the image for the left hand upper corner 135 = distance from the right edge of the image 106 = distance from the top of the image for the right hand lower corner

circles (185, 183, 8) 185 = centre point on the x axis 183 = centre point on the y axis 8 = radius of the circle

polygons - triangle (100, 100, 200, 200, 200, 00 100, 100 = distance from the top of the image - top point of the triangle 200, 200 = distance from the right of the image - bottom right of the triangle 200, 0 = distance from the left of the image - bottom left of the triangle

6. Now just save and you will have your areas of your image defined and linking to different places.