To embed an image using the SRC and ALT attributes, the code is as follows:
Display effect:
1 embed an image in a hyperlink
A common use of the IMG element is to create an image-based hyperlink in conjunction with the A element, with the following code:
xml/html Code copy content to clipboard
<a href= "otherpage.html" > </a>
The way the browser displays this picture is no different. Therefore, it is important to provide a visual cue to the user that a particular image represents a hyperlink. The specific approach can be the use of CSS, can be expressed in the image content is better.
If you click on this image, the browser navigates to the URL specified by the href attribute of parent element A. Applying the ISMAP attribute to an IMG element creates a server-side partial response graph, which means that the location of the click on the image is appended to the URL. For example, if the location of a click is 8 pixels from the top of the image, and the left edge is 10 pixels, the browser navigates to the following address:
xml/html Code copy content to clipboard
https://yexiaochao.github.io/show4cnblogs/otherpage.html?10,8
The following code shows the content in Otherpage.html, which contains a simple script that shows the coordinates of the click location:
xml/html Code copy content to clipboard
<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 mouse clicks:
Server-side partition response graphs often mean that the server responds differently depending on how the user clicks on the image, such as returning different response information. If you omit the ismap attribute on the IMG element, the coordinates of the mouse click are not included in the request URL.
2 Creating a client partition response diagram
We can create a client partition response graph by clicking on a different area of the image to allow the browser to navigate to a different URL. This process does not need to be booted from the server, so you need to use elements to define the regions on the image and the behavior they represent. The key element of the client partition response graph is that the MAP,MAP element contains one or more area elements, each of which represents a region of the image that can be clicked.
The attributes of an AREA element can be divided into two categories, the first of which is the URL that the image region represents in the areas that the browser navigates to when the user clicks. Describes this class of properties, which are similar to the corresponding properties seen on other elements.
The second class contains more interesting properties: The shape and the coords properties. You can use these attributes to indicate the area of each image that the user can click. The shape and Coords properties work together. The meaning of the Coords property depends on the value of the Shape property, as shown in:
After describing these elements, for example, the code is as follows:
xml/html Code copy content to clipboard
<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= "' 210,60,370,230" 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) { //display the product through a dialog box, indicating the corresponding jump page Alert ("This is Product" +num); } </script> </body>The display effect is the same, just click on the corresponding product image, will pop up the corresponding product name, indicating the product page jump.
Above this "HTML element" embedded image implementation method is small to share all the content of everyone, hope to give you a reference, but also hope that we support topic.alibabacloud.com.
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
