HTML Resim Haritaları
HTML görüntü haritaları ile bir görüntü üzerinde tıklanabilir alanlar oluşturabilirsiniz.
Görüntü 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.
Aşağıdaki resimdeki bilgisayara, telefona veya bir fincan kahveye tıklamayı deneyin:
Örnek
İşte yukarıdaki resim haritasının HTML kaynak kodu:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<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="Coffee" href="coffee.htm">
</map>
O 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 görüntü haritası oluşturmak için bir görüntüye ve tıklanabilir alanları tanımlayan bir HTML koduna ihtiyacınız vardır.
Görüntü
<img>Resim etiketi kullanılarak eklenir . usemapDiğer görsellerden tek farkı, bir öznitelik eklemeniz gerektiğidir :
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
Değer , görüntü haritasının adının takip ettiği usemapbir hash etiketi ile başlar
#ve görüntü ile görüntü haritası arasında bir ilişki oluşturmak için kullanılır.
İpucu: Herhangi bir resmi resim haritası olarak kullanabilirsiniz!
Resim Haritası Oluştur
Ardından, bir <map>öğe ekleyin.
Öğe , bir görüntü haritası oluşturmak için kullanılır ve gerekli
özniteliği <map>kullanarak görüntüye bağlanır :name
<map name="workmap">
Öznitelik , öznitelik nameile aynı değere sahip olmalıdır
<img>.usemap
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ımlarcircle- dairesel bir bölge tanımlarpoly- çokgen bir bölgeyi tanımlardefault- 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:
Koordinatlar 270,350, sol kenar boşluğundan 270 piksel ve üstten 350 piksel uzaklıkta bulunur:
Artık tıklanabilir bir dikdörtgen alan oluşturmak için yeterli veriye sahibiz:
Örnek
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
Bu, tıklanabilir hale gelen ve kullanıcıyı "computer.htm" sayfasına gönderecek olan alandır:
Şekil = "daire"
Bir daire alanı eklemek için önce dairenin merkezinin koordinatlarını bulun:
337,300
Ardından dairenin yarıçapını belirtin:
44piksel
Artık tıklanabilir bir dairesel alan oluşturmak için yeterli veriye sahipsiniz:
Örnek
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
Bu, tıklanabilir hale gelen ve kullanıcıyı "coffee.htm" sayfasına gönderecek olan alandır:
Şekil = "çoklu"
Düz shape="poly"çizgilerle (bir çokgen) oluşturulmuş bir şekil oluşturan birkaç koordinat noktası içerir.
Bu, herhangi bir şekil oluşturmak için kullanılabilir.
Belki bir kruvasan şekli gibi!
Aşağıdaki görseldeki kruvasanı nasıl tıklanabilir bir link haline getirebiliriz?
Kruvasanın tüm kenarları için x ve y koordinatlarını bulmalıyız:
Koordinatlar, biri x ekseni, diğeri y ekseni için olmak üzere çiftler halinde gelir:
Örnek
<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="croissant.htm">
Bu, tıklanabilir hale gelen ve kullanıcıyı "croissant.htm" sayfasına gönderecek olan alandır:
Resim Haritası ve JavaScript
Tıklanabilir bir alan, bir JavaScript işlevini de tetikleyebilir.
JavaScript işlevini yürütmek clickiçin öğeye bir olay ekleyin :<area>
Örnek
Burada, alana tıklandığında bir JavaScript işlevi yürütmek için onclick özniteliğini kullanıyoruz:
<map name="workmap">
<area shape="circle" coords="337,300,44"
href="coffee.htm" onclick="myFunction()">
</map>
<script>
function
myFunction() {
alert("You clicked the coffee cup!");
}
</script>
Bölüm özeti
<map>Bir görüntü haritası tanımlamak için HTML öğesini kullanın<area>Görüntü haritasındaki tıklanabilir alanları tanımlamak için HTML öğesini kullanın- Bir görüntü haritasına işaret etmek için öğenin HTML
usemapniteliğini kullanın<img>
HTML Resim Etiketleri
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
Mevcut tüm HTML etiketlerinin tam listesi için HTML Etiket Referansımızı ziyaret edin .