HTML Image Link

An image link in HTML is an image that is also a clickable link. When a user clicks on the image, they are directed to a specified URL. Image links are commonly used for adding visual interest and interactivity to web pages.

Image link in HTML

To create an image link in HTML, you can use the <img> (anchor) and <img> (image) tags together.

<a href="https://example.com"> <img src="image.jpg" alt="Description of the image"> </a>
run this source code Browser View
Description of the image

In this example, the <a> tag creates the link and the "href" attribute specifies the URL that the user will be directed to when the link is clicked. The <img> tag is nested inside the <a> tag, and the "src" attribute specifies the image file that should be displayed. The "alt" attribute provides a text description of the image for users who are unable to view it.

You can add a border to an image link using CSS.

<a href="https://example.com"> <img src="image.jpg" alt="Description of the image" style="border: 1px solid black;"> </a>
run this source code Browser View
Description of the image

In this example, the "style" attribute is added to the <img> tag to apply a border. The border is set to 1 pixel wide, solid, and black.

Remove underline from an image link

To remove the underline from an image link, you can use CSS to style the <a> tag.

<a href="https://example.com" style="text-decoration: none;"> <img src="image.jpg" alt="Description of the image"> </a>

In this example, the "style" attribute is added to the <a> tag to remove the underline. The "text-decoration" property is set to "none".

You can also use CSS to style other aspects of the image link, such as its size, position, and alignment.

Image link in a new window

To open an image link in a new window, you can use the "target" attribute.

<a href="https://example.com" target="_blank"> <img src="image.jpg" alt="Description of the image"> </a>
run this source code Browser View
Description of the image

In this example, the "target" attribute is set to "_blank", which will cause the link to open in a new browser window or tab when clicked.

The "title" attribute in an image link provides additional information about the link that is displayed as a tooltip when the user hovers over the image.

<a href="https://example.com" title="Visit Example.com"> <img src="image.jpg" alt="Description of the image"> </a>
run this source code Browser View
Description of the image

In this example, the "title" attribute is added to the <a> tag to provide a tooltip when the user hovers over the image.

You can align an image link in HTML using CSS.

<a href="https://example.com" style="display: block; text-align: center;"> <img src="image.jpg" alt="Description of the image"> </a>
run this source code Browser View
Description of the image

In this example, the "display" property is set to "block" to allow for center alignment, and the "text-align" property is set to "center" to align the image in the middle of the <a> tag.

How do you add a tooltip to an image link?

You can add a tooltip to an image link using the "title" attribute in HTML. The "title" attribute is used to provide additional information about an element, and it appears as a tooltip when the user hovers over the element.

<a href="https://example.com" title="This is a tooltip"> <img src="image.jpg" alt="Description of the image"> </a>
run this source code Browser View
Description of the image

In this example, the "title" attribute is added to the <a> tag to provide a tooltip that says "This is a tooltip" when the user hovers over the image.

You can also add a tooltip to an image link using CSS.

<a href="https://example.com" class="tooltip"> <img src="image.jpg" alt="Description of the image"> <span class="tooltiptext">This is a tooltip</span> </a>

In this example, the <a> tag is given a class of "tooltip". The <img> tag is nested inside the <a> tag as usual, and a <span> tag is added after the <img> tag. The <span> tag contains the text for the tooltip and is given a class of "tooltiptext". Here's the corresponding CSS:

.tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: white; text-align: center; padding: 5px 0; border-radius: 6px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }
run this source code Browser View


Description of the image This is a tooltip

In this CSS, the "position" property is set to "relative" for the <a> tag, and "display" is set to "inline-block" to allow the <span> tag to be positioned relative to the <a> tag. The ".tooltiptext" class has its "visibility" property set to "hidden" by default, and its "position" property set to "absolute" so that it can be positioned relative to its parent <a> tag. The tooltip is positioned below the image link using the "bottom" property and centered horizontally using the "left" and "margin-left" properties. The tooltip is hidden by default, and becomes visible when the user hovers over the image link using the ":hover" pseudo-class.

Use an image as a link without using the <img> tag

It is possible to use an image as a link without using the <img> tag in HTML. You can use CSS to apply a background image to a link and set its display property to "block" or "inline-block" to create a clickable image link.

<a href="https://example.com" class="image-link"></a>

In this example, the <a> tag is used to create a link, and it has a class of "image-link". Here's the corresponding CSS:

.image-link { display: inline-block; width: 200px; height: 200px; background-image: url("image.jpg"); background-size: cover; }

In this CSS, the ".image-link" class is used to style the link. The "display" property is set to "inline-block" to make the link display as an inline-level block container, which allows it to have a width and height. The "width" and "height" properties are set to the desired dimensions of the image link. The "background-image" property is used to set the image file as the background of the link. The "background-size" property is used to ensure that the background image covers the entire area of the link.

With this HTML and CSS, the image is displayed as a clickable link. When the user clicks on the image, they will be taken to the URL specified in the "href" attribute of the <a> tag.

How do you align an image link in HTML

To align an image link in HTML, you can use CSS to set the alignment of the containing element.

<div class="image-link-container"> <a href="https://example.com"><img src="image.jpg" alt="Image"></a> </div>

In this example, the image link is contained within a <div> element with a class of "image-link-container". The <a> tag. is used to create the link, and it contains an <img> tag with the "src" and "alt" attributes set as usual.

To align the image link to the center of the container, you can use the following CSS:

.image-link-container { text-align: center; }

In this CSS, the ".image-link-container" class is used to style the container element. The "text-align" property is set to "center" to center-align the contents of the container.

With this HTML and CSS, the image link will be centered within the container. You can adjust the alignment by changing the "text-align" property to "left" or "right" as desired.

Conclusion:

Images can be linked to other web pages or resources using the "a" tag to create an image link, and the "href" attribute to specify the target URL, allowing users to navigate to a linked page or resource by clicking on the image.






Related Topics
  1. Attributes of img Tag in HTML
  2. HTML Image Border, Align, Padding and Margin
  3. HTML Image Maps
  4. How to HTML Image Thumbnails
  1. HTML Background Images