When is an image map, not an image map? When it is an HTML image map of course. Actual image maps are single images with hotspots. The hotspots navigate the visitor to different pages or
areas. Creating an actual image map requires a good image editor software and entering a number of different co-ordinates or using an actual image map software. Instead of all those co-ordinate settings, you can utilize the image editor in a new way. You will need a
good understanding of images, links, and alignments.
Question : Which one of the following is an image map?
Answer : Neither of them. They are both a series of 5 images placed together. Here they are in an exploded view :
Here is the code used to place them together and adding in links to make them "active" :
The <br> command makes the code go to the next available line without a space. Using a <P> tag set would create an exploded view as seen in the second set of above.
Some sites may want to have a navigation bar going across the bottom or top of the screen instead of down.
This can easily be done as well. Here is an example using the same 5 images from the first example.
Here is the coding done for it :
Looks a bit unorganized doesn't it? If the example code box was long enough, all of that coding would be on one LONG line. That is because I left out all of the spaces and returns between the individual links. Why? Normally, spacing does not affect what the coding does on the web page, but in some cases, it makes all the difference. This happens to be one of those cases. If you have a space or return between the link tags, a space is going to appear between the images and you will loose the image map effect. Without the spaces and returns, the images are placed side by side. The other part taken out is all of the BR tags.
Using a TABLE can help piece together a fake image map. It can also help you control the general alignment of it on the page.
Question : Which one of the following is an image map?
|
|
Answer : Neither of them. They are both a series of 5 images placed together. Here they are in an exploded view :
|
|
Here is the code used to place them together and adding in links to make them "active" :
|
<a href="page1.html"><img src="level1.gif" border="0"></a><br> <a href="page2.html"><img src="level2.gif" border="0"></a><br> <a href="page3.html"><img src="level3.gif" border="0"></a><br> <a href="page4.html"><img src="level4.gif" border="0"></a><br> <a href="page5.html"><img src="level5.gif" border="0"></a> |
The <br> command makes the code go to the next available line without a space. Using a <P> tag set would create an exploded view as seen in the second set of above.
Some sites may want to have a navigation bar going across the bottom or top of the screen instead of down.
This can easily be done as well. Here is an example using the same 5 images from the first example.
Here is the coding done for it :
| <a href="page1.html"><img src="level1.gif" border="0"></a><a href="page2.html"><img src="level2.gif" border="0"></a><a href="page3.html"><img src="level3.gif" border="0"></a><a href="page4.html"><img src="level4.gif" border="0"></a><a href="page5.html"><img src="level5.gif" border="0"></a> |
Looks a bit unorganized doesn't it? If the example code box was long enough, all of that coding would be on one LONG line. That is because I left out all of the spaces and returns between the individual links. Why? Normally, spacing does not affect what the coding does on the web page, but in some cases, it makes all the difference. This happens to be one of those cases. If you have a space or return between the link tags, a space is going to appear between the images and you will loose the image map effect. Without the spaces and returns, the images are placed side by side. The other part taken out is all of the BR tags.
Using a TABLE can help piece together a fake image map. It can also help you control the general alignment of it on the page.
