[JavaScript] JavaScript learning 34 JavaScript image map

Document directory

• Instance

An image map is an image with a clickable area.

Instance

Simple HTML image ing

This example shows an image ing without adding JavaScript.

Added JavaScript image ing.

This example shows an image ing with JavaScript added. When the mouse is floating on a hotspot, the JavaScript function is called to display the introduction of the planet corresponding to the hotspot.

Javascript image map

We have learned from the HTML tutorial that an image map contains images with clickable areas. Generally, each region is associated with a hyperlink. Click a region to return to the relevant link.

Instance

The following example shows how to create an HTML image map with a clickable area:

<map id ="planetmap" name="planetmap"><area shape ="rect" coords ="0,0,82,126" href ="sun.htm" target ="_blank"  alt="Sun" /><area shape ="circle" coords ="90,58,3" href ="mercur.htm" target ="_blank"  alt="Mercury" /><area shape ="circle" coords ="124,58,8" href ="venus.htm" target ="_blank"  alt="Venus" /></map> 

Result

Add Javascript

We can add (JavaScript calls can be called) events to the <area> label inside the image map. <Area> tags support the following events: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, and onblur.

Here is an example of adding javascript:

onMouseOver="writeText('The Sun and the gas giantplanets like Jupiter are by far the largest objectsin our Solar System.')"href ="sun.htm" target ="_blank" alt="Sun" /><area shape ="circle" coords ="90,58,3"onMouseOver="writeText('The planet Mercury is verydifficult to study from the Earth because it isalways so close to the Sun.')"href ="mercur.htm" target ="_blank" alt="Mercury" /><area shape ="circle" coords ="124,58,8"onMouseOver="writeText('Until the 1960s, Venus wasoften considered a twin sister to the Earth becauseVenus is the nearest planet to us, and because thetwo planets seem to share many characteristics.')"href ="venus.htm" target ="_blank" alt="Venus" /></map> <p id="desc"></p></body>