Fethi Polat 1
Fethi Polat
xranzei 1
xranzei
Bvural41 1
Bvural41
kralhakan2009 1
kralhakan2009
noisiv 1
noisiv
Manwe Work 1
Manwe Work
Vahsi Uzman 1
Vahsi Uzman
Cannn6161 1
Cannn6161
B 1
berione65
sen272 1
sen272
Mt2Hizmet 1
Mt2Hizmet
Hikaye Ekle
Reklam vermek için turkmmo@gmail.com

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

  • Konuyu başlatan Konuyu başlatan ByESiNTi
  • Başlangıç tarihi Başlangıç tarihi
  • Cevaplar Cevaplar 2
  • Görüntüleme Görüntüleme 1K

ByESiNTi

ByESiNTi TURKMMO
Banlı
Katılım
21 Nis 2021
Konular
1,033
Mesajlar
4,724
Çözüm
15
Online süresi
3mo 27d
Reaksiyon Skoru
1,970
Altın Konu
343
TM Yaşı
5 Yıl 1 Ay 18 Gün
Başarım Puanı
287
Yaş
51
MmoLira
3,408
DevLira
12
Ticaret - 0%
0   0   0

ROHAN2 WORLD 1-120 TR TİPİ OFFICIAL YOHARA, BALATHOR VE AMON! 80. GÜNÜNDE! +10.000 ONLİNE! HİLE VE BOT %100 ENGELLİ HEMEN TIKLA!

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..




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:




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:

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:



Şekil = "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:

Ö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:
Paylaşım için teşekkürler :)
 

Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)

Geri
Üst