HTML ImageMap

Web-based graphics is a term used in web design and also refers to multimedia programs. It provides a way to embed hyperlinks within a graphic. These are implemented with the variable shape = as rectangular (round), round (circle) or free (poly) buttons, which behave as hyperlinks in the hypertext of an HTML document. As a rule, a changing mouse pointer points to the invisible buttons. Reliable graphics are used in both image and video files.

An imagemap defined in HTML consists of an image itself, which is defined with a <img> tag. At the same time, an attribute usemap is specified that refers to the imagemap.

The imagemap consists of the <map> tag and the individual <area> tags, which represent the actual definitions of the fields that can be clicked on. These define, comparable to the definition for a <a> tag, which URL is to be called.

Here is a dummy syntax which you can use :

<![CDATA[<map id=”imgmap2014716103321″ name=”imgmap2014716103321″><area shape=”rect” alt=”” title=”” coords=”25,129,154,188″ href=”http://google.com&#8221; target=”_blank” /><area shape=”rect” alt=”google2″ title=”” coords=”26,193,123,244″ href=”http://google.com&#8221; target=”_blank” /><area shape=”rect” alt=”google3″ title=”” coords=”27,249,84,317″ href=”http://google.com&#8221; target=”_blank” /><area shape=”rect” alt=”” title=”” coords=”325,69,430,132″ href=”” target=”” /><area shape=”rect” alt=”google5″ title=”” coords=”350,134,430,179″ href=”http://google.com&#8221; target=”_blank” /><area shape=”rect” alt=”google6″ title=”” coords=”357,182,428,227″ href=”http://google.com&#8221; target=”_blank” /><area shape=”rect” alt=”google7″ title=”” coords=”184,328,300,389″ href=”http://google.com&#8221; target=”_blank” /><area shape=”rect” alt=”google8″ title=”” coords=”194,395,299,435″ href=”http://google.com&#8221; target=”_blank” /></map>]]>

Nice and free online tool to grab your co-ordinates is :

http://www.maschek.hu/imagemap/imgmap

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Blog at WordPress.com.

Up ↑