Home > Article > Web Front-end > Javascript basics (simple implementation of embedded images)

Javascript basics (simple implementation of embedded images)

亚连Original: 2018-05-21 09:43:521073browse

Below I will bring you a Javascript basics (simple implementation of embedded images). Let me share it with you now and give it as a reference for everyone.

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="../img/example/img-map.jpg" alt="Products Image" width="580" height="266" />

Display effect:

##1 Embedding images in hyperlinks

A common use of the img element is to combine it with the a element to create an image-based hyperlink. The code is as follows:

<a href="otherpage.html">
  <img src="../img/example/img-map.jpg" ismap alt="Products Image" width="580" height="266" />
</a>

The browser displays this image The approach is no different. 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

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

<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>

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.

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

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

<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 the effect of the mouse click:

Server-side partition response diagram Usually it means that the server will react 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-side partition response graph

We can create a client-side partition response graph and let the browser navigate to different areas by clicking on different areas on an image. on the 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 type 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 following figure:

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

<body>
  <img src="../img/example/img-map.jpg" ismap alt="Products Image" usemap="#mymap" width="580" height="266" />

<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, except that when you click on the corresponding product image, the corresponding product name will pop up, indicating the jumped product page.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

JavaScript function expression (picture and text tutorial)

JavaScript function expression (picture and text tutorial) )

JavascriptInheritance mechanism (detailed answers, graphic tutorial)

The above is the detailed content of Javascript basics (simple implementation of embedded images). For more information, please follow other related articles on the PHP Chinese website!

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

Previous article：Detailed interpretation of iteration and merging methods in Javascript (graphic tutorial)Next article：Detailed interpretation of iteration and merging methods in Javascript (graphic tutorial)

See more

Javascript basics (simple implementation of embedded images)

Related articles