[HTML element] How to embed images-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

[HTML element] How to embed images

高洛峰

Feb 18, 2017 pm 03:14 PM

The

img element allows us to embed images in HTML documents.

To embed an image, you need to use the src and alt attributes. The code is as follows:

<img  src="/static/imghwm/default1.png" data-src="../img/example/img-map.jpg" class="lazy" alt="[HTML element] How to embed images" >

Display effect:

【HTML 元素】嵌入图像的实现方法

1 Embedding images in hyperlinks

#A common use of the img element is to create it in conjunction with the a element An image-based hyperlink, the code is as follows:

XML/HTML CodeCopy content to clipboard

<a href="otherpage.html">  
    <img src="/static/imghwm/default1.png"  data-src="../img/example/img-map.jpg"  class="lazy"   ismap alt="Products Image"    style="max-width:90%"  style="max-width:90%" />  
</a>

There is no difference in the way the browser displays 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:

XML/ HTML CodeCopy 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 to display the coordinates of the clicked location:

XML/HTML CodeCopy the content to the 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(&#39;?&#39;)[1].split(&#39;,&#39;);   
    document.getElementById("xco").innerHTML = coords[0];   
    document.getElementById("yco").innerHTML = coords[1];   
</script>  
</body>

You can see it The effect of mouse click:

【HTML 元素】嵌入图像的实现方法

Server-side partition response graph usually means that the server will respond differently according to the different areas the user clicks on the image, 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 partition response graph

We can create a client partition response graph by clicking on different areas on an image Let the browser navigate to a different URL. 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-side 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.

【HTML 元素】嵌入图像的实现方法

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:

【HTML 元素】嵌入图像的实现方法

After introducing these elements, for example, the code is as follows:

XML/HTML CodeCopy the content to the clipboard

<body>  
    <img src="/static/imghwm/default1.png"  data-src="../img/example/img-map.jpg"  class="lazy"   ismap alt="Products Image" usemap="#mymap"    style="max-width:90%"  style="max-width:90%" />  
  
<map name="mymap">  
    <area href="javascript:show_page(1)" shape="rect" coords="&#39;34,60,196,230" alt="product 1" />  
    <area href="javascript:show_page(2)" shape="rect" coords="&#39;210,60,370,230" alt="product 2" />  
    <area href="javascript:show_page(3)" shape="rect" coords="&#39;383,60,545,230" alt="product 3" />  
</map>  
  
<script type="application/javascript">  
     function show_page(num){   
         //通过对话框显示产品，表示对应的跳转页面   
         alert("This is product "+num);   
     }   
</script>  
</body>

The display effect is the same, just click the corresponding For product pictures, the corresponding product name will pop up, indicating the jumped product page.

The above [HTML element] implementation method of embedding images is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support the PHP Chinese website.

For more [HTML element] implementation methods of embedded images, please pay attention to the PHP Chinese website for related articles!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Iterating a React Design with Styled ComponentsApr 21, 2025 am 11:29 AM

In a perfect world, our projects would have unlimited resources and time. Our teams would begin coding with well thought out and highly refined UX designs.

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons!Apr 21, 2025 am 11:26 AM

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons

SVG Properties in CSS GuideApr 21, 2025 am 11:21 AM

SVG has its own set of elements, attributes and properties to the extent that inline SVG code can get long and complex. By leveraging CSS and some of the forthcoming features of the SVG 2 specification, we can reduce that code for cleaner markup.

A Few Functional Uses for Intersection Observer to Know When an Element is in ViewApr 21, 2025 am 11:19 AM

You might not know this, but JavaScript has stealthily accumulated quite a number of observers in recent times, and Intersection Observer is a part of that

Revisting prefers-reduced-motionApr 21, 2025 am 11:18 AM

We may not need to throw out all CSS animations. Remember, it’s prefers-reduced-motion, not prefers-no-motion.

How to Get a Progressive Web App into the Google Play StoreApr 21, 2025 am 11:10 AM

PWA (Progressive Web Apps) have been with us for some time now. Yet, each time I try explaining it to clients, the same question pops up: "Will my users be

The Simplest Ways to Handle HTML IncludesApr 21, 2025 am 11:09 AM

It's extremely surprising to me that HTML has never had any way to include other HTML files within it. Nor does there seem to be anything on the horizon that