html click on the picture to jump to the picture

HTML Clicking on an image to jump to an image is a commonly used technique in web design, which allows users to jump to other web pages or images by clicking on an image. This article will introduce how to use HTML code to achieve this effect.

1. Use hyperlinks to jump to images

First, use the following code in HTML to jump to other pages through hyperlinks:

<a href="链接地址"><img  src="/static/imghwm/default1.png"  data-src="图片地址"  class="lazy" alt="html click on the picture to jump to the picture" ></a>

Among them, the href attribute is used to specify the link address to be jumped, and the src attribute in the img tag is used to specify the URL of the image.

For example, the following is an example of a hyperlink image that jumps to a Baidu page:

<a href="https://www.baidu.com"><img  src="/static/imghwm/default1.png"  data-src="图片地址"  class="lazy" alt="html click on the picture to jump to the picture" ></a>

To open a hyperlink image in a new window, you can use target="_blank " attribute, as shown below:

<a href="https://www.baidu.com" target="_blank"><img  src="/static/imghwm/default1.png"  data-src="图片地址"  class="lazy" alt="html click on the picture to jump to the picture" ></a>

2. Use JavaScript to jump to images

In addition to using hyperlinks, you can also use JavaScript to control the jump to after clicking on the image. target page. This needs to be implemented through JS code. Bind a click event to the image. When the user clicks, the page will jump through the JS code.

The sample code is as follows:

<script>
    function jumpToPage() {
        location.href = "目标页面地址";
    }
</script>
<img  src="/static/imghwm/default1.png"  data-src="图片地址"  class="lazy" onclick="jumpToPage()" alt="html click on the picture to jump to the picture" >

Among them, location.href in the JS code is used to specify the target page address to jump to.

3. Jump to another picture from a picture

If you want to jump to another picture after clicking on the picture, you can use JavaScript to achieve this.

First, you need to place two image tags in HTML and set their initial display state, as shown below:

<img  src="/static/imghwm/default1.png"  data-src="图片1地址"  class="lazy"  id="pic1" / alt="html click on the picture to jump to the picture" >
<img  src="/static/imghwm/default1.png"  data-src="图片2地址"  class="lazy"  id="pic2"   style="max-width:90%" / alt="html click on the picture to jump to the picture" >

Then, bind a click in the JS code event, and switch the display status of the two image tags in the event handler function, as shown below:

<script>
    function jumpToImage() {
        var pic1 = document.getElementById("pic1");
        var pic2 = document.getElementById("pic2");
        if (pic1.style.display == "none") {
            pic1.style.display = "inline";
            pic2.style.display = "none";
        } else {
            pic1.style.display = "none";
            pic2.style.display = "inline";
        }
    }
</script>
<img  src="/static/imghwm/default1.png"  data-src="图片1地址"  class="lazy" onclick="jumpToImage()" alt="html click on the picture to jump to the picture" >

Run the above code, when the image is clicked, it will be displayed between the two image tags. switch between.

Summary:

Using hyperlinks and JavaScript, image jumps in web pages can be achieved. We can choose the most appropriate method to achieve image jumps based on actual needs. Whether using hyperlinks or JavaScript, you can achieve simple and effective image jumps.

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