The Original Web-Wise-Wizard
Web Authors, Web Developers and Webmasters Internet Toolbox
Best viewed at 1024 x 768 using a colour depth greater than 256

Web Graphics - Image Map Coordinates

This page has been tested and conforms to WCAG 2.0 Accessibility Guidelines
Gilbert Hadley's QuilMap Utility

About Wizard QuikMap ...

Do you want to create an HTML image map but you are a bit hazy about how to find the size and shape coordinates of your image? You can now do this online using the Wizard QuikMap utility. Just load an image from your local hard-disk and away you go. Includes a super hands-on demo image map.

Encountering Problems

Many people who are learning about image maps encounter problems when it comes to obtaining the nescessary x,y coordinates and defining the various shapes for their maps. It may be that they have not read a good tutorial on the subject or it may be that they do not properly understand the structure of a bit-image.

We address this problem with our Wizard's 'QuikMap' utility which acts as a tutorial and hands-on demonstration, as well as providing the means of obtaining the necessary x,y coordinates for the shapes you want to define on your own mapped images. Coordinates are the same for client-side image maps, server-side image maps and Form input image  elements (which can be used in a similar manner to server-side image maps). Newcomers to image maps will normally concentrate on mastering client-side image maps and HTML shapes, which are typically only directly applicable to client-side image maps. Students of server-side image maps should be aware that shapes can only be emulated in server-side scripts. Our recommendation to those who are new to server-side image maps or to server-side programming is that they only specify rectangle shapes in server-side image maps until they become more proficient in the subject.

About QuikMap

Modern browser technology has enabled page two of the this image map tutorial to be developed into a fully working image map utility. You simply load an image from your local hard-disk and the width and height will immediately be displayed. The inbuilt zoom feature then enables you to accurately determine the x,y coordinates of any pixel on your image. You can use these coordinates to construct shape attributes for your area tags.

You can also use it as a super image map tutorial and reference, and the QuikMap demo image is provided for this purpose. You can re-display the demo at any time by clicking the Demo button.

Link Directly To This Page ...

help support free information on the Internet ...

Many users prefer to link directly to individual content pages on Web-Wise-Wizard. If you would like to do this then we have provided the following HTML/CSS link script which you can copy and paste directly into your HTML editor. Alternatively, you might like to use our New Dynamic Link Generator to create a link that more fully meets your own particular requirements.

the link displayed ...

Web-Wise-Wizard - HTML Image Map Coordinates You want to create an image map but you are a bit hazy about how to find the size and shape coordinates of your image. Use this QuikMap utility to load an image from your hard-drive and away you go.

select/copy the link Markup ...

Featured Tutorial
Want More Traffic? Increase your Link Popularity and your PageRank by learning how to use Web Directories
Link To Us Scripts
New Dynamic Link Generator
If you find this page interesting or useful then others are likely to view it in exactly the same way. Providing a link to the page will be considered by the search engines as casting a vote for the page. In turn, this will help to improve the search engine ranking of the page resulting in more people being able to see the page. Your link really does count so please don't delay.
Post your link NOW!
Image Map Coordinates Links
Copyright © 1998,2014, Gilbert Hadley, Liverpool, England