Image Mapping
An image map is an image that contains numerous hot spots that might result in a different URL (or webpage) being loaded, depending on where the user clicks. This challenge has several levels of difficulty, some of which might require investigation through a web search (Try http://w3schools.com/).
To create an image map, you must put some special code into the <img> tag. Here is an example:
To create an image map, you must put some special code into the <img> tag. Here is an example:
The code above will produce something like this, with the clickable area around the horse:
First, you must use the usemap attribute to identify another location within the body tag where the image map is defined. Note the use of the hashtag (#) before the keyword identifier.
Then later on within the <body> tag, you must have a paired <map> </map> tag section which describes the shape and location of the clickable part of the image as well as the link to which the click will take the user. The link is identified with an href attribute.
Possible shapes and the coordinate values associated with each one are listed in the table below:
Then later on within the <body> tag, you must have a paired <map> </map> tag section which describes the shape and location of the clickable part of the image as well as the link to which the click will take the user. The link is identified with an href attribute.
Possible shapes and the coordinate values associated with each one are listed in the table below:
YOUR TASK
1. Create an image that, when clicked, will open in a larger size on a page by itself.
2. Create an image that, when clicked in a particular area of the image, will open in another page which displays additional information about the image.
3. Create an image that has multiple (2-3) different clickable areas, each taking the user to separate pages which display relavant information.
Be persistent...and good luck!
1. Create an image that, when clicked, will open in a larger size on a page by itself.
2. Create an image that, when clicked in a particular area of the image, will open in another page which displays additional information about the image.
3. Create an image that has multiple (2-3) different clickable areas, each taking the user to separate pages which display relavant information.
Be persistent...and good luck!