Altın Konu HTML İle Görüntüsü Üzerinde,Tıklanabilir Alanlar Oluşturmak..

ByESiNTi · 24 Tem 2021

HTML İle Resim Görüntüsü Üzerinde,Tıklanabilir Alanlar Oluşturmak..

Resim Haritaları

HTML <map>etiketi bir görüntü haritasını tanımlar. Görüntü haritası, tıklanabilir alanları olan bir görüntüdür. Alanlar bir veya daha fazla <area>etiketle tanımlanır .

Nasıl çalışır?

Bir görüntü haritasının arkasındaki fikir, görüntünün neresine tıkladığınıza bağlı olarak farklı eylemler gerçekleştirebilmeniz gerektiğidir.

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

Görüntü

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

<img src="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.

Kod:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

İpucu: Herhangi bir resmi resim haritası olarak kullanabilirsiniz!

Resim Haritası Oluştur

Ardından, bir <map>öğe ekleyin .
<map>Eleman bir resim haritası oluşturmak için kullanılır ve gerekli kullanarak görüntüsüne bağlıdır .
Aşağıdaki resimdeki bilgisayara, telefona veya bir fincan kahveye tıklamayı deneyin..

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

</body>
</html>

Alanlar

Ardından, tıklanabilir alanları ekleyin.

Bir <area>öğe kullanılarak tıklanabilir bir alan tanımlanır .

Şekil

Tıklanabilir alanın şeklini tanımlamanız gerekir ve şu değerlerden birini seçebilirsiniz:

rect - dikdörtgen bir bölge tanımlar
circle - dairesel bir bölge tanımlar
poly - çokgen bir bölge tanımlar
default - tüm bölgeyi tanımlar

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

Şekil = "düz"

Koordinatlar shape="rect"çiftler halinde gelir, biri x ekseni, diğeri y ekseni içindir.

Böylece, koordinatlar 34,44sol kenar boşluğundan 34 piksel ve üstten 44 piksel uzaklıkta bulunur:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Koordinatlar 270,350, sol kenar boşluğundan 270 piksel ve üstten 350 piksel uzaklıkta bulunur:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

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

Kod:

<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>
<p>Click on the computer, to go to a new page and read more about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
</map>

</body>
</html>

Bu, tıklanabilir hale gelen ve kullanıcıyı "computer.htm" sayfasına gönderen alandır:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Şekil = "daire"

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

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

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

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

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

Örnek:

Kod:

<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>
<p>Click on the cup of coffee to go to a new page and read more about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

</body>
</html>