The series on this page illustrated using a software package called "Happy Lad Image Mapper" to build my image map! ->
Later I will give you references to other image map utilities!
Page 2
To turn this into an image map, we must identify the active location for each of the three images.
For this tutorial, I am using a simple utility called Happy Lad Image Mapper.
There are 8 steps, so go ahead and scroll down and review the steps.
When you are finished, we will proceed to Page 3 to see how to include the code in a Web Gem!
 |
Step 1
Start up the utility and open up the image you wish to use for your image map
|
 |
Step 2
<- Note the 3 blue tool bar icons
I clicked in the blue rectangle symbol and then highlighed the red news area
|
 |
Step 3
A properties box appears, and I fill in what should happen when someone clicks inside the red News area
If you are linking to an external web site, like I amn here, be sure to include the "http://" prefix!
|
 |
Step 4
I then draw a similar box around the Sports section
|
 |
Step 5
And I fill in the information for the web page associated with the Sports section
|
 |
Step 6
I then highlight the yellow weather area of the image
|
 |
Step 7
I enter the information for the link to the weather web sie I wish to use.
|
<HTML>
<IMG SRC = "sampleimagemap.JPG" WIDTH = "427" HEIGHT ="355" BORDER="0" USEMAP ="#imagemap1">
<MAP NAME ="imagemap1">
<AREA SHAPE="RECT" COORDS="9,9,210,134" HREF="http://www.cnn.com" ALT="CNN News" OnMouseOut="window.status=''; return true" OnMouseOver="window.status='News from CNN 24 hours a day!'; return true" TARGET="_blank">
<AREA SHAPE="RECT" COORDS="98,129,265,223" HREF="http://www.espn.com" ALT="ESPN Sports News" OnMouseOut="window.status=''; return true" OnMouseOver="window.status='Sports on ESPN'; return true" TARGET="_blank">
<AREA SHAPE="RECT" COORDS="200,213,411,340" HREF="http://www.weather.con" ALT="The Weather Channel" OnMouseOut="window.status=''; return true" OnMouseOver="window.status='Weather reports at your fingertips!'; return true" TARGET="_blank">
<!---this image map courtesy of Phil Redmond--->
</MAP>
<HTML>
|
Step 8
Once I've finished defining all the areas of my image, I click on File -> Export to File, and save the generated command to a file.
For Trellix users, we will next cut and paste this code into a 'Build your own web gem'.
|
Let's proceed to Page 3 ->