SlideShare a Scribd company logo
1 of 5
Image Image Maps
Use the <map> tag to
define an image-map.
An image-map is an
image with clickable
areas.
In the image below,
click on the computer,
the phone, or the cup
of coffee:
Satyaki Das | Contact No. 8981838547 .
<!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>
Image
Image Maps
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<picture>
<source media="(min-width: 650px)" srcset="1.jpg">
<img src="4.jpg" alt="Student" style="width:auto;">
</picture>
</body>
</html>
Image
Fun with Image
Satyaki Das | Contact No. 8981838547
Value Description
x1,y1,x2,y2 Specifies the coordinates of the left, top, right, bottom corner of
the rectangle (for shape="rect")
x,y,radius Specifies the coordinates of the circle center and the radius (for
shape="circle")
x1,y1,x2,y2,..,xn,yn Specifies the coordinates of the edges of the polygon. If the first
and last coordinate pairs are not the same, the browser will add
the last coordinate pair to close the polygon (for shape="poly")
HTML Image Mapping
Satyaki Das | Contact No. 8981838547 .

More Related Content

Similar to 8 image maps

Similar to 8 image maps (20)

L2Web.pptx
L2Web.pptxL2Web.pptx
L2Web.pptx
 
20190118_NetadashiMeetup#8_React2019
20190118_NetadashiMeetup#8_React201920190118_NetadashiMeetup#8_React2019
20190118_NetadashiMeetup#8_React2019
 
Mobile Application Development for the Web Developer
Mobile Application Development for the Web DeveloperMobile Application Development for the Web Developer
Mobile Application Development for the Web Developer
 
Html 5
Html   5Html   5
Html 5
 
Enjoy the vue.js
Enjoy the vue.jsEnjoy the vue.js
Enjoy the vue.js
 
Once Source to Rule Them All
Once Source to Rule Them AllOnce Source to Rule Them All
Once Source to Rule Them All
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
Python Code Camp for Professionals 1/4
Python Code Camp for Professionals 1/4Python Code Camp for Professionals 1/4
Python Code Camp for Professionals 1/4
 
QConSP 2015 - Dicas de Performance para Aplicações Web
QConSP 2015 - Dicas de Performance para Aplicações WebQConSP 2015 - Dicas de Performance para Aplicações Web
QConSP 2015 - Dicas de Performance para Aplicações Web
 
Design for people, Code for computers - Jasper Moelker (18 apr 2013)
Design for people, Code for computers - Jasper Moelker (18 apr 2013)Design for people, Code for computers - Jasper Moelker (18 apr 2013)
Design for people, Code for computers - Jasper Moelker (18 apr 2013)
 
Nanoformats
NanoformatsNanoformats
Nanoformats
 
Html Hands On
Html Hands OnHtml Hands On
Html Hands On
 
Shared Element Transitions
Shared Element TransitionsShared Element Transitions
Shared Element Transitions
 
An Introductory Look at Social Mark-Up
An Introductory Look at Social Mark-UpAn Introductory Look at Social Mark-Up
An Introductory Look at Social Mark-Up
 
Web Technology Lab files with practical
Web Technology Lab  files with practicalWeb Technology Lab  files with practical
Web Technology Lab files with practical
 
Responsive Web in Brief
Responsive Web in BriefResponsive Web in Brief
Responsive Web in Brief
 
WebAPI Odata Knockout
WebAPI Odata KnockoutWebAPI Odata Knockout
WebAPI Odata Knockout
 
HTML5 apps for iOS (and probably beyond)
HTML5 apps for iOS (and probably beyond)HTML5 apps for iOS (and probably beyond)
HTML5 apps for iOS (and probably beyond)
 
AspNetWhitePaper
AspNetWhitePaperAspNetWhitePaper
AspNetWhitePaper
 
AspNetWhitePaper
AspNetWhitePaperAspNetWhitePaper
AspNetWhitePaper
 

More from SatyakiDas12 (20)

34 viewport
34 viewport34 viewport
34 viewport
 
33 meta
33 meta33 meta
33 meta
 
32 track
32 track32 track
32 track
 
31 textarea
31 textarea31 textarea
31 textarea
 
30 ruby
30 ruby30 ruby
30 ruby
 
29 progress
29 progress29 progress
29 progress
 
28 option
28 option28 option
28 option
 
27 iframe
27 iframe27 iframe
27 iframe
 
26 optgroup
26 optgroup26 optgroup
26 optgroup
 
24 meter
24 meter24 meter
24 meter
 
23 nav
23 nav23 nav
23 nav
 
22 frameset
22 frameset22 frameset
22 frameset
 
21 form in_html
21 form in_html21 form in_html
21 form in_html
 
20 embed
20 embed20 embed
20 embed
 
19 div
19 div19 div
19 div
 
18 dialog open
18 dialog open18 dialog open
18 dialog open
 
17 details summary
17 details summary17 details summary
17 details summary
 
16 dd dl_dt
16 dd dl_dt16 dd dl_dt
16 dd dl_dt
 
15 data list
15 data list15 data list
15 data list
 
14 data tag
14 data tag14 data tag
14 data tag
 

Recently uploaded

Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
fonyou31
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
SoniaTolstoy
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
QucHHunhnh
 

Recently uploaded (20)

Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communication
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdf
 
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
 
Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3
 
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
 
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
 
fourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writingfourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writing
 
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
 
Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..
 
Advance Mobile Application Development class 07
Advance Mobile Application Development class 07Advance Mobile Application Development class 07
Advance Mobile Application Development class 07
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SD
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across Sectors
 
social pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajansocial pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajan
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 

8 image maps

  • 1.
  • 2. Image Image Maps Use the <map> tag to define an image-map. An image-map is an image with clickable areas. In the image below, click on the computer, the phone, or the cup of coffee: Satyaki Das | Contact No. 8981838547 .
  • 3. <!DOCTYPE html> <html> <body> <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> </body> </html> Image Image Maps
  • 4. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <picture> <source media="(min-width: 650px)" srcset="1.jpg"> <img src="4.jpg" alt="Student" style="width:auto;"> </picture> </body> </html> Image Fun with Image Satyaki Das | Contact No. 8981838547
  • 5. Value Description x1,y1,x2,y2 Specifies the coordinates of the left, top, right, bottom corner of the rectangle (for shape="rect") x,y,radius Specifies the coordinates of the circle center and the radius (for shape="circle") x1,y1,x2,y2,..,xn,yn Specifies the coordinates of the edges of the polygon. If the first and last coordinate pairs are not the same, the browser will add the last coordinate pair to close the polygon (for shape="poly") HTML Image Mapping Satyaki Das | Contact No. 8981838547 .