Image Hyper Link

Anchor Element and Its Important Attributes:

An Anchor Element with Image Element is used to create a Image Hyper-link.
Syntax: <a attribute="value"><img src="any source" alt="img_text" /></a>

Important Attributes:

1. href: takes the URL of the target id as its value.
2. target: describes whether the linked document should get opened in the same or new tab, parent frame or child frame or in a new window.
3. name: takes any valid group of alphanumeric characters as its value.

Examples:

Following are some examples which illustrate how to use an Anchor Element to create a:

1. Image Hyperlink Targeting a Webpage/Document
2. Image Hyperlink Targeting a Section with in a Same Webpage
3. Image Hyperlink Targeting a Section in a Different Webpage

Image Hyperlink Targeting a Webpage/Document:

Exemplary Code:

<a href = "https://www.facebook.com/webdevelopmentwithkhuram/"><img src="W3_Logo_3.png" width="150" height="150"/></a>
                

Example Result:

Explanation of the Example:

1. Anchor Element containing Image Element ,with in it, is used to create an Image Hyperlink.
2. The URL of the target document is given as a value of the href attribute.
3. The picture to be displayed is put in between <a> and </a> tags using <img /> Element.

Image Hyperlink Targeting a Section with in a Same Webpage

Exemplary Code:

<a href="back_to_top"></a> 
<nav>
    <a href="#target_3"><img src="W3_Logo_3.png" alt="" height="30" width="30"/></a>
    <a href="#target_4"><img src="W3_Logo_3.png" alt="" height="30" width="30"/></a>
</nav>
<p>
    This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.
</p>
<a name="target_3"></a>
<p><h2> This is target 3</h2></p>
<a href="#back_to_top">Top</a>
<p>
    This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.
</p>
<a name="target_4"></a>
<p><h2> This is target 4</h2></p>
<a href="#back_to_top">Top</a>

Example Result:

|

This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplar text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.

This is target 1

Top
This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.

This is target 2

Top

Explanation of the Example:

1. Anchor Element is used to set the "target 1", "target 2" and " back_to_top" targets.
2. name attribute of the Anchor Element takes the values "back_to_top", "target_1" and "target_2" to set the targets.

3. href attribute of the Anchor Element takes names("target 1", "target 2" and " back_to_top") of the target preceded by a '#' symbol as a url.
4. The text to be displayed (such as Home, About Us, Help, Download) is put in between <a> and </a> tags for the links.
5. No text is displayed in between the <a> and </a> tags where the targets are set and the href attribute is not used.

Note: Hash symbol '#' in href indicates that the target is in internal link and can be in the same or in a different document.

Image Hyperlink Targeting a Section in a Different Webpage:

Exemplary Code:

<a href="back_to_top"></a> 
<nav>
    <a href="#target_3"><img src="http://localhost/Blogger/Hyper_Link.html#target_1" alt="" height="30" width="30"/></a>
    <a href="#target_4"><img src="http://localhost/Blogger/Hyper_Link.html#target_2" alt="" height="30" width="30"/></a>
</nav>
<p>
        This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.
</p>
<a name="target_3"></a>
<p><h2> This is target 3</h2></p>
<a href="#back_to_top">Top</a>
<p>
        This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.
</p>
<a name="target_4"></a>
<p><h2> This is target 4</h2></p>
<a href="#back_to_top">Top</a>

Example Result:

|

This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.

This is target 3

Top
This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.

This is target 4

Top

Explanation of the Example:

1. Anchor Element is used to create a Text Hyperlink.
2. The URL of the target document is given as a value of the href attribute.
3. The text to be displayed (such as Home, About Us, Help, Download) is put in between <a> and </a> tag.