హ్ట్మ్ఎల్ <map> టాగ్

  • ముంది పేజీ <main>
  • తదుపరి పేజీ <mark>

నిర్వచనం మరియు వినియోగం

<map> టాగ్ ను ఉపయోగించి చిత్రమాపాన్ని నిర్వచిస్తుంది. చిత్రమాపం (image map, ఒక విభాగాలుగా ఉన్న చిత్రం) క్లిక్‌చేయగల రీజన్‌లు కలిగి ఉంటుంది.

<map> ఎలిమెంట్ ఒక name అట్రిబ్యూట్అట్రిబ్యూట్ మరియు <img> ఎలిమెంట్ యొక్క usemap అట్రిబ్యూట్ సంబంధించిన అంశాలను కలిగి ఉంటుంది, చిత్రం మరియు మాప్ మధ్య సంబంధాన్ని సృష్టిస్తుంది.

<map> ఎలిమెంట్ కొన్ని <area> ఎలిమెంట్ఒక చిత్రమాపంలో క్లిక్‌చేయగల రీజన్‌ని నిర్వచిస్తుంది.

మరియు చూడండి:

హెచ్ఎంఎల్ డామ్ పరిచయం:మాప్ ఆబ్జెక్ట్

ఉదాహరణ

ఉదాహరణ 1

క్లిక్‌చేయగల రీజన్‌గల చిత్రమాపం:

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">
</map>

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 2

ఒక క్లిక్‌చేయగల రీజన్‌గల చిత్రాన్ని చిత్రమాపం:

<img src="solarsystem.png" width="1024" height="576" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,114,576" alt="Sun" href="sun.html">
  <area shape="circle" coords="190,230,5" alt="Mercury" href="mercury.html">
  <area shape="circle" coords="228,230,5" alt="Venus" href="venus.html">
</map>

స్వయంగా ప్రయత్నించండి

అట్రిబ్యూట్

అట్రిబ్యూట్ విలువ వివరణ
name మ్యాప్ పేరు అవసరం. చిత్ర మ్యాప్ పేరును నిర్దేశిస్తుంది.

గ్లౌబల్ అట్రిబ్యూట్స్

<map> టాగ్ ఇవెంట్ అట్రిబ్యూట్స్ సమర్థిస్తుంది ఎంటర్ వెబ్ గ్లౌబల్ అట్రిబ్యూట్స్.

ఇవెంట్ అట్రిబ్యూట్స్

<map> టాగ్ ఇవెంట్ అట్రిబ్యూట్స్ సమర్థిస్తుంది ఎంటర్ వెబ్ ఇవెంట్ అట్రిబ్యూట్స్.

డిఫాల్ట్ CSS సెట్టింగ్స్

అత్యంత బ్రౌజర్లు క్రింది డిఫాల్ట్ విలువలను చూపిస్తాయి <map> కంపొత్తం:

map {
  display: inline;
}

బ్రౌజర్ మద్దతు

క్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఆపెరా
క్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఆపెరా
మద్దతు మద్దతు మద్దతు మద్దతు మద్దతు
  • ముంది పేజీ <main>
  • తదుపరి పేజీ <mark>