| |
 |
I prefer using text in links: the page loads faster, the user can change the font size to meet his/her visual acuity and search engines can read the link content.
Notwithstanding, you might prefer using images on the menu links, so I include the explanation in this section.
I acknowledge the images I used in the menu entries are not graphically appealing. Their sole purpose is to illustrate the procedure. |
| |
How to use images |
| |
The use of images is straightforward: just replace the text in the links ("How to use images", for instance) with an image of equivalent significance ( , for instance).
If you want a roll-over effect, do not forget to add the imgOver and imgOut triggers. The roll-over effect with the text links is achieved in the stylesheet file (see StyleSheet: DM.css)
The differences in the code are summarised below for the "How to use images" example.
| Text links |
<TD class="tabm" NOWRAP><A HREF="images.html#02">How to use images</A></TD> |
| Image links |
<TD><A HREF="images.html#02"><IMG SRC="img/dm2_01.png" BORDER="0" WIDTH="130" HEIGHT="18" ALT="" onMouseOver="imgOver(this)" onMouseOut="imgOut(this)"></A></TD> |
Which code do you prefer ? |
| |
Image benefits |
| |
Using images for the menus has the aforementioned problems. Its main benefits are perceived by web designers that want to draw more appealing menus than what is possible when using text. With images, they get:
- Increased font control
- Designers like people to see their work the way it was conceived. Therefore, they value the possibility of choosing the font face, its exact size and appearance.
With text links, the fonts vary from browser to browser and only three or four types are commonly available. When a font is not available, the browser substitutes it for a different one.
- More legible fonts
- Using images, it is possible to soften the edges of the fonts and the output is more legible. This enhancement is more apparent in serif fonts, such as the one used in this example:
.
- Graphical buttons
- In this example, I'm only presenting entries with text. However, all type of graphical signs may be designed inside an image and make it a menu entry.
- Better page layout control
- With images it is possible to design a web page to the pixel without concerns that the user might destroy the visual effects by replacing the font or the window size.
In this example I presented images with transparent backgrounds. This is not a requirement for image menus, in fact it should be used with caution, since the visible part may be confused with the background content. |
| |
Trade-offs |
| |
Weighing the pros and cons, I undoubtedly prefer the text menus. I think it serves the user better and is simpler to code and maintain.
However, for more sophisticated web designs solutions, using text links might not look sober but plain and poor.
I'm presenting you both codes so you are free to choose and make your own judgement. |
| ©2003 João Gomes Mota |
|
|