Skip to main content

Image map or Map and Area tags

Anchor TAG

Image Map or map Tag :

An image map is an image with clickable areas.

Sarting Tag : <map> Ending tag : </map>

Attributes :

    It has different attributes like
  1. usemap
  2. name

Area Tag :

It contains Area tag

Sarting Tag : <area> Ending tag : </area>

Attributes :

    It has different attributes like
  1. shape
  2. coords
  3. href
For this first take a notepad and copy code then save it with .html extension.Thats it your Program will be exected.if You want to check its effect within this website plese click on EXECUTE button.

1. Usemap attribute : Usemap attribute and creates a relationship between the image and the map.Its values are starting with #.

for example <img usemap="#msrwebtech"/>

2. Name attribute : Name attribute is used to link the image with map tag.We use this with in map tag.for example

<map name="msrwebtech">

3. Shape attribute : Shape attribute is used to define shape like rectangle,circle and polygon within area tag.for example

<area Shape="circle"> ; <area Shape="rect"> ;<area Shape="polygon">

4. Coords attribute : Coords attribute is used to define coordinates of an image within area tag.for example

<area Shape="circle" Coords="x,y,radius"> Where as x , y are coordinates of image at particualr point on image
<area Shape="rect" Coords="x1,y1,x2,y2" > where x1,y1 are coordinates at left top of the image and x2,y2 are coordinates at right bottom of the image
<area Shape="polygon" Coords="x1,y1,x2,y2.......xn,yn" >

4. href attribute : Coords attribute is used to link the web page when you click on particualr shape on the image.

CODE <html> <head> <title> Image Map TAG </title> <style type="text/css"> </style> </head> <body > <img alt="Msr WebTech Youtube channel image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMsS6i5NEDY3dUpdwgctlHRNJr_Sw3-QK7p6VwA17ThLVEtsObNTtnQZRLB_0j9axboN0xYilHa3zARoDS5BVEN6S7IAvb5yPpOPgSoEPX0jxVhLZIsyc36QKllEeU36r91SrMFT3RHQ/s0/image+Map.jpg" usemap="#msrwebtech"> <map name="msrwebtech"> <area shape="rect" coords="385,21,480,108" alt="Msr WebTech Youtube channel" href="https://www.youtube.com/channel/UCurLHTvkk9-mZ2YjqsLHtKg"> <area target="new" shape="circle" coords="120,160,82" alt="Msr WebTech Marquee Video" href="https://www.youtube.com/watch?v=5_aa8Hq-kQU&t=10s"> <area shape="poly" coords="224,179,305,108,336,88,365,155,443,180,365,108,337,265,305,203" alt="Msr WebTech Anchor tag Video" target="new" href="https://www.youtube.com/watch?v=8rT88D1FKwY"> </map> </body> </html>
OutPut (Click on above execute Button)

Comments

Post a Comment

Popular posts from this blog

Marquee Tag and Its Attributes

Marquee TAG Marquee Tag : Marquee is one of the important tags in Website creation .it is generally used to scrooling the content on the webpage .For example : in our regular innovations Website i use this for showing latest updates on my website. Sarting Tag : Ending tag : Attributes : It has different attributes like Direction Height Width Behavior Scrolldelay Scrollamount Hspace Vspace Loop Bgcolor Id & Hovering effects ...
Post a Comment
Read more

Fieldset and Pre Tags in HTML with Live execution

Fieldset Tag in HTML Fieldset & Pre Tags in HTML : 1. Fieldset Tag : is used for grouping related form elements in a box.It is used to give user a clear view about Content. Starting tag : Ending tag : 2. Legend Tag : Legend tag is used to give title for Fieldset. Starting tag : Ending tag : 3. Pre Tag : Pre tag is used to set alignment of your web page as coded line wise . Starting tag : Ending tag : For this first take a notepad and copy code then save it with .html extension.Thats it your Program will be exected.if You want to check its effect within this website plese click on EXECUTE button. CODE Fieldset ,Pre TAGs Login Page User Name : Password : OutPut (...
Post a Comment
Read more