"Javascript Basics" Embedding images

The IMG element allows us to embed images in an HTML document.

To embed an image using the SRC and ALT attributes, the code is as follows:

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

Display effect:

1 embed an image in a hyperlink

A common use of the IMG element is to create an image-based hyperlink in conjunction with the A element, with the following code:

   <   a    href   =  "otherpage.html"      >  <  img  src  = ". /img/example/img-map.jpg "   ismap  alt  = "Products Image"   width  = "580"  Span style= "color: #ff0000;" > height  = "266"  />   Span style= "color: #0000ff;" ></ a  >   

The way the browser displays 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 the use of 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, which means that the location of the click on the image is appended to the URL. For example, if the location of a click is 8 pixels from the top of the image, and the left edge is 10 pixels, 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 that shows the coordinates of the click location:

<Body><P>The X-coordinate is<b><spanID= "Xco">??</span></b></P><P>The Y-coordinate is<b><spanID= "Yco">??</span></b></P><Scripttype= "Application/javascript">    varcoords=Window.location.href.split ('?')[1].split (','); document.getElementById ("Xco"). InnerHTML=coords[0]; document.getElementById ("Yco"). InnerHTML=coords[1];</Script></Body>

You can see the effect of mouse clicks:

Server-side partition response graphs often mean that the server responds differently depending on how 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 are not included in the request URL.

2 Creating a client partition response diagram

We can create a client partition response graph by clicking on a different area of the image to allow the browser to navigate to a different URL. This process does not need to be booted from the server, so you need to use elements to define the regions on the image and the behavior they represent. The key element of the client partition response graph is that the MAP,MAP element contains one or more area elements, each of which represents a region of the image that can be clicked.

The attributes of an AREA element can be divided into two categories, the first of which is the URL that the image region represents in the areas that the browser navigates to when the user clicks. Describes this class of properties, which are similar to the corresponding properties seen on other elements.

The second class contains more interesting properties: The shape and the coords properties. You can use these attributes to indicate the area of each image that the user 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:

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

<Body>    <imgsrc=".. /img/example/img-map.jpg "ismap alt= "Products Image"Usemap= "#mymap" width= "580" height= "266"    /><Mapname= "Mymap">    < Areahref= "Javascript:show_page (1)"Shape= "Rect"coords= "' 34,60,196,230"alt= "Product 1" />    < Areahref= "Javascript:show_page (2)"Shape= "Rect"coords= "' 210,60,370,230"alt= "Product 2" />    < Areahref= "Javascript:show_page (3)"Shape= "Rect"coords= "' 383,60,545,230"alt= "Product 3" /></Map><Scripttype= "Application/javascript">     functionshow_page (num) {//display the product through a dialog box, indicating the corresponding jump pageAlert ("This is product"+num); }</Script></Body>

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

The display effect is the same, just click on the corresponding product image, will pop up the corresponding product name, indicating the product page jump.

"Javascript Basics" Embedding images