HTML Image Maps

image map magin siduwenne image ekaka apita click karanna puluwan area wenama add kirimaya
Coordinates web site link = https://www.image-map.net/

image map

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<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="Coffee" href="coffee.htm">
</map>

samnaya image map ekak hadenne me widiyata

1.img	image map ekak create kirimdi image map eka sadaha yodaganna image eka <img> tag eka athule create karanwa
2.usemap	🎱meka bawitha karanne <img> tag eke witharay 🎱image map sadaha nama labadima meken siduwe .meken img tag eka ha map tag eka link wimak sidu we 🎱usempa wala name ekata pera # labadiya yuthuya 🎱<img> sadaha <a> or <button> bawitha karanawanam usemap bawithakaranna behe
3.map	🎱image map eka create karanna bawitha karana pradana tag eka meka 🎱<img> tag eke thiyena image eka image map ekata link karanna meka yodagannawa 1.name = <img> tage eke thiyena usemap eke name eka map eke name ekata ekathu kala (samana) yuthuya
4.area	🎱image map eke click kala heki area niyama karanne me tag eke thibena Attribute walinya. 🎱<area> tag eke sema witama <map> tag eka athulatha thibiya yuthutya 👇

<area> Tag Attributes

1.alt
2.coords
3.download 	
4.href	
5.hreflang	
6.media	
7.shape
8.target
9.rel
10.type
11.referrerpolicy

<area> Attributes

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">

  <area alt="computer" coords="32,47,270,344" download="Computer image" href="computer.jpg" hreflang="en" media="screen and (min-color-index:256)" shape="rect" target="_blank" rel="alternate" type="image/jpeg" referrerpolicy="same-origin">

</map>

HTML

1.alt	🎱href attribute ekata image url ekak denawanm witharay alt eka denna ona wenath site url ekak denwanam alt eka ona nehe. 🎱kumak ho hethwuak matha image eka web site eke penanne nathi unoth e wenuwata alt eke dila thiyena text eka pennanawa 🎱meka weda karanna <area> tag eke href attribute eka thibiya yuthuya.
2.coords	👇
3.download	🎱image area ekata labadi thibena link eka click karama adala document/resource eka download wenawa (image or file) 1.<a download=”filename”> = methanata download wena file/image ekata wenama namak denna puluwan file/image eke default name eka wenuwata
4.href	area eka sadah link ekak labadima meken siduwe
5.hreflang	area eka sadaha labadi thibena link eke document/resource ekata adala lanuage code eka denna meka yodagannawa
6.media	🎱link karapu dcoument/resource eka optimize karala thiyenn mona media device ekatada kiyala denna thiyenne 🎱link = https://html1.my2025.site/html-media/html-video/html-source-media-attribute/ 🎱meka weda karanna <area> tag eke href attribute eka thibiya yuthuya.
7.shape	👇
8.target	👇
9.rel	👇
10.type	🎱link karapu document/resource ekata adala media type eka niyama karay
11.referrerpolicy	👇

2.<area> coords

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="default" coords="240,239" alt="Computer Enter button" href="computerenterbutton.html">
  <area shape="rect" coords="33,44,270,345" alt="computer" href="computer.html">
  <area shape="circle" coords="336,302,46" alt="Coffee" href="coffee.html">
  <area shape="poly" coords="287,173,328,174,335,241,294,247" href="phone.html" alt="phone">
</map>

image eke area walata adala coordinates denne mekata

x,y	sampurna image ekema coordinates coords sadaha ekathu karanne me widiyta (shape=”default”)
x1,y1,x2,y2	කොටුවක් විදියට ඉහළ-වම් සහ පහළ-දකුණු කෙළවරේ ඛණ්ඩාංක coords sadaha ekathu karanne me widiyta (shape=”rect”)
x,y,radius	වෘත්ත කේන්ද්‍රයේ සහ අරයේ ඛණ්ඩාංක coords sadaha ekathu karanne me widiyta (shape=”circle”)
x1,y1,x2,y2,..,xn,yn	හැඩයක් nethi deyaka coordinates coords sadaha ekathu karanne me widiyta (shape=”poly”)

