Köprü Metni Biçimlendirme Dili'nde (HTML) bir resme bir link eklendiğinde, bu link resmin tamamına eklenir. Programcı birkaç alan veya düğmeyle tek bir görüntü oluşturmak istiyorsa ve her alan farklı bir bağlantı için kullanılıyorsa, bu bir problem olabilir. Bir HTML görüntü haritası, programcının bağlantının gideceği alanları belirlemesini ve birkaç bağlantıyı tek bir görüntüye yerleştirmesini sağlar. Bu, link için bir şekil belirleyerek ve HTML'ye link için hangi koordinatların kullanılacağını söyleyerek yapılır.
İnternet için kullanılan görüntüler piksel cinsinden ölçülür. Görüntüde kaç piksel olduğunu bilmek, bir görüntü haritası oluşturmak için ilk adımdır. Örneğin, 400 piksel yüksekliğe ve 250 piksel genişliğe sahip dikdörtgen bir görüntü kullanılıyor. Daha sonra, programcının, HTML görüntü haritasının düzgün çalışması için koordinatlardaki şekli doğru bir şekilde ölçmesini bilmesi gerekir.
Bir HTML görüntü haritası kullanılırken sol üst köşeye 0,0 denir. Bu durumda sağ alt köşe 250.400 olacaktır. Ölçümler önce genişlik, sonra yükseklik ile yapılır. Bunu düşünmenin kolay bir yolu, ilk ölçümün HTML'ye sol kenardan ne kadar sağa gideceğini söylemesi, ikincisi ise kaç pikselin aşağı ineceğini söylemesidir. Programcı haritadaki bir noktanın sol kenardan 10 piksel ve 50 piksel aşağı olmasını istiyorsa, koordinatlar 10,50 olur.
Programcının bir HTML görüntü haritası için çağırabileceği üç farklı şekil vardır: rect, circle ve polygon. "Rect" dikdörtgenin kısaltmasıdır ve programcının ilk önce sol üst köşe ve sonra sağ alt koordinatları yazması gerekir. Bir dairenin başladığı koordinatları ve ardından dairenin yarıçapını yazarak bir daire belirtilir. Yukarıdan sağa doğru beş koordinatın tümünü yazarak bir çokgen oluşturulur.
HTML resim haritası kodlaması şu şekilde gider: <harita adı = "test">
<area href = "url.html" shape = rect kodlayıcıları = "10,50,20,60">
<area href = "url.html" shape = daire kodları = "10,50,4">
<area href = "url.html" shape = poligon kodları = "10,50,12,55,15,60,13,65,8,55">
Her HTML resim haritasının bir adı olmalı ve "url.html" bölümü, resim haritasının bu bölümünün tıkladığında kullanıcının yönlendireceği bağlantıdır. Resim web sitesine HTML ile yerleştirildiğinde, programcının şunu yazması gerekir: usemap = "test." Bu, görüntüye hangi HTML görüntü haritasını kullanacağınızı söyleyecektir.
