Home >Web Front-end >HTML Tutorial >How to implement HTML clicking on an image to jump to a new page? (example)
How to implement HTML clicking on an image to jump to a new page? (example)
- 藏色散人Original
- 2018-09-03 16:56:10104171browse
In the process of designing and developing web pages, the need for "jump links" is the most common. I believe that for those friends who have a certain understanding of HTML, it is very simple to realize the function of clicking on an element and jumping to a new link and new page. For example, clicking a button to jump, adding a hyperlink to text, etc. can be achieved.
So even novices are familiar with the function of adding hyperlinks to text, which is to add an a tag to a certain paragraph of text. Then just add the new address you want to jump to in the a tag. Even if you don't fully understand it, you can still use it easily as long as you follow the gourd and draw the scoop.
But some novices may ask if they know how to write text, how can HTML click on the image to jump to a new pageHow to achieve this function? In fact, it is still similar to adding hyperlinks to text. This article will introduce to you how the HTML function of clicking on an image to jump to a new page is implemented?
Below we use a simple HTML code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML点击图片跳转页面示例</title>
<style>
img{width: 80px ;
height: 80px
;}
</style>
</head>
<body>
<a href="http://www.php.cn"><img src="/static/imghwm/default1.png" data-src="/test/img/2.png" class="lazy" alt="How to implement HTML clicking on an image to jump to a new page? (example)" > </a>
</body>
</html>The above code can be directly copied and pasted for local testing. The effect of my local testing is as follows:
Because it is a screenshot, I cannot see the page that will jump after clicking. However, I have personally tested it locally. Just click on the picture above. It just jumps to the new link address "php Chinese website" I specified. The new address specified after herf in the a tag. If you want to achieve the effect of clicking on the image to jump to the page, you only need to master the a tag and img tag. Here is a friendly reminder: the path of the img image must be correct.
Then use the above article to introduce HTML to click on an image to jump to a new page. I hope to be helpful.
The above is the detailed content of How to implement HTML clicking on an image to jump to a new page? (example). For more information, please follow other related articles on the PHP Chinese website!