how to make images specific points clickable in HTML

How to make images specific points clickable in HTML?

In this article we will teach you how to make images specific points clickable in HTML.

Sometimes we needs to make specific parts or pixels of our images clickable. So, we can do this using map and area HTML tags.

workplace.jpg

For an example in the above image we want to make clickable the mobile and laptop area.

So, we will use the code given below to make our image parts clickable.

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

Uses of HTML Map and Area Tags or Click on Image Pixels in HTML:

  • Map and Area tags is useful in custom image map and we can make clickable map markers.
  • It is also useful in generating click impressions on any image in digital marketing.
  • We can also use these tags in ecommerce products images.
  • We can also have some animations and effects by using these tags.
  • You can make images specific points clickable in html or image pixels clickable in html.
  • You can draw custom shapes like circle, rectangle, polygon or any canvas on any images in html

If you want more tutorials and tricks about HTML then visit our HTML Page.

Subscribe Your Email, Follow Us on FacebookTwitter, TumblrLinkedIn.

If you like this article then share this.

ReadyMadeCode
Author: ReadyMadeCode

ReadyMadeCode.com is a website where you can find Free Online Tutorials - Website Development Tutorials, App Development Tutorials, Coding Tutorials,Website Designing and Development From popular programming languages or scripts or framework like php, laravel, html, css, javascript, nodejs, java, angularjs etc. Download Emails | E-Books.

View All Posts From ReadyMadeCode
Author Website : https://www.readymadecode.com
Scroll to top

60% Discount On E-Books Membership

Avail Till 30th September

(Join Now)

E-Books Discount

%d bloggers like this:
We have updated our memberships. Please check here
Close X