As is the case every week, we learnt a lot of things in today's session. The best one for me was image mapping - I had seen this being used on a few sites but was not sure what it is called or how it was done. But having done it I can say with confidence that is is fairly straight forward. You just have to follow the logical steps, If you try to change the order it wont let you; and of course the feature wont work.
Here's a screenshot of my home page with an image of the 6 Standards of Teaching Profession. The area on the picture allocated to each standard acts as a link to a new page which has more details for THAT standard. To go to the page for standard 3, you click anywhere in the area of "Professional Relationships"on the image and this takes you there. Its that simple!
Getting this effect is not too hard either.
Step 1 - Map the image with (x,y) coordinates using pixlr as below. Notice the "plus" at the top left corner of the gold biscuit picture - the coordinates of the point are displayed at the top right corner of the screen. By moving the plus around the boundary we can get the coordinates for the entire boundary. Be aware that the boundaries should not overlap - potential problems!!
Step 2 - Enter the coordinates of the boundary and the corresponding url into the code (HTML)
For example: <map name="map1">
<area coords="162,58,254,15,333,4,440,16,533,56,422,225,346,207,272,225" href="https://sites.google.com/a/tamaki.ac.nz/mh-stp/home/stp-1" shape="poly">
<area coords="534,62,425,229,471,281,484,343,688,344,676,251,647,181,606,125" href="https://sites.google.com/a/tamaki.ac.nz/mh-stp/home/stp-2" shape="poly">
<area coords="688,351,485,347,473,409,417,467,518,642,590,590,655,497,680,428" href="https://sites.google.com/a/tamaki.ac.nz/mh-stp/home/stp-3" shape="poly">
</map>
Step 3 - SAVE, ofcourse you want to check that it looks fine and also that it actually works. That's it - done! finito!!
Here's a screenshot of my home page with an image of the 6 Standards of Teaching Profession. The area on the picture allocated to each standard acts as a link to a new page which has more details for THAT standard. To go to the page for standard 3, you click anywhere in the area of "Professional Relationships"on the image and this takes you there. Its that simple!
Getting this effect is not too hard either.
Step 1 - Map the image with (x,y) coordinates using pixlr as below. Notice the "plus" at the top left corner of the gold biscuit picture - the coordinates of the point are displayed at the top right corner of the screen. By moving the plus around the boundary we can get the coordinates for the entire boundary. Be aware that the boundaries should not overlap - potential problems!!
Step 2 - Enter the coordinates of the boundary and the corresponding url into the code (HTML)
For example: <map name="map1">
<area coords="162,58,254,15,333,4,440,16,533,56,422,225,346,207,272,225" href="https://sites.google.com/a/tamaki.ac.nz/mh-stp/home/stp-1" shape="poly">
<area coords="534,62,425,229,471,281,484,343,688,344,676,251,647,181,606,125" href="https://sites.google.com/a/tamaki.ac.nz/mh-stp/home/stp-2" shape="poly">
<area coords="688,351,485,347,473,409,417,467,518,642,590,590,655,497,680,428" href="https://sites.google.com/a/tamaki.ac.nz/mh-stp/home/stp-3" shape="poly">
</map>
No comments:
Post a Comment