HomeProgramJavaScript

Image Map in JavaScript

Images that create maps are inserted into the page using elements img as usual, except that it carries an additional attribute called usemap . The value of the usemap attribute is the name attribute value on the element map which you are about to see later, preceded by a # or $ symbol. 

Element map actually create a map for the image and usually follow the element directly img . It acts as a container for the element which actually defines clickable hotspots. Element map carries only one attribute, name attribute, which is the map identifier. This is how the element img know the element Which to use.

The element determines the shape and coordinates that define the limit (boundary) of a clickable hotpot.

The following code connects Image maps and JavaScript to create a message in the text box when moving the mouse over different parts of the image.

  Using JavaScript Image Map : img src="images/usemap.gif" alt="HTML Map" usemap="#tutorials" border="0"    Using JavaScript Image Map : img src="images/usemap.gif" alt="HTML Map" usemap="#tutorials" border="0"   Perl Tutorial HTML Tutorial PHP Tutorial

Result

Follow the above method to see the results

According to Tutorialspoint

Last lesson: Debug in JavaScript

Next article: Browser compatibility in JavaScript

4 ★ | 1 Vote

You should read it

May be interested

  • Summary of JavaScript exercises with sample codeSummary of JavaScript exercises with sample code
    in order to make your javascript learning easier, tipsmake.com has compiled a number of javascript exercises with sample solutions for you to practice.
  • JavaScript location in HTML FileJavaScript location in HTML File
    there is flexibility in providing javascript code anywhere in an html document. however, the most preferred ways to include javascript in an html file.
  • How to Turn on JavaScriptHow to Turn on JavaScript
    javascript is a language used in many websites to provide additional functionality and access to the user. developers use javascript to deliver a large part of their site's functionality to you, the user. your browser must have javascript...
  • What is the difference between Java and JavaScript?What is the difference between Java and JavaScript?
    although the names of java and javascript seem to be related (javascript seems to be a script in java?), but that's the only similarity. these two languages ​​are not technically related to each other.
  • Void keywords in JavaScriptVoid keywords in JavaScript
    void is an important keyword in javascript that can be used as a unary operator before its single operand, which can be in any type. this operator defines an expression to be evaluated without returning a value.
  • JavaScript code to generate error charts & graphsJavaScript code to generate error charts & graphs
    the example below illustrates a sample variance chart created with javascript that incorporates a column chart. you will also get the source code for reference and editing as you wish.
  • Introduction to 2D Array - 2-dimensional array in JavaScriptIntroduction to 2D Array - 2-dimensional array in JavaScript
    in the following article, we will introduce and show you some basic operations to create and access 2-dimensional arrays - 2d array in javascript. essentially, a 2-dimensional array is a concept of a matrix of matrices - a matrix, used to store information. each 1 element contains 2 separate indexes: row (y) - column and column (x) - column.
  • Operator in JavaScriptOperator in JavaScript
    we see the following simple expression: 4 + 5 is equal to 9. here 4 and 5 are operands and '+' called operator - operator.
  • How to Disable JavaScriptHow to Disable JavaScript
    this wikihow teaches you how to turn off your web browser's javascript support. javascript is responsible for loading dynamic content in webpages, so turning it off can help websites load faster than usual. most web browsers and their...
  • Browser compatibility in JavaScriptBrowser compatibility in JavaScript
    it is extremely important to understand the differences between different web browsers to handle each one in the best way. therefore, you must know which browser your website is running from so that it can provide a suitable solution.

JavaScript