Printer-friendly page
Screen-friendly pageImage Link Example
Accessibility Features of Example
- The
altattribute of eachimgelement identifies the destination of the link that the image represents. - For more examples, see Link examples under HTML Best Practices for Navigation: Ambiguous Text Link and Ambiguous Image Link.
Example
Explore Illinois
HTML Code
<h3>Explore Illinois</h3>
<ul class="image_nav">
<li><a href="http://www.uiuc.edu/overview/explore/largestpublicuniversitylibrary.html"><img name="img1" src="images/ex_button1.jpg" alt="Largest Public University Library" border="0" height="39" width="39"></a></li>
<li><a href="http://www.uiuc.edu/overview/explore/academicdiversity.html"><img name="img2" src="images/ex_button2.jpg" alt="Academic Diversity" border="0" height="39" width="39"></a></li>
<li><a href="http://www.uiuc.edu/overview/explore/outstandingstudent.html"><img name="img3" src="images/ex_button3.jpg" alt="Outstanding Student" border="0" height="39" width="39"></a></li>
<li><a href="http://www.uiuc.edu/overview/explore/newstudentexperience.html"><img name="img4" src="images/ex_button4.jpg" alt="New Student Experience" border="0" height="39" width="39"></a></li>
<li><a href="http://www.uiuc.edu/overview/explore/campuslandmarks.html"><img name="img5" src="images/ex_button5.jpg" alt="Campus Landmarks" border="0" height="39" width="39"></a></li>
</ul>
<ul class="image_nav">
<li><a href="http://www.uiuc.edu/overview/explore/largestpublicuniversitylibrary.html"><img name="img1" src="images/ex_button1.jpg" alt="Largest Public University Library" border="0" height="39" width="39"></a></li>
<li><a href="http://www.uiuc.edu/overview/explore/academicdiversity.html"><img name="img2" src="images/ex_button2.jpg" alt="Academic Diversity" border="0" height="39" width="39"></a></li>
<li><a href="http://www.uiuc.edu/overview/explore/outstandingstudent.html"><img name="img3" src="images/ex_button3.jpg" alt="Outstanding Student" border="0" height="39" width="39"></a></li>
<li><a href="http://www.uiuc.edu/overview/explore/newstudentexperience.html"><img name="img4" src="images/ex_button4.jpg" alt="New Student Experience" border="0" height="39" width="39"></a></li>
<li><a href="http://www.uiuc.edu/overview/explore/campuslandmarks.html"><img name="img5" src="images/ex_button5.jpg" alt="Campus Landmarks" border="0" height="39" width="39"></a></li>
</ul>