ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing

ExpertRating Home
ExpertRating Benefits
Recommend ExpertRating
Suggest More Tests
Privacy Policy
JavaScript Tutorial - Index
JavaScript Tutorial - Introduction to JavaScript
JavaScript Tutorial - Basic JavaScript Concepts
JavaScript Tutorial - Working with Operators and Variables
JavaScript Tutorial - How to work with Loops and Functions?
JavaScript Tutorial - How to work with Forms and Events?
JavaScript Tutorial - How to work with Objects?
JavaScript Tutorial - How to work with Browsers and Cookies?
JavaScript Tutorial - More about Objects
JavaScript Tutorial - How to validate Forms with JavaScript?
JavaScript Tutorial - Advanced Techniques in JavaScript

Online Personal Trainer Certification
Personal Trainer Certification (Spanish)
Six Sigma Certification
Find a Personal Trainer
Project Management Certification
Six Sigma Certification
Six Sigma Black Belt Certification
Master Black Belt Certification
Six Sigma Green Belt Certification
Life Coach Certification
Lean Management Certification
Lean Six Sigma Certification
First Aid Certification
CPR Certification
Yoga Certification
Aerobics Certification
Pilates Certification
Business Analyst Certification
SEO Certification
Online Business Writing Course & Certification
Makeup Artist Certification
Baby Sitting Course & Certification
Time Management Certification
Health Club Management Certification
Medical Coding Certification
Medical Billing Certification
Business Analysis Course
Master Trainer Certification
Total Quality Management Certification
Kaizen Certification
Creative Writing Certification
Event Management Certification
Test Search by Job Title
Administrative Assistant Certification
Virtual Assistant Certification
  All Online Courses


  Home > Courses, Tutorials & eBooks > JavaScript Tutorial > Advanced Techniques in JavaScript

JavaScript Tutorial - Advanced Techniques in JavaScript

Page 1 of 2
In this chapter you will learn :
  • Using images as hyperlinks.
  • Using area object to implement image map.
  • Properties of area object.
  • Creating an image map.
  • JavaScript timing events.


As text can act as a hyperlink, images can also act as hyperlinks. You can define areas within the image that are hyperlinks to distinct URLs. These different links on the image are defined by certain coordinates, are often called as "hotspots". Images can be accessed using the image object . The <IMG> tag is used to access the images in the HTML documents. It places the image on the screen, and because the <IMG> tag is enclosed within the <A></A> tags, it becomes a Hotspot. Image objects can be created in the following way :

  img = new Image ( )
                                 img.src = ""

As you know clicking a hyperlink will open a web page linked to it, similarly, when a hyperlink is created on an image, clicking on any part of the image will lead to the opening of a document specified in the <A HREF.....> tag. In case the image is large, and there is a requirement of linking multiple documents to the same image, then there has to be a technique that segments the image into multiple sections and allowing each segment to be linked with a different document.
              This technique is called an Image map which means division of the image into various areas. It can be created and applied to an image so that particular portions of the image can be linked to a different file or image. The hyperlinked regions of an image are called hot regions and each hot region is associated with a file or an image that will be loaded into the browser when the hot region is clicked. So, an image map is an image with clickable region.
                       There are two kinds of image maps : server side and client side. JavaScript supports client side image maps. JavaScript provides the area object, with the help of which you can work with image maps.

Properties of an area Object


    Property                                                     Description
href It takes the name of the file that is linked to the particular area on the image.
hash It specifies the anchor name in the URL
host It specifies the host name and the port of the URL.
pathname It either sets the path name of the URL or returns the path portion of the URL.
port This property specifies the port section of the URL.
It specifies the protocol part of the URL, including the colon after the protocol name.
search It specifies the URL query string section, including the question mark.
target It specifies the target name for the URL link.

Creating an Image Map

While creating an image map, the image is divided into various segments, which requires using the <MAP></MAP> tags. The <MAP> tag takes an attribute  NAME, through which the image area can be referenced in an HTML file :

  <MAP NAME = "map name">

Within the <MAP></MAP> tags the <AREA> tag is also defined. <AREA> tag defines a particular region within the image. These areas will have to be distinguished on the image and then linked to different documents. You can define the shape for particular areas amongst a rectangle, circle, or a polygon. For each defined shape, coordinates need to be specific to mark an appropriate area on the image. For example, a rectangle needs 2 points of specification, the upper left corner and the lower right corner and for a circle you need to specify three coordinates, the center coordinate x, center coordinate y and radius of the circle.

<MAP NAME = "Color">
<AREA SHAPE = "rect" COORDS = "52, 65, 130, 80" HREF = "yellow.htm">
<AREA SHAPE = "rect" COORDS = "150, 65, 225, 80" HREF = "blue.htm">

Next, apply the image map to a particular image. For this purpose another attribute called USEMAP is used within the <IMG> tag. The USEMAP attribute specifies the location on the page where the image map coordinates and other data are specified. The USEMAP attribute takes the name of the image map as a value, and applies the map specifications to the respective image. The value is always preceded with the # sign.

  <IMG USEMAP = " *#map_name ">


<IMG Src = "colourful.gif" USEMAP="#color">

JavaScript Timing Events

JavaScript allows you to execute certain code after a specified time interval, called timing events. The timing events allows you to time out users if they do not interact with the web page within a certain period of time. This event can also act as a security feature to allow web based applications to log off users if they do not interact with the server periodically.

  var timingset Timeout ("Function or Expression", delay time);

Time outs are like a timer. A timer on the page at the browser's status bar displays the time remaining before timing out. The delay time is entered as milliseconds. After specified number of milliseconds, the predefined function or an expression will be executed.

<script type = "text/javascript">
setTimeout (" alert ('Time out, Fifty seconds over'); ", 50000)


One more event can be set, which is setInterval( ), causes a function to be called periodically based on the time value specified. That means, a particular function or expression is executed repeatedly after a set time interval.

var timing = setInterval ( function( ), delay time);

The delay time is in milliseconds. This method waits for a specified number of milliseconds then executes the function specified and after the same amount of time, it will again execute the function. It will continue until you clear the interv


In this chapter you have learnt:

  • How images can act as a hyperlink or a hotspot.
  • Implementing image maps through area object.
  • Area object and its properties.
  • What are JavaScript timing events.


Review Questions

Fill in the Blanks

  1. Division of an image into various areas is called --------.
  2. Linked regions of image map are called ---------.
  3. Two kinds of image map are -------- and --------.
  4. The location name has to be preceded by a -------- symbol.
  5. The delay time in timing events is specified in ---------.



  1. Image map
  2. Hotspots or Hot regions
  3. Client-side and server-side
  4. #
  5. milliseconds





Home  |  About Us  |  Privacy Policy  |  Site Map  |  FAQs  |  Contact Us
© ExpertRating 2015. All Rights Reserved.