Final HTML Technical Demonstration: Image Maps
Our final week of HTML demonstrations has gave me some valuable knowledge to use in my individual webpage and group webpage for the Unsung Music Festivals project. Image Maps allow the user to place links within an image, these links could be used externally and internally.
This HTML coding is very useful in terms of background image interaction, my website could include an image of a festival crowd with stages and the stages could be 'clickable' links.
For this technical demo we used an image of the solar system, the lesson required us to form links over each planet in the image. Using the new found code; 'AREA SHAPE' I found the objective of the lesson quite simple.
First off, the code I used within the standard HTML body coding used was:
<BODY> <MAP NAME="MyMap"> <AREA SHAPE"Rect" HREF="http://www.jamiemacaffer.com" COORDS="425,183,617,395">
<IMG USEMAP="#MyMap" SRC="Planets.jpg" BORDER="0">
</MAP>
</BODY>
The coding uses coordinates found with Photoshop on the solar system image, Units & Rulers tool was used to locate the coordinates of each selected planet for both the top left X & Y followed by the bottom left.
Although this session seems very complicated, when the new code was understood the process of using image maps is now a breeze. I look forward to likely using this in my webpages.