Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Working with HTML5 Map Tag

In this article I will cover the concept of HTML5 Map tag. I will discuss the different properties and examples of image based map element.

Introduction:

This article will cover the basic idea of HTML 5 tag to display the image based maps. tag uses the tag and tag to implement the maps.

The tag is supported by all major browsers.

Tag:

The tag is a image-map with clickable area’s. An image is used to display the map and map tag is used to display the areas on map-image. Image tag provide a property called “usemap“ which correlate map with an image. Note that map tag does not display any image while tag is required here to display the map-image.

Map tag have areas define inside. Each area has corresponding clickable links associated with. You can define the different types of shape in different areas. For example you can define the rectangle, Circle, Polygon.

The area is defined by

  • rect: left, top, right, bottom
  • circle: center-x, center-y, radius
  • poly: x1, y1, x2, y2, ...
  • Listing 1: Script of a simple map element

    <!DOCTYPE html>
    <html>
    <head>
        <title>MrBool.com Tutorials - Map Tag</title>
    </head>
    <body>
    <img src="Color.png" width="200" height="200" alt="Colors" usemap="#Colormap" />
    
    <map name="Colormap">
    <area shape="rect" coords="0,0,200,100" alt="Red Color" href="Red.htm"  />
    <area shape="rect" coords="0,100,200,200" alt="Yellow color" href="Yellow.htm" />
    </map>
    </body>
    </html>
    
    example of simple map

    Figure 1: Above figure is an example of simple map

    Lets discuss the above example, Lets draw an image of 200x200 area and divide into two parts, one rectangle called Red with an area of 100x200 and a second rectangle called Yellow with an area of 100x200. Display this image in image tag and associate it with tag by adding the “usemap” attribute. Now lets define the and area inside this. As there is two parts in the above image so we can define two areas with coordinates "0,0,200,100" and "0,100,200,200". For Red area we will open red.htm and for yellow area we will open yellow.htm. I am not including these pages in my code but if you want you can include it.

    Map Tag: Overlapping Maps

    The nested maps or overlapping maps means having a map inside another or we can say have a map over the another. The below example will discuss the idea and behavior of overlapping maps.

    Listing 2: Script to demonstrate the nested maps

    <!DOCTYPE html>
    <html>
    <head>
        <title>MrBool.com Tutorials - Map Tag</title>
    </head>
    <body>
    <img src="NestedMap.png" width="200" height="200" alt="Colors" usemap="#Colormap" />
    
    <map name="Colormap">
    <area shape="rect" coords="0,0,50,50" alt="Green Color" href="Green.htm"  />
    <area shape="rect" coords="150,0,200,50" alt="Yellow color" href="Yellow.htm" />
    <area shape="rect" coords="0,0,200,200" alt="Blue color" href="Blue.htm" />
    </map>
    </body>
    </html> 
    
    overlapping maps

    Figure 2: Above figure is the output of overlapping maps

    In the above example we have one base map of Blue color and then two overlapping maps of Green and Yellow color. Green and Yellow maps are added before the Blue map so have preference and when user will click on the Green and Yellow maps the corresponding Green and Yellow map link will open and not Blue one.

    Map Tag With Circle:

    We played with the rectangle areas so far, lets explore the circle map also. The below example have a circle area over the rectangle.

    Listing 3: Script of overlapping map with circle

    <!DOCTYPE html>
    <html>
    <head>
        <title>MrBool.com Tutorials - Map Tag</title>
    </head>
    <body>
    <img src="NestedMapwithCircle.png" width="200" height="200" alt="Colors" usemap="#Colormap" />
    
    <map name="Colormap">
    <area shape="circle" coords="25,25,25" alt="Yellow Circle" href="YellowCircle.htm" />
    <area shape="rect" coords="0,0,200,200" alt="Lavender Color" href="Lavender.htm"  />
    </map>
    </body>
    </html> 
    
    overlapping circle area over the basemap

    Figure 3: Above figure is output of overlapping circle area over the basemap

    The above example have a Lavender color basemap and over it there is a circle of 50 radius with touching the boundary of rectangle.

    Basemap coordinates are simple, this should cover the whole rectangle ie. "0,0,200,200". The complexity is with the circle area. We have to specify the circle coordinates and radius. The circle have the radius of 25 so its not hard to find the center of circle that’s is 25,25. So just specify the circle before the rectangle basemap and associate with a link also.

    Conclusion:

    This tutorial covered the basic understanding of image based map. These are the client side implementation of image based maps and very good for developing the GIS based (map enabled) web applications. I would recommend you guys to try some scenario based examples with this tag.

    As usual we are always happy to assist you in case of any questions, So don’t hesitate and post you questions at Mrbool website.



I am having total 7+ years of experience in developing applications using C#, VB.NET, ASP.NET, Silverlight, WCF, SQL Server and Oracle. I am holding a M.Tech degree in Intelligent systems. For more information, visit my Linkedin p...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login