HTML Resim Haritaları

HTML resim haritaları ile bir resim üzerinde tıklanabilir alanlar oluşturulmak için kullanılır.

Resim Haritaları

HTML’de <map> etiketi bir görüntü haritası tanımlar. Görüntü haritası, tıklanabilir alanlara sahip bir görüntüdür. Alanlar bir veya daha fazla <area> etiketiyle tanımlanır.

Aşağıdaki örnek görselde resim ve bilgisayarlar üzerine tıklayıp farklı sayfalara veya linklere yönlendirebiliriz. Resim üzerinde bilgisayar, telefon veya kahve üzerinde mouse ile bekleyince title ile açıklama eklemeye çalışacağız. Bu şekilde kodun nasıl çalıştığını görebilirsiniz.

<!DOCTYPE html>
<html>
<head> 
</head>
<body>
 
<img src="masa.jpg" alt="masa" usemap="#masa">

<map name="masa">
  <area shape="rect" coords="34,44,270,350" alt="Bilgisayar" href="bilgisayar.htm" title="Bilgisayar">
  <area shape="rect" coords="290,172,333,250" alt="Telefon" href="telefon.htm" title="Telefon">
  <area shape="circle" coords="337,300,44" alt="Kahve" href="kahve.htm" title="Kahve">
</map>

</body>
</html>

Bu Kodlar Nasıl Çalışır?

Resim haritalarının arkasındaki fikir aslında resmin neresine tıkladığınıza bağlı olarak farklı eylemler gerçekleştirme planıdır.

Bir görüntü haritası oluşturmak için bir görüntüye ve bu görüntü içinde yer alan tıklanmasını istediğiniz alanları açıklayan HTML kodlarına ihtiyacınız vardır.

Resim <img> etiketi kullanılarak eklenir. Diğer görsellerden tek farkı bir usemap niteliği eklenmesidir.

<img src="masa.jpg" alt="masa" usemap="#masa">

usemap değeri Hashtag yani # işaretiyle başlar ve ardından görüntü haritasına vereceğimiz isim gelir. Bu görsel ile harita arasında ilişki kurabilmek için kullanılır.

Resim Haritası Oluşturma <map>

Daha sonra bir <map> ögesi eklenir. <map> ögesi bir görüntü haritası oluşturmak için kullanılır ve name özelliği ile görüntüye bağlanır.

<map name="masa">

vereceğiniz isim yani name niteliği <img> etiketinin usemap niteliğiyle aynı isimde olmalıdır.

Resim Haritasında Alanlar <area>

<map> etiketinden sonra tıklanabilir alanlar eklenmelidir. Tıklanabilir alanlar <area> ögesi kullanılarak tanımlanır.

Shape (Şekiller)

Tıklanabilir alanın şeklini tanımlamamız gereklidir. Bu şekiller aşağıdaki değerleri alabilir;

rect – Dikdörtgen Bölge

circle – Dairesel Bölge

poly – Çokgen Bölge

Default – Tüm bölgeyi tanımlar

Tıklanabilir alanı görselin üzerine yerleştirebilmek için bazı koordinatları da tanımlamak gereklidir.

shape=”rect”

shape=”rect” koordinatları x ve y ekseni olmak üzere iki şekilde tanımlanmalıdır.

Yukarıdaki örnekte rect alanı 34 ve 44 koordinatları, sol kenardan 34 piksel ve üstten 44 piksel uzaklık olarak tanımlanmıştır.

270,350 koordinatları sol kenardan 270 piksel ve üstten 350 piksel uzaktaki alanı işaretler.

Bu koordinatlar ayarlandıktan sonra tıklanabilir alan oluşturulmaktadır.

  <area shape="rect" coords="34,44,270,350" alt="Bilgisayar" href="bilgisayar.htm" title="Bilgisayar">

Yukarıdaki kod oluşturulduğunda ilgili görselde aşağıdaki alan bilgisayar.htm linkine yönlendirilecek tıklama alanını oluşturur. Görselde ilgili alan üzerinde mouse ile beklenince bilgisayar şeklinde bir açıklama yer alacaktır.

shape=”circle”

Daire alanı eklemek için kullanılır. Dairenin merkez koordinatı ve uzaklığı belirtilerek bir daire oluşturulur. 337,300 x ve y ekseninin uzaklığıdır. Bu kod yazılınca aşağıdaki koordinat alanı oluşturulur.

nokta bulunduktan sonra daire yarıçapı verilerek bir daire oluşturulur. Kod içinde verilen 44 dairenin yarıçapıdır. Yarıçap belirtildikten sonra aşağıdaki gibi bir daire oluşacaktır.

Aşağıdaki kodla ilgili daire içine tıklanabilecek bir alan oluşturulur.

  <area shape="circle" coords="337,300,44" alt="Kahve" href="kahve.htm" title="Kahve">

İlgili alana tıklayınca kahve.html sayfasına yönlendirme sağlanacaktır.

shape=”poly”

shape=”poly” ile düz çizgilerle bir çokgen işaretlenir ve birkaç koordinat noktasıyla tıklama alanı oluşturulur.

Bu herhangi bir şekil oluşturmak için kullanılabilir. Aşağıda çokgen şeklinde bir kruvasan örneğinde ilgili kodu açıklamaya çalışacağız.

resimdeki kruvasanın bütün alanları için x ve y koordinatları tek tek bulunur.

Koordinatlar çiftler halinde belirlenir ve noktalar oluşturulur. Aşağıdaki kod parçasında yukarıdaki resim için örnek bir kod oluşturulmuştur.

<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="kruvasan.htm">

Aşağıdaki resimde ilgili tıklama alanını görebilirsiniz.

Image Map ve JavaScript

Tıklanabilir alan ile bir JavaScript işlevini de tetiklemek mümkün. Aşağıdaki kodla <area> ögesine tıklama fonksiyonu belirlenebilir.

Kodda javascript işlevinin gerçekleşmesi için onclick özelliği eklenir

<map name="workmap">
  <area shape="circle" coords="337,300,44" href="kahve.htm" onclick="kahveFonksiyon()">
</map>

<script>
function kahveFonksiyon() {
  alert("Kahve bardağına tıkladınız!");
}
</script>

Bölüm Özeti

  • Görüntü haritası oluşturmak için <map> etiketi kullanılır.
  • Görüntü haritasında tıklanabilir alanlar oluşturmak için <area> etiketi kullanılır.
  • Resim haritasını işaretlemek için <img> etiketine usemap özelliği eklenir.

3 Ekim 2023
Was this article helpful?

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir