[JavaScript] JavaScript learning 34 JavaScript image map

Source: Internet
Author: User
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>
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.