Görüntü haritalarını kullanmanın yararları ve sakıncaları
Birçok sitenin "görüntü haritaları" olarak bilinen bir özelliği kullandığı web tasarım tarihinde bir nokta vardı. Bu, bir sayfada belirli bir resme eklenen koordinatların listesidir. Bu koordinatlar, bu görüntü üzerinde, her biri farklı yerlere bağlanmak için kodlanabilen bir grafiğe "sıcak noktalar" ekleyerek gerekli olan hiperlink alanları oluşturur. Bu, bir görüntünün bağlantı etiketinin eklenmesinden çok farklıdır; bu, tüm grafiğin tek bir hedefe giden büyük bir bağlantı olmasına neden olur.
Örnekler - Amerika Birleşik Devletleri görüntüsüne sahip bir grafik dosyası olduğunu hayal edin. Her bir durumun "tıklanabilir" olmasını istiyorsanız, söz konusu durumla ilgili sayfalara gidersiniz, bunu bir resim haritasıyla yapabilirsiniz. Benzer şekilde, bir müzik grubu görüntüsüne sahip olsaydınız, her bir üyenin o grup üyesi hakkında bir sonraki sayfaya tıklanabilir olması için bir resim haritası kullanabilirsiniz.
Görüntü haritaları işe yarar mı? Kesinlikle vardı, ama bugünün Web’inde iyilikten düşmüşler. Bu, en azından kısmen, çünkü görüntü haritalarının çalışması için belirli koordinatlar gerektirir. Günümüzde siteler , bir ekranın veya cihazın boyutuna göre duyarlı ve görsel olarak oluşturulmuştur. Bu, görüntü haritalarının nasıl çalıştığı, önceden ayarlanmış koordinatların, bir site ölçeklendiğinde ve resimlerin boyutu değiştiğinde düşer. Görüntü haritalarının günümüzde yapım sitelerinde nadiren kullanılmasının nedeni budur, ancak bir sayfanın boyutunu zorladığınız demolar veya örnekler için hala avantajları vardır.
Bir resim haritasının nasıl oluşturulacağını, özellikle Dreamweaver ile nasıl yapılacağını bilmek ister misiniz? . Süreç özellikle zor değil, ama ya da kolay değil, bu yüzden başlamadan önce biraz deneyim sahibi olmalısınız.
Başlamak
Başlayalım. Yapmanız gereken ilk adım, web sayfanıza bir resim eklemektir. Daha sonra vurgulamak için resmin üzerine tıklarsınız. Oradan, özellikler menüsüne gitmeniz (ve üç sıcak nokta çizim aracından birini tıklamanız gerekir: dikdörtgen, daire veya çokgen.) Özellik çubuğunda yapabileceğiniz resminizi adlandırmayı unutmayın. İstediğiniz her şeyi "örnek" olarak bir örnek olarak kullanın.
Şimdi, bu araçlardan birini kullanarak görüntünüzde istediğiniz şekli çizin. Dikdörtgen noktalara ihtiyacınız varsa, rectange'ı kullanın. Daire için de aynı. Daha karmaşık hotspot şekilleri istiyorsanız, çokgen kullanın. Çokgen, görüntüde çok karmaşık ve düzensiz şekiller oluşturmanıza olanak tanıyacağından, ABD haritasının örneğinde kullanacağınız şey budur.
Hotspot'un özellikler penceresinde, hotspot'un bağlanacağı sayfaya yazı yazın veya göz atın. Bu linkable alanın yarattığı şey budur. Haritanız tamamlanana ve eklemek istediğiniz tüm bağlantılar eklenene kadar sıcak noktalar eklemeye devam edin.
İşiniz bittiğinde, doğru çalıştığından emin olmak için görüntü haritanızı bir tarayıcıda yeniden görüntüleyin. Uygun kaynağa veya web sayfasına gittiğinden emin olmak için her bağlantıyı tıklayın.
Görüntü Haritalarının Dezavantajları
Bir kez daha, görüntü haritalarının, yanıt veren web siteleriyle daha önce bahsedilen destek eksikliğinin dışında bile birkaç eksiği olduğunu unutmayın. Firmalar, küçük detaylar bir görüntü haritasında gizlenebilir. Örneğin, coğrafi görüntü haritaları kullanıcının hangi kıtayı belirlediğini belirlemeye yardımcı olabilir, ancak bu haritalar kullanıcının menşe ülkesini kesin olarak belirlemek için yeterince ayrıntılı olmayabilir. Bu, bir resim haritasının, bir kullanıcının Asya’dan olup olmadığını, özellikle Kamboçya’dan olmadığını belirlemeye yardımcı olabileceği anlamına gelir.
Görüntü haritaları da yavaşça yüklenebilir. Bir web sitesinde her defasında çok fazla yer kapladıkları için bir web sitesinde birden fazla kez kullanılmamalıdırlar. Tek bir sayfada çok fazla resim haritası ciddi bir darboğaz yaratır ve site performansında büyük bir etki yaratır.
Son olarak, görsel problemlere erişen kullanıcılar için görüntü haritaları kolay olmayabilir. Görüntü haritalarını kullandıysanız, bu kullanıcılar için alternatif olarak başka bir navigasyon sistemi de oluşturmalısınız.
Alt çizgi
Zaman zaman görüntü haritalarını, bir tasarımın hızlı bir demosunu ve nasıl çalıştığını bir araya getirmeye çalışıyorum. Örneğin, bir mobil uygulama için bir tasarım alay ediyor olabilirim ve uygulamanın etkileşimini simüle etmek için sıcak noktalar oluşturmak için resim haritalarını kullanmak istiyorum. Bu, uygulamayı kodlamak ve hatta HTML ve CSS ile mevcut standartlara göre oluşturulmuş kukla web sayfaları oluşturmaktan çok daha kolaydır. Bu özel örnekte, ve hangi cihazın tasarımını demo edeceğimi ve bu cihaza kodu ölçekleyebileceğimi bildiğimden, bir resim haritası çalışır, ancak bunları bir üretim sitesine veya uygulamaya koymak çok zordur ve muhtemelen günümüzde kaçınılmalıdır. web siteleri.
Jennifer Krynin tarafından yazılmış orijinal makale. Jeremy Girard tarafından 9/7 / 17'de düzenlendi.