HTML Görüntü Haritaları

Çoğu zaman, şuna benzer bir bağlantı bulabileceğiniz web sitelerini ziyaret etmiş olabilirsiniz: ' Daha fazla bilgi edinmek için bağlantıyı ziyaret edin ”. Sonuç olarak, buna tıklarsanız, farklı bir web sitesine yönlendirileceksiniz. Aynı şekilde, HTML'nin görüntü eşleme işlevi, görüntülere tıklanabilir bağlantılar eklememizi sağlar. Belirtilen alana tıkladığınızda sayfa bizi başka bir kaynağa yönlendirecektir.

Bu gönderi size şunları öğretecek:

HTML Görüntü Haritaları nedir?
HTML Belgesinde Görüntü Haritaları Nasıl Oluşturulur?
Diğer Sayfaya Bağlantılı Görüntü Haritası Nasıl Oluşturulur?

HTML Görüntü Haritaları nedir?

Görüntü haritası, tıklanabilen alanları olan bir resimdir. HTML'de bir görüntü haritası oluşturmak için ' ” öğesi kullanılır. Ayrıca bir veya daha fazla “ Alanları belirtmek için “” öğesinin içine ” etiketleri eklenir.

Sözdizimi

Bir HTML belgesinde görüntü eşlemelerini belirtmek için kullanılan söz dizimi aşağıda belirtilmiştir:

< img kaynak = 'resimler/img1.jpg' her şey = 'dizüstü bilgisayar' kullanım haritası = '#tıklama alanı' >

< harita isim = 'tıklama alanı' >

< alan şekil = 'doğru' koordinatlar = '224.37.422.312' href = 'dizüstü bilgisayar.html' >

< / harita >

“ ” öğesi aşağıdaki özniteliklerle tanımlanır:

“ kaynak ” görüntü yolunu belirtir.
“ her şey ”, bir resim yüklenemediğinde alternatif bir metin gösterir.
“ kullanım haritası ” görüntü alanlarını tıklanabilir yapmak için belirtilir. Bir bağlantı oluşturmak için değeri, “” öğesinin sınıfı veya kimliği ile aynı olmalıdır.

“ ” öğesi aşağıdaki niteliklerle eklenir:

“ şekil ”bir HTML'nin alan boyutunu belirtir” ” öğesi.
“ koordinatlar ” niteliği, tıklanabilir alanın koordinatlarını tanımlar.
“ href ” özniteliği, kaynağın URL'sini belirtir.

HTML Belgesinde Görüntü Haritaları Nasıl Oluşturulur?

Bir HTML belgesinde görüntü haritası oluşturmak için verilen talimatlara göz atın:

HTML'de bir 'ekleyin
” öğe ve bir sınıf atayın “ görüntü haritası ”.
Bu div içinde bir “ Yukarıda tartışılan özelliklerle ilişkili bir görüntü eklemek için ” öğesi.
Ardından, bir HTML ekleyin ' ” öğesini seçin ve ona “ tıklama alanı ' isim.
“ kullanım haritası ' özniteliğe ' adı atanır ' #tıklama alanı ' işaret ederek ' isim “” etiketinin özniteliği.
İçine “ ” yukarıda belirtilen özelliklere sahip etiket:

< div sınıf = 'görüntü haritası' >

< img kaynak = 'resimler/img1.jpg' her şey = 'dizüstü bilgisayar' kullanım haritası = '#tıklama alanı' >

< harita isim = 'tıklama alanı' >

< alan şekil = 'doğru' koordinatlar = '224.37.422.312' href = 'dizüstü bilgisayar.html' >

< / harita >

< / div >

Görselin boyutunu ayarlamak için CSS bölümüne doğru ilerleyelim.

CSS'de “
” Stili

“ .resim haritası ' sınıfına erişmek için '

” öğesini seçin ve aşağıdaki CSS özelliklerini uygulayın:

.resim haritası {

Genişlik : 700 piksel;

marj: araba;

}

Bahsedilen CSS özelliklerinin açıklaması aşağıdadır:

“ Genişlik ” özelliği, div öğesinin genişliğini ayarlar.
“ marj ” özelliği, öğenin etrafına daha fazla alan ekler.

Stil “img” Elemanı

.resim haritası img {

Genişlik : 100 %;

}

Bakınız, “” bölümünde belirtilen alan koordinatları koordinatlar ” özniteliği artık tıklanabilir:

Bir sonraki bölümde, görüntü haritasını başka bir kaynağa nasıl bağlayacağımızı öğreneceğiz.

Diğer Sayfaya Bağlantılı Görüntü Haritası Nasıl Oluşturulur?

' uzantılı başka bir HTML sayfası oluşturun. .html ” aşağıda belirtilen adımları izleyerek:

Bizim durumumuzda, ona 'adını veriyoruz' laptop.html ”.
Bir div öğesi ekleyin ve ona bir sınıf atayın ' laptop-img ”.
Ardından, “ kullanarak bir görüntü yerleştirin. ” öğesini seçin ve “ öğesini ilişkilendirin kaynak ' ve ' Genişlik ' Öznitellikler.
Ardından, “ kullanarak bir paragraf belirleyin.
” öğesi:

< div sınıf = 'dizüstü bilgisayar görüntüsü' >

< img kaynak = '/resimler/laptop.jpg' Genişlik = '400 piksel' >

< p >Dizüstü bilgisayar, taşınabilen ve çeşitli ayarlarda kullanılabilen taşınabilir bir bilgisayardır.< / p >

< / div >

CSS'de, aşağıdaki CSS özelliklerini ' laptop-img ' sınıf:

.laptop-img {

Genişlik : 500 piksel;

marj: araba;

}

Çıktı

Şimdi, “ laptop.html 'resme sayfa' ” ilk sayfanın öğesi. Bunu yapmak için sayfanın URL'sini ' href “ ” öğesinin aşağıda gösterildiği gibi ” niteliği:

< alan şekil = 'doğru' koordinatlar = '310.57.590.470' href = 'dizüstü bilgisayar.html' >

Çıktı

Görüntü haritalarının ne olduğunu ve diğer kaynaklarla nasıl bağlantılı olduklarını başarıyla öğrendik.

Çözüm

HTML' ” öğesi, bir görüntü haritası veya tıklanabilir alanlara sahip bir görüntü oluşturmak için kullanılır. Resmin tıklanabilir alanlarını tanımlamak için bir veya daha fazla ' “” öğesinin içine ” etiketleri eklenir. Ayrıca, “ ” etiketiyle ilişkilendirilen öznitelikler “ şekil ”, “ koordinatlar ', ve ' href ”. Bu gönderi, HTML resim haritalarının nasıl oluşturulacağını bir örnekle gösterdi.

HTML Görüntü Haritaları