Home > Developer > JavaScript
The IMG element allows us to embed images in HTML documents.
To embed an image you need to use the SRC and ALT attributes, as follows:
Display effect:
1 embedding an image in a hyperlink
A common use of an IMG element is to create an image-based hyperlink with the A element as follows:
<a href= "otherpage.html" > </a>
The way browsers display 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 to use 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, meaning that the location clicked on the image is appended to the URL. For example, if you click on a location that is 8 pixels from the top of the image and 10 pixels from the left edge, the browser navigates to the following address:
https://yexiaochao.github.io/show4cnblogs/otherpage.html?10,8
The following code shows the content in Otherpage.html, which contains a simple script to display the location of the click:
<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>
The way browsers display 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 to use 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, meaning that the location clicked on the image is appended to the URL. For example, if you click on a location that is 8 pixels from the top of the image and 10 pixels from the left edge, the browser navigates to the following address:
https://yexiaochao.github.io/show4cnblogs/otherpage.html?10,8
The following code shows the content in Otherpage.html, which contains a simple script to display the location of the click:
<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 effects of mouse clicks:
The server-side partition response graph usually means that the server responds differently depending on 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 mouse-click coordinates are not included in the request URL.
2 Creating a client partition response graph
We can create a client partition response graph by clicking on different areas of an image to allow the browser to navigate to different URLs. This process does not require booting through the server, so you need to use elements to define the regions on the image and the behavior that they represent. The key element of the client partition response graph is that the MAP,MAP element contains one or more area elements, each representing a clickable region of the image.
The attributes of an AREA element can be divided into two categories, the first of which is to address the URL that the image region represented by the user is clicked by the browser. The following illustration describes this type of property, which is similar to a corresponding property that has been seen on other elements.
The second category contains more interesting attributes: Shape and coords properties. You can use these properties to indicate the range of images that users 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 the following illustration:
After introducing these elements, for example, 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= "' 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 the dialog box, representing the corresponding jump page
Alert ("This is Product" +num);
}
</script>
</body>
The display effect is the same, just click on the corresponding product picture, will pop up the corresponding product name, indicating the product page of the jump.
The above JavaScript basics _ embedded image of the simple realization is small to share all the content of everyone, hope to give you a reference, but also hope that we support the cloud habitat community.
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
