[HTML element] embedded image, html embedded image
The img element allows us to embed images in HTML documents.
To embed an image, use the src and alt attributes. The Code is as follows:
Display Effect:
1. Embed images in hyperlinks
A common use of img elements is to create an image-based hyperlink with element a. The Code is as follows:
<a href="otherpage.html"> ismap alt="Products Image" width="580" height="266" /></a>
There is no difference in the way the browser displays this image. Therefore, it is important to provide users with visual prompts, indicating that a specific image represents a hyperlink. The specific method is to use CSS to better express the image content.
If you click this image, the browser will navigate to the URL specified by the href attribute of parent Element. Apply the ismap attribute to the img element to create a server-side partial response map, which means that the position clicked on the image will be appended to the URL. For example, if you click 8 pixels from the top of the image and 10 pixels from the left edge, the browser will navigate to the following address:
https://yexiaochao.github.io/show4cnblogs/otherpage.html?10,8
The following code shows the content in otherpage.html. It 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 = coords[0]; document.getElementById("yco").innerHTML = coords[1];</script></body>
You can see the effect of clicking the mouse:
The server-side partition response map usually means that the server will make a different response based on the user's click on the image area, for example, return different response information. If the ismap attribute on the img element is omitted, the coordinates clicked by the mouse are not included in the request URL.
2. Create a client partition response Diagram
We can create a client partition response map, and navigate the browser to different URLs by clicking different regions on an image. This process does not need to be guided by servers. Therefore, elements must be used to define the regions on the image and the actions they represent. The key element of the client partition response graph is map. The map element contains one or more area elements, each representing the area that can be clicked on the image.
The attributes of the area element can be divided into two types. The first type is the URL that the browser will navigate to after the image area represented by the area is clicked by the user. This class of attributes are introduced. They are similar to the corresponding attributes seen on other elements.
The second type includes more interesting attributes: shape and coords attributes. These attributes can be used to indicate the image regions that users can click. The shape and coords attributes work together. The meaning of the coords attribute depends on the value of the shape attribute, as shown in:
After introducing these elements, the Code is as follows:
<Body> <map name =" mymap "> <area href = "javascript: show_page (1) "shape =" rect "coords =" '34, 60,196,230 "alt =" product 1 "/> <area href =" javascript: show_page (2) "shape =" rect "coords =" '2014, 210 "alt =" product 2 "/> <area href =" javascript: show_page (3) "shape =" rect "coords =" '383, 60,545,230 "alt =" product 3 "/> </map> <script type =" application/javascript "> function show_page (num) {// The product is displayed in the dialog box, alert ("This is product" + num);} </script> </body>
Click the link to view the effect: http://yexiaochao.github.io/show4cnblogs/img-map.html
The display effect is the same, but when you click the corresponding product image, the corresponding product name will pop up, indicating the jump to the product page.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
