JavaScript Image Maps

welcomewiki · #1 05-03-2009, 06:11 PM

An image-map is an image with clickable regions.
HTML Image Maps

From our HTML tutorial we have learned that an image-map is an image with clickable regions. Normally, each region has an associated hyperlink. Clicking on one of the regions takes you to the associated link.

Adding some JavaScript

We can add events (that can call a JavaScript) to the tags inside the image map. The tag supports the onClick, onDblClick, onMouseDown, onMouseUp, onMouseOver, onMouseMove, onMouseOut, onKeyPress, onKeyDown, onKeyUp, onFocus, and onBlur events.
Here's the HTML image-map example, with some JavaScript added:

Example

alt="Planets" usemap="#planetmap" />

onMouseOver="writeText('The Sun and the gas giant planets like Jupiter
are by far the largest objects in our Solar System.')"
href ="sun.htm" target ="_blank" alt="Sun" />

onMouseOver="writeText('The planet Mercury is very difficult to study
from the Earth because it is always so close to the Sun.')"
href ="mercur.htm" target ="_blank" alt="Mercury" />

onMouseOver="writeText('Until the 1960s, Venus was often considered a
twin sister to the Earth because Venus is the nearest planet to us, and
because the two planets seem to share many characteristics.')"
href ="venus.htm" target ="_blank" alt="Venus" />

Similar Threads:

JavaScript Image Maps

One Minute Videos - Best of 2022 - TV Buzz - Biography - TOP 10 - Tags - Contact Us