How to embed images in HTML elements-HTML Tutorial-php.cn

This time I will show you how to embed images inHTML elements, what are theprecautionsfor embedding images in HTML elements, the following is a practical case, let’s take a look .

1 Embedding images inhyperlinks

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:

Copy after login

There is no difference in the way browsers display this image. Therefore, it is important to provide visual cues to users that a particular image represents a hyperlink. The specific method can be to use CSS, and it is better to express it in the image content.

If you click on this kind of picture, 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 response graph, meaning that the click location 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 address:

https://yexiaochao.github.io/show4cnblogs/otherpage.html?10,8

Copy after login

The following code shows the content in otherpage.html, which contains A simple script is used to display the coordinates of the click location:

The X-coordinate is ??

The Y-coordinate is ??

Copy after login

Server-side partition response graph usually means that the server will do different things based on the area the user clicks on the image. Give different responses, 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-side partition response

We can create a client-side partition response graph and let the browser navigate to different URLs by clicking on different areas on an image. This process does not need to be bootstrapped through 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 partition response graph 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 image area represented by the area is clicked by the user. The diagram below illustrates this class of properties, which are similar to corresponding properties seen on other elements.

The second category contains more interesting attributes: shape and coords attributes. You can use these attributes to indicate various areas of the image 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, for example, the code is as follows:

Copy after login

The display effect is the same, Just click on the corresponding product picture, and the corresponding product name will pop up, indicating the jumped product page.

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!