Accessibility Extensions for Mozilla/Firefox

Campus Information Technologies and Educational Services (CITES) and Disability Resources and Educational Services (DRES)

University of Illinois at Urbana/Champaign

Image Links and Image Maps

Simple Image Links

Firefox website

 Mozilla website

Image Map: IMG and AREA elements

Source code:

<p>
  <img usemap="imagemap1" src="sample-image-map.png" alt="Sample image map of mozilla products" />
</p>

<map name="imagemap1">
  <p>
    <area href="http://www.mozilla.org/products/mozilla1.x/" shape="rect" coords="0,0,400,175" alt="Mozilla website"/>
    <area href="http://www.mozilla.org/products/firefox/" shape="rect" coords="400,0,800,175" alt="Firefox website"/>
    <area href="http://www.mozilla.org/products/camino/" shape="rect" coords="0,175,400,350" alt="Camino website"/>
    <area href="http://www.mozilla.org/products/thunderbird/" shape="rect" coords="400,175,800,350" alt="Thunderbird website"/>
  </p>
</map>

sample image map of mozilla products

Mozilla website Firefox website Camino website Thunderbird website

Image Map: IMG and A elements

Source code:

<p>
  <img usemap="imagemap2" src="sample-image-map.png" alt="Sample image map of mozilla products"/>
</p>

<map name="imagemap2">
  <p>
    <a href="http://www.mozilla.org/products/mozilla1.x/" shape="rect" coords="0,0,400,175" />Mozilla website</a>
    <a href="http://www.mozilla.org/products/firefox/" shape="rect" coords="400,0,800,175" />Firefox website</a>
    <a href="http://www.mozilla.org/products/camino/" shape="rect" coords="0,175,400,350" />Camino website</a>
    <a href="http://www.mozilla.org/products/thunderbird/" shape="rect" coords="400,175,800,350" />Thunderbird website</a>
  </p>
</map>

sample image map of mozilla products

Mozilla website Firefox website Camino website Thunderbird website

Image Map: OBJECT and AREA elements

Source code:

<p>
  <object usemap="imagemap3" data="sample-image-map.png" type="image/png">
    Sample image map of mozilla products
  </object>
</p>

<map name="imagemap3">
  <p>
    <area href="http://www.mozilla.org/products/mozilla1.x/" shape="rect" coords="0,0,400,175" alt="Mozilla website"/>
    <area href="http://www.mozilla.org/products/firefox/" shape="rect" coords="400,0,800,175" alt="Firefox website"/>
    <area href="http://www.mozilla.org/products/camino/" shape="rect" coords="0,175,400,350" alt="Camino website"/>
    <area href="http://www.mozilla.org/products/thunderbird/" shape="rect" coords="400,175,800,350" alt="Thunderbird website"/>
  </p>
</map>

Sample image map of mozilla products

Mozilla website Firefox website Camino website Thunderbird website

Image Map: OBJECT and A elements

Source code:

<p>
  <object usemap="imagemap4" data="sample-image-map.png" type="image/png">
    Sample image map of mozilla products
  </object>
</p>

<map name="imagemap4">
  <p>
    <a href="http://www.mozilla.org/products/mozilla1.x/" shape="rect" coords="0,0,400,175" />Mozilla website</a>
    <a href="http://www.mozilla.org/products/firefox/" shape="rect" coords="400,0,800,175" />Firefox website</a>
    <a href="http://www.mozilla.org/products/camino/" shape="rect" coords="0,175,400,350" />Camino website</a>
    <a href="http://www.mozilla.org/products/thunderbird/" shape="rect" coords="400,175,800,350" />Thunderbird website</a>
  </p>
</map>

Sample image map of mozilla products

Mozilla website Firefox website Camino website Thunderbird website

Image Links and Input Control

Firefox website