MMDT1021 Chapter 7 Notes - page 4

Using Images to Label Links

Image Only.
Code Result
<a href="Chapter7-5.htm"><img src="images/RightHand2.gif" width="100" height="54" alt="" border="0" align="center"></a>

 

Image and Text.
Code Result
<a href="Chapter7-5.htm"><img src="images/RightHand2.gif" width="100" height="54" alt="" border="0" align="center">MMDT1021 Chapter 7 Notes - page 5</a> MMDT1021 Chapter 7 Notes - page 5

 

Image and Text Separately.
Code Result
<a href="Chapter7-5.htm"><img src="images/RightHand2.gif" width="100" height="54" alt="" border="0"></a>
<a href="Chapter7-5.htm">MMDT1021 Chapter 7 Notes - page 5</a>
MMDT1021 Chapter 7 Notes - page 5
When linking images and text separately, it is a good idea to double check your work that both links point to the same place.  It sure would be confusing to a web site visitor if the clicking on the picture or the text did not take you to the same place.

 

Dividing an Image into Clickable Regions

Use your favorite graphics software to map the points for your clickable regions. Then setup your client-side, CERN, or NCSA image information.

 

Creating a Client-Side Image Map

Client-side image mapping is the most common image mapping technique in use today.  The client is your local computer running a browser, such as Internet Explorer or Netscape.  Your browser has to determine the actual mapping based on the map information given in the html code.

The code for the image map is embedded into the HTML page.
Code Result
<img src="images/12345L.png" border="0" usemap="#12345L"
  width="150" height="25">

<map name="12345L">
  <area shape="rect" coords="0,0,25,25"
    href="/mmdt1021/chapter7/Chapter7-1.htm" alt="Page 1">
  <area shape="rect" coords="25,0,50,25"
    href="/mmdt1021/chapter7/Chapter7-2.htm" alt="Page 2">
  <area shape="rect" coords="50,0,75,25"
    href="/mmdt1021/chapter7/Chapter7-3.htm" alt="Page 3">
  <area shape="rect" coords="75,0,100,25"
    href="/mmdt1021/chapter7/Chapter7-4.htm" alt="Page 4">
  <area shape="rect" coords="100,0,125,25"
    href="/mmdt1021/chapter7/Chapter7-5.htm" alt="Page 5">
  <area shape="rect" coords="125,0,150,25"
    href="/mmdt1021/chapter7/LabAssignment7.htm"
    alt="Lab Assignment 7">
  <area shape="default" nohref>
</map>

 Page 1 Page 2 Page 3 Page 4 Page 5 Lab Assignment 7
An example of this type of a client-side image map can be found at http://www.kmacmn.com.  Click on the bags.  Another example can be found at http://www.hometownmn.com.  Click on the agents.

 

Creating a Server-Side Image Map

Server side image mapping was a technology that was used when web browsers did not yet have the capability of supporting client-side image maps. (Pre Netscape 3.0).  The server determined the actual mapping.  Typically server-side image maps are not used much anymore.

The code for the server-side image map is stored in an external file on the server. This type of image map uses either CERN (IIS) or NCSA (Apache) format.  The server that this web site (ridgewater.net) is running on uses NCSA (Apache).  (Each finger on the image below takes you to a different page.)

If you look at the status bar at the bottom of your browser, you will notice coordinate pairs changing when rolling over the image in the following example.
Code Result
<a href="examples/RightHand2.map"><img src="images/RightHand2.gif" width="100" height="54" border="0" ismap></a>