Skip to content

Görüntü Haritası Düzenleyicisi Olmadan Görüntü Haritaları Nasıl Oluşturulur

6 de Haziran de 2021

Bilinmesi gereken

• Tarayıcının yeniden ölçeklendirmeyeceği normal boyutlu bir resim kullanın. Ayrıca bir resim düzenleyiciye ve bir HTML veya metin düzenleyiciye ihtiyacınız olacak. • Resmi eklerken, haritanın koordinatlarını tanımlamak için ekstra bir nitelik ekleyin. • Örneğin: Bu makale, bir resim haritası düzenleyicisi yerine HTML etiketlerini kullanarak Resim Haritalarının nasıl oluşturulacağını açıklar. Çoğu görüntü düzenleyici, görüntünün üzerine geldiğinizde farenizin koordinatlarını gösterir; bu, görüntü haritalarına başlamak için ihtiyacınız olan tüm verilerdir.

İçinde iğne ve iplik bulunan harita

Jonathan Minster/Getty Images

Görüntü Haritası Oluşturma

Bir resim haritası oluşturmak için önce haritanın temeli olacak bir resim seçin. Görüntü “normal boyutta” olmalıdır; yani, tarayıcının ölçekleyebileceği kadar büyük bir görüntü kullanmamalısınız. Resmi eklediğinizde, haritanın koordinatlarını tanımlayan fazladan bir özellik ekleyeceksiniz: Kediler!

class=”ql-syntax”> Bir resim haritası oluşturduğunuzda, resim üzerinde tıklanabilir bir alan yaratmış olursunuz, bu nedenle haritanın koordinatları, seçtiğiniz resmin yüksekliği ve genişliği ile aynı hizada olmalıdır. Haritalar, üç farklı şekil türünü destekler:

  • rect—bir dikdörtgen veya dört kenarlı şekil
  • poli—bir çokgen veya çok kenarlı şekil
  • daire – bir daire

Alanları oluşturmak için, haritalamayı düşündüğünüz belirli koordinatları ayırmanız gerekir. Bir harita, görüntü üzerinde tıklandığında yeni bir köprü açan bir veya daha fazla tanımlı alandan oluşabilir. için dikdörtgen, yalnızca sol üst ve sağ alt köşeleri eşlersiniz. Tüm koordinatlar x,y (üst, yukarı) olarak listelenir. Böylece, sol üst köşe 0,0 ve sağ alt köşe 10,15 için şunu yazarsınız: 0,0,10,15. Daha sonra onu haritaya dahil edin:

Morris

class=”ql-sözdizimi”>

için çokgen, her birinin haritasını çıkarırsın x,y ayrı ayrı koordine edin. Web tarayıcısı, son koordinat kümesini ilkine otomatik olarak bağlar; bu koordinatların içindeki her şey haritanın bir parçasıdır.

Garfield

class=”ql-sözdizimi”>

Daire şekiller, dikdörtgen gibi yalnızca iki koordinat gerektirir, ancak ikinci koordinat için yarıçapı veya dairenin merkezine olan uzaklığı belirtirsiniz. Yani, merkezi 122,122 ve yarıçapı 5 olan bir daire için 122,122,5 yazarsınız:

Catbert

class=”ql-sözdizimi”>

Tüm alanlar ve şekiller aynı harita etiketine dahil edilebilir:

Morris

Garfield

Catbert

class=”ql-sözdizimi”>

Hususlar

1990’ların Web 1.0 döneminde ve 2000’lerin başlarında görüntü haritaları çok daha yaygındı; görüntü haritaları genellikle bir web sitesinin navigasyonunun temelini oluşturuyordu. Bir tasarımcı, menü öğelerini belirtmek için bir tür resim oluşturur ve ardından bir harita oluşturur. Modern yaklaşımlar, duyarlı tasarımı teşvik eder ve bir sayfadaki görüntülerin ve köprülerin yerleşimini kontrol etmek için basamaklı stil sayfaları kullanır. Harita etiketi HTML standardında hala destekleniyor olsa da, küçük form faktörlerine sahip mobil cihazların kullanımı, görüntü haritalarında beklenmeyen performans sorunlarına yol açabilir. Ek olarak, bant genişliği sorunları veya bozuk görüntüler, bir görüntü haritasının değerini tartışır. Bu nedenle, şu anda daha verimli alternatifler olduğunu bilerek bu istikrarlı, iyi anlaşılmış teknolojiyi kullanmaya devam etmekten çekinmeyin. en moda Web tasarımcıları ile.