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
Ş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>
Son düzenleme:
Konu Sahibi
Konu Sahibi
Rica Ederim..Yorum için Teşekkürler..Paylaşım için teşekkürler
