Technique: Floated image with text-link

This rather simple HTML technique produces a floated discretionary image link, in addition to an in-line text link within running text. The technique works by including, within the scope of a single anchor link (A) element, not only the desired link text, but also an IMG specifying an ALIGN attribute of LEFT or RIGHT as the case may be. The benefits, relative to having separate links to the same destination from the image, and from the in-line text, are several. Let me stress the point that this technique is for an image whose specific purpose is to offer an alternative link to a resource which is anyway linked from the running text. The image is meant to be visually intuitive to those who are browsing in graphical mode, but would represent a pointless distraction to a text-only reader.

Even though ALT="" has been used in order to make the image disappear for regular text-mode readers, some text-mode browsers offer the reader the option to insist on having links for images (e.g the "*" keycommand in Lynx). The author may (and "should", if appropriate to the content) additionally supply TITLE and LONGDESC attributes for those who can use them. Support for these in mainstream browser/versions is far from ideal, but that shouldn't deter us from playing our part in the "WWW concordat": I'm assured that there are assistive-technology implementations that can make good use of them.

The technique uses only HTML, but doesn't seem to impact adversely on page styling being done in CSS.


The small picture shows a green Academic cap, a so-called "mortarboard".


||Up|| | |RagBag|About the author||