The link is one of the most fundamental components of any website. In fact, without links, it would be virtually impossible to create websites.
At a basic level, creating links is quite simple and straightforward. Insert the anchor (<a>) tag, and use its href attribute to point to the destination.
For example:
<a href="other-page.html"> Click Here </a>
To create an image link, just add the image tag (<img> ) in between those <a> tags like this:
<a href="other-page.html"> <img src="button.jpg" alt="click here" > </a>
The href attribute points to the destination page.
The alt tag gives a text description to the image.
22934
Opening the link in new tab/window
When you click on the image link created above, it opens the link in the same tab. This is the default behavior of all links. However, what if you want the image link to open in a separate tab or window?
Well, you change the link’s target attribute. The “target” is used to tell the browsers where to open the link. This attribute is inserted as follows:
<a href="#" target="window name">
The “window name” determines where a link is opened. To open the link in a new window or tab, use the value “_blank”.
Therefore, to make our image link to open its href document in a new window or tab, we add the target attribute as follows:
<a href= "image-link.html" target="_blank"> <img src="button.jpg" alt="click here" /> </a>
Styling A Image Link Using CSS
Once you insert an image link on a webpage, you often want to style it up. Styling an image link using CSS is actually simple.
The only challenge is selecting the specific image. One easy way to do this by assigning a class or ID to the tag.
Since we are styling the <img> inside <a> we can use the descendant selector. For instance, to change the size and border of the link image, we can use the following style:
a > img {
width: 150px;
border: 2px solid black;
}
Creating A Hover Style For The Image Link
When styling links, it is customary to create a slightly different look for the hover state of the link. This look is meant to give visitors a visual cue that they are now hovering over the link. This is typically done using the CSS :hover pseudo-class.
To create a hover for an image link, the approach is the same. You simply style the :hover pseudo-class for your selector. For instance, to add a hover effect to our image link above, we simply create a rule for the selector a:hover > img
To illustrate this, let’s create a rule which changes the image when you hover over it. We’ll do this by using the “opacity” property. The effect will look great. Here’s the CSS hover rule:
a > img:hover{
opacity: 0.5;
}
See the effect below:
22934