JavaScript Image Maps
An image-map is an image with clickable regions.
Examples
Simple HTML Image map
Image map with added JavaScript
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.
Example
The example below demonstrates how to create an HTML image map, with clickable
regions. Each of the regions is a hyperlink:
<img src ="planets.gif"
width ="145" height ="126"
alt="Planets"
usemap ="#planetmap" />
<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
Adding some JavaScript
We can add events (that can call a JavaScript) to the <area> tags inside the
image map. The <area> tag supports the onClick, onDblClick, onMouseDown,
onMouseUp, onMouseOver, onMouseMove, onMouseOut, onKeyPress, onKeyDown, onKeyUp,
onFocus, and onBlur events.
Here's the above example, with some JavaScript added:
<html>
<head>
<script type="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt
}
</script>
</head>
<body>
<img src="planets.gif" width="145" height="126"
alt="Planets" usemap="#planetmap" />
<map id ="planetmap" name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
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" />
<area shape ="circle" coords ="90,58,3"
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" />
<area shape ="circle" coords ="124,58,8"
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" />
</map>
<p id="desc"></p>
</body>
</html>
|
What do you want your Web site to do?
What do you want your Web site to do? Ektron CMS400.NET lets you do everything you need to do on the Web and do everything you want to do.
Ektron CMS400.NET gives you all the features you would expect from an
enterprise CMS, but also high-demand functionality like real-time Web
site analytics, community building, blogging, personalization, and
online calendars. Ektron CMS400.NET bridges your Web site gaps.
Use Ektron CMS400.NET for:
- Content & Document Management - Author/edit content, manage navigation, menus, audit trails, workflow, approvals
- Personalzation & Portal Support - Allow visitors to create their own view of your web page
- 508 & W3C Compliance Checker - Ensure compliance with scheduled or on-demand compliance reports
- Memberships - Build online communties with blogs and forums, enable email web alerts, build polls and surveys
- Web Site Analytics - track visitors, report on most requested pages, see where they came from and where they are going
- HTML Form Engine - Create a two-way dialog with visitors using our wizard-like HTML form-building engine with validation and database support
- Multilingual Support - Integrated translation tools help you reach multiple audiences by speaking their language
- Online Calendars - Build and manage Web-based calendars and enable users to customize a view based on what’s important to them
See why there are 15,000+ Ektron integrations worldwide.
Click here to learn more, then request a live online demo or download a FREE TRIAL
 |
|
Get Your Diploma!
W3Schools' Online Certification Program is the perfect solution for busy
professionals who need to balance work, family, and career building.
The HTML Certificate is for developers who want to document their knowledge of
HTML, XHTML, and CSS.
The ASP Certificate is for developers who want to document their knowledge of
ASP, SQL, and ADO.
|
|
HOME
Printer friendly page
