Designing Iconic Hyperlink for a Web Page

Foreword: In this article, we are looking for a hyperlink, consisting of an image with corresponding text below it.

By: Chrysanthus Date Published: 25 Jan 2016

Introduction

As we strive to design the same web page for smartphones and desktops, iconic hyperlinks become more attractive. Desktops have icons that when clicked, will start a program. In this article, we are looking for a hyperlink, consisting of an image with corresponding text below it. When you click the hyperlink, a resource is brought (downloaded) to the browser (web page).

Straightforward Image and Text
A hyperlink, whose first content is an image and second content, text is:

    <a href="www.site.com/page.htm"><img src="smallImg.jpg">The Resource Link</a>

The image tag is within the a element tags. The text is also next to it, within the a element tags. In the display, you will see the image followed by the text on its right. Both components form the hyperlink.

Forcing text below the Image
The above code is not the conventional design. In the conventional design, the text is below the image. It is not difficult to achieve this: Make the a element, inline-block display of width say, 60px . Let the image width be about, 50px, and centered in the a element. Do not worry about the height; so that words (phrases) should wrap downward. The spaces on the left and right of the image inside the a element should be smaller than the smallest word in the text. Under this condition, the text is forced to wrap below the image, both still forming the hyperlink. The following shows the CSS and a element code (try the code):

    <style type="text/css">
        a {display:inline-block; width:60px; text-align:center}
        img {width:60px}
    </style>

    <a href="www.site.com/page.htm"><img src="smallImg.jpg">The Resource Link</a>

The whole rectangle for the a element is the hyperlink.

Finalizing Design
In the above code, text has been forced to wrap downward because of the limited width of the a element. The HTML single tag wbr element is used to indicate to the browser, where text can be wrapped (the browser does not have to respect that). For completeness, it is good to place this element where you want text to wrap downward. Read and try the following code:

    <style type="text/css">
        a {display:inline-block; width:60px; text-align:center}
        img {width:60px}
    </style>

    <a href="www.site.com/page.htm"><img src="smallImg.jpg">The <wbr>Resource <wbr>Link</a>

The code is complete from the point of view of functioning; but it does not really look good. Today, hyperlink texts are not underlined (when inactive).  The following is the above code including styles to remove the default underlining:

    <style type="text/css">
        a {display:inline-block; width:60px; text-align:center}
        img {width:60px}
        a:link    {color:darkblue; text-decoration: none}    /* unvisited links */
        a:visited {color:mediumblue; text-decoration: none}   /* visited links   */
        a:hover   {color:blue; text-decoration: underline} /* user hovers     */
        a:active  {color:mediumpurple; text-decoration: underline}   /* active links    */
    </style>

    <a href="www.site.com/page.htm"><img src="smallImg.jpg">The <wbr>Resource <wbr>Link</a>

At this point, the code can be considered complete. However, you may want to give the text a different style (e.g. background color). In this case, place the text in the span element; and give the span element the style. The following code illustrates this:

    <style type="text/css">
        a {display:inline-block; width:60px; text-align:center}
        img {width:60px}
        a:link    {color:darkblue; text-decoration: none}    /* unvisited links */
        a:visited {color:mediumblue; text-decoration: none}   /* visited links   */
        a:hover   {color:blue; text-decoration: underline} /* user hovers     */
        a:active  {color:mediumpurple; text-decoration: underline}   /* active links    */
        span {background-color:lightgray}
    </style>

    <a href="www.site.com/page.htm"><img src="smallImg.jpg"><span>The <wbr>Resource <wbr>Link</span></a>

The code is now finalized.

That is it for this article.

Chrys

Broad Network

Related Articles

Designing Iconic Hyperlink for a Web Page

Introduction

Related Links

Comments