【HTML element】How to embed images

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 shown below:

 < img src ="../img/example/img-map.jpg" alt ="Products Image" width ="580" height ="266" />

Display effect:

1 Embed an image in a hyperlink

A common usage of the img element is to create an image-based hyperlink in conjunction with the a element. The code is as follows:

There is no difference in the way the browser displays this image. Therefore, it is important to provide users with a visual cue that a particular image represents a hyperlink. The specific approach can be to use CSS, and it would be better if it can be expressed in 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 partial responsive image, meaning that the location of clicks on the image is appended to the URL. For example, if the click is 8 pixels from the top of the image and 10 pixels from the left edge, the browser will navigate to the following URL:

The following code shows the contents of otherpage.html, which contains a simple script to display the coordinates of the click location:

You can see the effect of mouse clicks:

A server-side partitioned response image usually means that the server will respond differently depending on the area 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 will not be included in the request URL.

2 Create a client partition response map

We can create a client-side responsive map that allows the browser to navigate to different URLs by clicking on different areas of an image. This process does not need to be directed from a server, so elements are used to define the various areas on the image and the behavior they represent. The key element of the client-side partition response map is map. The map element contains one or more area elements, each of which represents a clickable area on the image.

The attributes 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 user clicks on the image area represented by area. The following diagram introduces this category of properties, which are similar to corresponding properties seen on other elements.

The second category contains the more interesting attributes: shape and coords attributes. You can use these attributes to indicate individual areas of the image that the user 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 the following figure:

After introducing these elements, let's take an example, the code is as follows:

Click the link to view the effect: http://yexiaochao.github.io/show4cnblogs/img-map.html

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 product page you will jump to.

The above [HTML element] implementation method of embedding images is all the content that the editor shares with you. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.

Original URL: http://www.cnblogs.com/luka/archive/2016/07/23/5580949.html