HTML image hotspot

At present, a function of the internal system is being improved. The front-end provides the function. From the front-end to the back-end, you need to write it on your own. Fortunately, you are slightly involved in front-end technology.

The page needs to implement a button switch effect. In fact, the switch is just a high-sounding one, that is, click the image and change it to another image. The effect is as follows:

This is the two screenshots taken from the previous screenshot. The expected effect is to click the official version, switch to the left-side effect, and click Edit to switch to the right-side effect, therefore, it is necessary to trigger different events on the official and edit versions. However, the official and edit versions are on an image and lead to the topic of this article,Image hotspot.

function switchToFormal() {switchTo.src = "images/formal.png";}function switchToEdition() {switchTo.src = "images/edition.png";}

 <Map Name = "switchtomap"> <area alt = "official version" shape = "rect" coords =, "href =" javascript: switchtoformal () "/> <area alt =" edit "shape =" rect "coords =", "href =" javascript: switchtoedition () "/> </map>

I have created a hotspot for a rectangle (shape = "rect"). coords is the hotspot coordinate. The rectangle requires two sets of coordinates, the coordinates of the vertices in the upper left corner and the coordinates of the vertices in the lower right corner, the two points determine a rectangle. SHAPE has other shapes. For more information, Google.

The hotspot is mostly used to set different links for different regions of a large image, such as a map. Here, I just don't want to cut the graph again, so I got four images.