The img element allows us to embed images in HTML documents.
To embed an image, you need to use the src and alt attributes, the code is as follows:
<img src="../img/example/img-map.jpg" />
Display effect:
1 Embed the image in the hyperlink
A common usage of the img element is to create an image-based hyperlink in combination with the a element, the code is as follows:
<a href="otherpage.html"> <img src="../img/example/img-map.jpg" ismap /></a>
The way the browser displays this image is no different. Therefore, it is important to provide users with visual cues that a particular image represents a hyperlink. The specific approach can be to use CSS, which is better to express it in the image content.
If you click on this image, the browser will navigate to the URL specified by the href attribute of the parent element a. Applying the ismap attribute to the img element creates a server-side branch response map, which means that the locations clicked on the image will be attached to the URL. For example, if the click location is 8 pixels from the top of the image and 10 pixels on the left edge, the browser will navigate to the following address:
https://yxiaochao.github.io/show4cnblogs/otherpage.html?10,8
The following code shows the content in otherpage.html, which contains a simple script to display the coordinates of the click position:
<body><p>The X-coordinate is <b><span id="xco">??</span></b></p><p>The Y-coordinate is <b><span id="yco">??</span></b></p><script type="application/javascript"> var coords = window.location.href.split('?')[1].split(','); document.getElementById("xco").innerHTML = coordinates[0]; document.getElementById("yco").innerHTML = coordinates[1];</script></body>The way the browser displays this image is no different. Therefore, it is important to provide users with visual cues that a particular image represents a hyperlink. The specific approach can be to use CSS, which is better to express it in the image content.
If you click on this image, the browser will navigate to the URL specified by the href attribute of the parent element a. Applying the ismap attribute to the img element creates a server-side branch response map, which means that the locations clicked on the image will be attached to the URL. For example, if the click location is 8 pixels from the top of the image and 10 pixels on the left edge, the browser will navigate to the following address:
https://yxiaochao.github.io/show4cnblogs/otherpage.html?10,8
The following code shows the content in otherpage.html, which contains a simple script to display the coordinates of the click position:
<body><p>The X-coordinate is <b><span id="xco">??</span></b></p><p>The Y-coordinate is <b><span id="yco">??</span></b></p><script type="application/javascript"> var coords = window.location.href.split('?')[1].split(','); document.getElementById("xco").innerHTML = coordinates[0]; document.getElementById("yco").innerHTML = coordinates[1];</script></body>You can see the effect of mouse click:
Server-side partition response graph usually means that the server will respond differently according to the user's click area on the image, such as returning different response information. If the ismap attribute on the img element is omitted, the coordinates of the mouse click will not be included in the request URL.
2 Create a client partition response diagram
We can create a client partition response map, and let the browser navigate to different URLs by clicking on different areas on an image. This process does not require booting through the server, so elements are used to define the individual areas on the image and the behavior they represent. The key element of the client partition response graph is a map, which contains one or more area elements, each representing an area on the image that can be clicked.
The properties of the area element can be divided into two categories. The first category deals with the URL that the browser will navigate to after the image area represented by the area is clicked by the user. The following figure introduces this type of attribute, which is similar to the corresponding attributes seen on other elements.
The second category contains more interesting attributes: shape and coords attributes. These properties can be used to indicate each image area that the user can click on. The shape and coords properties work together. The meaning of the coords attribute depends on the value of the shape attribute, as shown in the figure below:
After introducing these elements, give an example, the code is as follows:
<body> <img src="../img/example/img-map.jpg" ismap usemap="#mymap" /><map name="mymap"> <area href="javascript:show_page(1)" shape="rect" coords="'34,60,196,230" /> <area href="javascript:show_page(2)" shape="rect" coords="'210,60,370,230" /> <area href="javascript:show_page(3)" shape="rect" coords="'383,60,545,230" /></map><script type="application/javascript"> function show_page(num){ //Show the product through the dialog box to indicate the corresponding jump page alert("This is product "+num); }</script></body>The display effect is the same, except that when you click on the corresponding product picture, the corresponding product name will pop up, indicating the jumped product page.
The above article Javascript basics_simple implementation of embedded images is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.