html image click to jump

In web design, it is often necessary to add links to pictures so that users can jump to a specified page or link address by clicking on the picture. It is very simple to implement this function in HTML language. In this article we will introduce how to use HTML to write image click jumps.

First, we need to use the img tag in HTML to insert an image. The sample code is as follows:

<img  src="/static/imghwm/default1.png"  data-src="图片地址"  class="lazy" alt="html image click to jump" >

The src attribute specifies the path or link address of the image. For example:

<img  src="/static/imghwm/default1.png"  data-src="https://picsum.photos/200"  class="lazy" alt="html image click to jump" >

This will insert a 200x200 random picture from picsum.photos into the web page.

Next, we need to add a link to this image. The link function can be implemented using the a tag in HTML. We can apply the a tag on the img tag. The sample code is as follows:

<img  src="/static/imghwm/default1.png"  data-src="图片地址"  class="lazy" alt="html image click to jump" >

Among them, the href attribute specifies the link address, for example:

<img  src="/static/imghwm/default1.png"  data-src="https://picsum.photos/200"  class="lazy" alt="html image click to jump" >

This will add a link to the image, and clicking on the image will jump to the Baidu homepage.

But what if we want this link to open in a new window? This function can be achieved using the target attribute. The sample code is as follows:

<img  src="/static/imghwm/default1.png"  data-src="图片地址"  class="lazy" alt="html image click to jump" >

Among them, the target attribute specifies the window in which the link should be opened. Here, "_blank" is used to indicate opening the link in a new window, for example:

<img  src="/static/imghwm/default1.png"  data-src="https://picsum.photos/200"  class="lazy" alt="html image click to jump" >

This will add a link to the image and open the Baidu homepage in a new window.

In addition to inserting the img tag in the a tag to realize image click jump, it can also be achieved through CSS styles. Use the background-image attribute in CSS to insert an image into the background of the element, and then apply the a tag to implement the link. The sample code is as follows:

<a href="链接地址" target="_blank" style="background-image: url(图片地址); display: block; width: 宽度; height: 高度;"></a>

Among them, the style attribute specifies the style of the link, including the background image. , width and height, etc., for example:

<a href="https://www.baidu.com" target="_blank" style="background-image: url(https://picsum.photos/200); display: block; width: 200px; height: 200px;"></a>

This will insert a 200x200 random picture into the web page. After clicking, the Baidu homepage will open in a new window.

In summary, to achieve image click jump, you need to use the a tag and img tag in HTML to achieve the jump by adding the link address and target attribute. This can also be achieved using the background-image property in CSS. This function is very critical for web design. I hope this article can help you complete web design better.

The above is the detailed content of html image click to jump. For more information, please follow other related articles on the PHP Chinese website!