Example of using UserMap in IMG

Example of using UserMap in IMG
usemap is an attribute of the <img> tag, used to specify the name of the image map to be used.

The Map in the #Map section is an image map defined with the <map> tag. Its name attribute is Map, which is defined as follows:

Copy code
The code is as follows:

<map name="Map">
<area shape=rect coordinates="100,100,200,200" href="test1.html">
<area shape=rect coordinates="200,100,300,200" href="test2.html">
...
</map>

When using:

Copy code
The code is as follows:

<img src="test.gif" usemap="#Map">

The image map divides an image into several areas. Clicking on different areas will lead to different pages.

In order to create a client image, a new attribute USEMAP needs to be added as follows:

Copy code
The code is as follows:

<IMG SRC="map_name.gif" USEMAP="#section_name">

The USEMAP attribute (use image) accepts a block-style hyperlink, so that image definition information can be stored in the same HTML file.

Copy code
The code is as follows:

<IMG src="Images/index-top.jpg" border="0" usemap="#Map" id="IMG1" onclick="return IMG1_onclick()">
<MAP name="Map">
<AREA shape="rect" coords="224,95,307,125" href="default.aspx">
<AREA shape="rect" coords="326,96,407,123" href="Cart.aspx">
<AREA shape="rect" coords="426,96,503,125" href="MemberShip/UserLogin.aspx">
<AREA shape="rect" coords="525,96,609,125" href="Admin/default.aspx">
</MAP>

<<:  Several methods to solve the problem of MySQL fuzzy query index failure

>>:  Detailed explanation of Cgroup, the core principle of Docker

Recommend

Detailed explanation of data types in JavaScript basics

Table of contents 1. Data Type 1.1 Why do we need...

JS realizes the calculation of the total price of goods in the shopping cart

JS calculates the total price of goods in the sho...

Detailed explanation of Vue3's responsive principle

Table of contents Review of Vue2 responsive princ...

A brief discussion on how to choose and combine div and table

Page layout has always been my concern since I st...

Basic implementation method of cross-component binding using v-model in Vue

Hello everyone, today we will talk about how to u...

Understand CSS3 FlexBox elastic layout in 10 minutes

Basic Introduction Features Flexbox is a CSS disp...

Summary and examples of vue3 component communication methods

The communication modes of vue3 components are as...

Native js custom right-click menu

This article example shares the specific code of ...

VUE introduces the implementation of using G2 charts

Table of contents About G2 Chart use Complete cod...

Linux 6 steps to change the default remote port number of ssh

The default ssh remote port in Linux is 22. Somet...

Graphical tutorial on installing CentOS 7.3 on VMWare

Illustrated CentOS 7.3 installation steps for you...