HTML <map> ਟੈਗ

  • ਪਿਛਲਾ ਪੰਨਾ <main>
  • ਅਗਲਾ ਪੰਨਾ <mark>

ਨਿਰਧਾਰਣ ਅਤੇ ਵਰਤੋਂ

<map> ਟੈਗ ਵਾਲੇ ਇਮੇਜ਼ ਮੈਪ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ। ਇਮੇਜ਼ ਮੈਪ (image map) ਇੱਕ ਕਿਕਬਰ ਵਾਲੇ ਖੇਤਰ ਵਾਲੇ ਇਮੇਜ ਹੈ।

<map> ਐਲੀਮੈਂਟ ਨੂੰ name ਪ੍ਰਤੀਯੋਗਿਤਾ، ਇਹ ਪ੍ਰਤੀਯੋਗਿਤਾ <img> ਐਲੀਮੈਂਟ ਦਾ usemap ਪ੍ਰਤੀਯੋਗਿਤਾ ਅਤੇ ਇਮੇਜ ਅਤੇ ਮੈਪ ਦਰਮਿਆਨ ਸਬੰਧ ਬਣਾਉਂਦੇ ਹਨ。

<map> ਕੁਝ ਸਬੰਧਤ ਹਨ <area> ਐਲੀਮੈਂਟ، ਇਮੇਜ਼ ਮੈਪ ਵਿੱਚ ਕਿਕਬਰ ਵਾਲੇ ਖੇਤਰ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。

ਇਹ ਵੀ ਦੇਖੋ:

HTML DOM ਪੁਸਤਕਾਤਮਕਾਕਾਰੀਆਂ:Map ਪੋਸਟ

ਇਨਸਟੈਂਸ

ਉਦਾਹਰਣ 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> ਟੈਗ ਨੇ ਵੀ ਈਵੈਂਟ ਪ੍ਰਤੀਯੋਗਿਤਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ: HTML ਵਿੱਚ ਸਾਰਵਤਰਿਕ ਪ੍ਰਤੀਯੋਗਿਤਾ.

ਈਵੈਂਟ ਪ੍ਰਤੀਯੋਗਿਤਾ

<map> ਟੈਗ ਨੇ ਵੀ ਈਵੈਂਟ ਪ੍ਰਤੀਯੋਗਿਤਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ: HTML ਵਿੱਚ ਈਵੈਂਟ ਪ੍ਰਤੀਯੋਗਿਤਾ.

ਮੂਲਤਬੀ CSS ਸੈਟਿੰਗ

ਮੋਸਟ ਬਰਾਉਜ਼ਰਜ਼ ਹੇਠ ਲਿਖੇ ਮੂਲਤਬੀ ਮੁੱਲਾਂ ਨਾਲ ਦਿਖਾਉਣਗੇ: <map> ਵਸਤੂ:

map {
  display: inline;
}

ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ

ਚਰਮੀ ਐਂਜਲ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪੇਰਾ
ਚਰਮੀ ਐਂਜਲ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪੇਰਾ
ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ
  • ਪਿਛਲਾ ਪੰਨਾ <main>
  • ਅਗਲਾ ਪੰਨਾ <mark>