HTML Image Maps Yapısı!

#HTML

HTML Image Maps. Görüntü haritalama ile html de görüntüler içindeki nesnelere veya bölümlere link ekleyebilirsiniz.

HTML Image Maps
HTML Image Maps

Görüntü haritalarıyla, görüntüye tıklanabilir alanlar ekleyebilirsiniz.

Görüntü Haritaları

<map>Etiketi, bir görüntü harita tanımlar. Bir resim haritası, tıklanabilir alanları olan bir resimdir.

Aşağıdaki resimde bulunan bilgisayara, telefona veya bir fincan kahveye tıklayın:

<img src="https://armyyazilim.com/wp-content/uploads/2019/12/workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="https://armyyazilim.com/wp-content/uploads/2019/12/mac.jpg">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="https://armyyazilim.com/wp-content/uploads/2019/12/cellphone.jpg">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="https://armyyazilim.com/wp-content/uploads/2019/12/coffeehouse2.jpg">
</map>

Çıktısı;

See the Pen image maps by ArmyYazılım (@armyyazilim) on CodePen.

Bu örnekte resimdeki nesnelere link olarak diğer resimlerin linkini verdik ancak siz istediğiniz linki verebilirsiniz.

Peki nasıl çalışır?

Bir resim haritasının arkasındaki fikir, tıkladığınız resmin neresinde olduğuna bağlı olarak farklı eylemler gerçekleştirmeniz gerektiğidir.

Bir resim haritası oluşturmak için bir resme ve tıklanabilir alanları tanımlayan bazı kuralları içeren bir haritaya ihtiyacınız vardır.

Görüntü

Resim <img>etiketi kullanılarak eklenir . Diğer resimlerden tek farkı, bir usemapözellik eklemeniz gerektiğidir :

<img src="https://armyyazilim.com/wp-content/uploads/2019/12/workplace.jpg" alt="Workplace" usemap="#workmap">

usemapDeğer bir karma etiketi ile başlar #görüntü haritasının adından ve görüntü ve görüntü haritası arasındaki ilişkiyi oluşturmak için kullanılır.

Not: Herhangi bir görüntüyü bir görüntü haritası olarak kullanabilirsiniz.

Harita

Ardından bir <map>öğe ekleyin .

<map>Eleman bir resim haritası oluşturmak için kullanılır ve kullanarak görüntüsüne bağlıdır name niteliğini:

<map name="workmap">

nameNitelik olarak aynı değere sahip olmalıdır usemapöznitelik.

Not: Siz <map> etiketini ister resim sonuna istersenizde resimden önce koyabilirsiniz.

Alanlar

Ardından tıklanabilir alanları ekleyin.

Tıklanabilir bir alan, bir <area>eleman kullanılarak tanımlanır .

Şekil

Alanın şeklini tanımlamanız gerekir ve aşağıdaki değerlerden birini seçebilirsiniz:

  • rect – dikdörtgen bir bölgeyi tanımlar
  • circle – Dairesel bir bölge tanımlar
  • poly – Çokgen bir bölgeyi tanımlar
  • default – tüm bölgeyi tanımlar

Koordinatlar

Tıklanabilir alanı görüntüye yerleştirebilmek için bazı koordinatlar tanımlamanız gerekir.

Koordinatlar, biri x ekseni için diğeri de y ekseni için çiftler halinde gelir.

Koordinatlar 34, 44sol kenardan 34 piksel ve üstten 44 piksel bulunur:

Koordinatlar 270, 350sol kenardan 270 piksel ve üstten 350 piksel bulunur:

Artık tıklanabilir bir dikdörtgen alan oluşturmak için yeterli veriye sahipsiniz:

<area shape="rect" coords="34,44,270,350" alt="Computer" href="https://armyyazilim.com/wp-content/uploads/2019/12/mac.jpg">

Bu, tıklanabilir hale gelen alandır ve kullanıcıyı sayfaya computer.htm adresine gönderir:

Daire

Bir daire alanı eklemek için önce dairenin merkezinin koordinatlarını bulun:

337, 300

Ardından dairenin yarıçapını belirtin:

44 piksel

Artık tıklanabilir bir dairesel alan oluşturmak için yeterli veriye sahipsiniz:

<area shape="circle" coords="337,300,44" alt="Coffee" href="https://armyyazilim.com/wp-content/uploads/2019/12/coffeehouse2.jpg">
</map>

Bu, tıklanabilir hale gelen alandır ve kullanıcıyı sayfaya coffee.htm sayfasına gönderir:

Görüntü Haritası ve JavaScript

Tıklanabilir bir alan başka bir sayfaya bağlantı olmak zorunda değildir, ayrıca bir JavaScript işlevini de tetikleyebilir.

Bir JavaScript işlevi yürütmek clickiçin <area>öğeye bir etkinlik ekleyin :

onclickAlan tıklandığında bir JavaScript işlevi yürütmek için niteliği kullanabilirsiniz.

<area shape="circle" coords="337,300,44" onclick="myFunction()">

Bölüm özeti

<map>Bir görüntü haritası tanımlamak için HTML öğesini kullanın

<area>Görüntü haritasında tıklanabilir alanları tanımlamak için HTML öğesini kullanın

Bir resim eşlemesine işaret etmek için HTML’nin <img>element usemapözelliğini kullanın.

İlginizi çekebilir…

WordPress Kişisel Blog Temaları! (Ücretli – Ücretsiz)

Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz …


“HTML Image Maps Yapısı!” için bir cevap

  1. Yusuf Güven dedi ki:

    Bunu bilmiyordum. Güzel açıklamışsınız.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

İçerik Metası
İbrahim Bozkurt ///