7.<area> shape

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="default" coords="240,239" alt="Computer Enter button" href="computerenterbutton.html">
  <area shape="rect" coords="33,44,270,345" alt="computer" href="computer.html">
  <area shape="circle" coords="336,302,46" alt="Coffee" href="coffee.html">
  <area shape="poly" coords="287,173,328,174,335,241,294,247" href="phone.html" alt="phone">
</map>

image eke area ekaka හැඩය නියම කරයි.

default	sampurna image ekema coordinates ekathu kirimedi meka yodagannawa
rect	කොටුවක් විදියට ඉහළ-වම් සහ පහළ-දකුණු කෙළවරේ ඛණ්ඩාංක ekathu kirimedi yodaganne meka
circle	වෘත්ත කේන්ද්‍රයේ සහ අරයේ ඛණ්ඩාංක ekathu kirimedi meka yodagannawa
poly	හැඩයක් nethi deyaka coordinates ekathu kirimedi meka yodagannawa

8.<area> target

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area target="_blank" shape="rect" coords="32,47,270,344" alt="computer" href="https://www.image-map.net/">
</map>

image map wala dena link eka open kalayuthu sthanaya niyama karay

_self	🎱Default 🎱link eka click karapu tab ekema open wenawa
_blank	aluth tab ekakin link eka open wenawa
_parent	🎱meka weda karanne iframe sadaha pamany 🎱meka check karanna html page 3k ona 3 weni html page eke <a> tag eka athule target ekata adala _parent eka denna ona.ethakota link eka open wenne 2weni html page eka athule thiyena ifram eken (3 weni page eke parent page eka 2weni html page eka) 1 html page saha 2 html page dekema iframe thiyenna ona 🎱video link = https://www.youtube.com/watch?v=1Nf3e0bYng0
_top	🎱meka weda karanne iframe sadaha pamany 🎱meka check karanna html page 2k ona 2 weni html page eke <a> tag eka athule target ekata adala _top eka denna ona.ethakota link eka open wenne fully 1 html page eken. 1 html page eke iframe thiyenna ona. 🎱video link = https://www.youtube.com/watch?v=1Nf3e0bYng0

9.<area> rel

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">

  <!--alternate-->

  <area shape="rect" coords="32,47,270,344" href="https://www.w3schools.com/" rel="alternate"><br>

  <!--author-->

  <area shape="rect" coords="32,47,270,344" href="w3name.com" rel="author"><br>

  <!--bookmark-->

  <area shape="rect" coords="32,47,270,344" href="#C4" rel="bookmark"><br>

  <!--help-->

  <area shape="rect" coords="32,47,270,344" href="help.com" rel="help"><br>

  <!--license-->

  <area shape="rect" coords="32,47,270,344" href="hhttp://www.apache.org/licenses/LICENSE-2.0" rel="license"><br>

  <!--next-->

  <area shape="rect" coords="32,47,270,344" href="https://www.amazon.com/1" rel="prev"><br>
  <area shape="rect" coords="32,47,270,344" href="https://www.amazon.com/3" rel="next"><br>

  <!--prev-->

  <area shape="rect" coords="32,47,270,344" href="https://www.amazon.com/1" rel="prev"><br>
  <area shape="rect" coords="32,47,270,344" href="https://www.amazon.com/3" rel="next"><br>

  <!--nofollow-->

  <area shape="rect" coords="32,47,270,344" href="https://www.w3schools.com/" rel="nofollow"><br>

  <!--noreferrer-->

  <area shape="rect" coords="32,47,270,344" href="https://www.w3schools.com/" rel="noreferrer"><br>

  <!--prefetch-->


  <!--search-->

  <area shape="rect" coords="32,47,270,344" href="https://www.w3schools.com/" rel="search"><br>

  <!--tag-->

  <area shape="rect" coords="32,47,270,344" href="https://www.w3schools.com/" rel="tag"><br>


</map>

current document eke සහ link කර karana document/resource අතර සම්බන්ධතාවය තැහවරු කරය්.

alternate	🎱web site eke ekama antharagathaya country,language.device,other,anuwa wenas wana wita ema version tika ekata link kirimata meka yodagannawa 🎱video eka balanna ona nettam therenne nehe 🎱video link = https://www.youtube.com/watch?v=CuXi8JUY0Bo&t=178s
author	කර්තෘ sambandayen document ekaka link ekak add karaddi meka yodagannawa
bookmark	🎱pages wala nishchitha sthana bookmark karana awasthwaladi meya yoadagananwa. 🎱bookmark kiyala adahas karanne page ekaka nishchitha sthanayaka (id) eke value eka (href) ekata dila link kirima
help	help document ekaka link ekak add karaddi meka yodagannawa
license	licensing information document ekaka link ekak add karaddi meka yodagananwa
next	🎱current document eka document series ekaka document ekakbawath. document series eke ilaga next document ekata yomu karana document ekak bawa dakway. 🎱meka tikak pehedili madi 🎱seo sadaha pamanak yodagani 🎱video link = https://www.youtube.com/watch?v=Bp3iL9paTCM&t=178s 🎱web link = https://developers.google.com/search/blog/2011/09/pagination-with-relnext-and-relprev
prev	🎱current document eka document series ekaka document ekakbawath. document series eke kalin (pera) document ekata yomu karana document ekak bawa dakway. 🎱meka tikak pehedili madi 🎱seo sadaha pamank yodagani 🎱video link = https://www.youtube.com/watch?v=Bp3iL9paTCM&t=178s 🎱web link =https://developers.google.com/search/blog/2011/09/pagination-with-relnext-and-relprev
nofollow	🎱adala link eka search engines වලට නොසලකා හරින ලෙස පවසයි . link eka search engines wala rank kirimada nokaray. mekata adala link eka seo wenne nehe. 🎱meka gena wadi wistharayk danne nehe 🎱video link = https://www.youtube.com/watch?v=I3YZPx3VMUw 🎱web link = https://www.elegantthemes.com/blog/wordpress/rel-noopener-noreferrer-nofollow
noreferrer	🎱පරිශීලකයෙකු wenath web adawiyaka link ekak ක්ලික් කළ විට ema web adawiyata අඩවියට කිසිදු යොමු තොරතුරක් නොයවන ලෙස බ්‍රවුසරයට උපදෙස් දෙයි, ගමනාගමනයේ මූලාශ්‍රය ඵලදායී ලෙස සඟවන අතර පරිශීලකයා පැමිණියේ කුමන පිටුවෙන්ද යන්න ඉලක්ක අඩවිය දැන ගැනීමෙන් වළක්වා ගැනීමෙන් පරිශීලක පෞද්ගලිකත්වය ආරක්ෂා කරයි. 🎱meka gena wadi wistharayk danne nehe 🎱video link = https://www.youtube.com/watch?v=I3YZPx3VMUw 🎱web link = https://www.elegantthemes.com/blog/wordpress/rel-noopener-noreferrer-nofollow
prefetch	–
search	🎱ape site ekata adala thorathuru link eka adala page eken hoyaganna puluwannam ethakota meka bawitha karanawa 🎱Example = scamadviser,domain who is check site,trustpilot wage ewa
tag	🎱ape site eke page eke thibena tag walata adala tag thiyena page ekaka link ekaknam add karanne meka yodagannawa Example = ape site eke html eka gena wistharayakata w3school eke html ekata adala url ekak link karanwanam meka yodagannwa (site dekema html tag thibiya yuthuya) 🎱seo walata yodaganne meka

11.<area> referrerpolicy

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">

  <area shape="rect" coords="32,47,270,344" href="https://www.w3schools.com/" referrerpolicy="same-origin">

</map>

පරිශීලකයා link එක ක්ලික් කළ විට යැවිය යුතු යොමුකරුගේ තොරතුරු referrerpolicy ගුණාංගය මඟින් නියම කරයි.

meka therenne nehe matanam
video link = https://www.youtube.com/watch?v=4Cnp-q54Ulo&t=114s
w3school link = https://www.w3schools.com/tags/att_area_referrepolicy.asp

no-referrer	–
no-referrer-when-downgrade	–
origin	–
origin-when-cross-origin	–
same-origin	–
strict-origin-when-cross-origin	–
unsafe-url	–