How to set image link in html (two methods)

In the process of web page production, it is often necessary to insert pictures into the web page. Sometimes in order to increase the click-through rate of an image, we need to set the image as a link. Click on the image to enter the relevant page. So how to set image links in HTML? This article will introduce you to two methods.

Method 1: Use the a tag

In HTML, use the a tag to set a link. If we need to set an image link, we only need to nest an a tag in the img tag. The specific steps are as follows:

1. Insert picture

First, insert the picture to be used in the HTML document, the method is as follows:

<img  src="/static/imghwm/default1.png" data-src="图片路径" class="lazy" alt="How to set image link in html (two methods)" >

Among them, src The attribute is the image path, which can be a relative path or an absolute path; the alt attribute is the description information of the image, which is used to display it to the user when the image cannot be loaded.

2. Nesting a tag

The method of nesting a tag is as follows:

    <img  src="/static/imghwm/default1.png" data-src="图片路径" class="lazy" alt="How to set image link in html (two methods)" >

The href attribute is the link address, which can be an internal link or external link.

After completing the above two steps, the image will be wrapped in a tag, thus achieving the effect of image link.

Method 2: Use JavaScript

Using JavaScript can achieve more flexible and diverse image link effects. For example, we can display corresponding prompt information when hovering the mouse over the picture, or pop up a modal box when clicking on the picture, etc. The specific implementation method is as follows:

1. Insert picture

Same as method one, first you need to insert the picture to be used in the HTML document.

2. Writing JavaScript code

The method of writing JavaScript code is as follows:

<script>        
    function linkTo(){            
        window.location.href="链接地址";        
    }    
</script>

The linkTo() function is the jump event triggered when the picture is clicked , the window.location.href attribute specifies the link address to be jumped.

3. Nested img tag

<img  src="/static/imghwm/default1.png" data-src="图片路径" class="lazy" alt="How to set image link in html (two methods)" >

The above code realizes the effect of clicking on the image to jump to the specified page.

Summary

The above are two ways to set image links in HTML. The first method is relatively simple and suitable for beginners; the second method can achieve more flexible and diverse effects, but requires familiarity with the basic syntax of the JavaScript language. I hope this article can help you achieve the effect of image links and improve the performance of your website.

The above is the detailed content of How to set image link in html (two methods). For more information, please follow other related articles on the PHP Chinese website!