Request A Quote

    Image Map


    a technique for wrapping an image around an object. Image mapping is perfect for coloring an object when the standard fare of pigments doesn’t contain exactly what you need.

    See Also:

    SEO, Page Rank, Deep Linking, Linkage

    Image map

    An image map describes separate clickable areas of an image that perform as hyperlinks.
    In image map, an image on a web page is divided into shaped region and each of it has an associated hyperlink.
    As creating image maps in a text editor needs much time and effort, so there are many applications that permits the web designer to speedily and easily create image maps, Adobe’s Dreamweaver is one example of it.

    In Web page advancement image map is a graphic image created, so that a user can click on diverse areas of the image and be linked to different ends. We can make an image map by defining each of the areas in terms of their x and y coordinates. However, in the beginning the map file had to be sent to the server.
    The simple explanation of an image map is that they are images files created for the reason of navigation from the image to a different URL or pages that are part of the website by the use of a hyperlink.

    A hyperlink on image is a clickable link. When a website visitor click the link in images, browsers jumps to the URL, data or text defined in the code of the hyperlink. Image maps may have diverse regions that go to various areas of a site or to different URLs with content used as a resource or reference. A very ordinary example of an image map is world map where when we click on a country or state the links jumps to the active website that serves that country or displays text about a certain state.

    Code Used to Create Image Map

    <img src=”sample.gif” width=”145″ height=”126″ alt=”sample” usemap=”#samplemap” /> 
    <map name=” samplemap “> 
      <area shape=”rect” coords=”0,0,82,126″ href=”sun.htm” alt=”Sun” /> 
      <area shape=”circle” coords=”90,58,3″ href=”mercur.htm” alt=”Mercury” /> 
      <area shape=”circle” coords=”124,58,8″ href=”venus.htm” alt=”Venus” /> 

    The Image Map power consists mostly of two elements. The primary is an image and a figure that can be in any normal web graphic format like a. Gif, Jpg or. Png.

    The next element is a compilation of control active area. Each of these controls is a different item. For each area of control we set its shape as a circle, rectangle or polygon and the coordinates that specify the location and size of the active area.
    While designing an image map it is vital to indicate the user that the image is mapped. This might be done by a text instruction associated with the image by an indication within the image itself. At the time of using an editor for layering images such as Photoshop or GIMP, images should be highlighted. These highlighted areas will place out to the user.
    The images can be also highlighted by using rollover effect. Rollover effects can be put into practice by writing ECMAScript code to swap out the entire image with one that has that particular area highlighted. One more solution is to script one or more page elements to react as the mouse moves over the image.






    Client Project



    Dedicated Team




    Request Free Audit