HTML grafik kartları. Harita resim fare oyna

Destek tarayıcıları

Öznitellikler

Kullanım örneği

Bir resimde belirli bir rakama tıklandığında, bu rakamları tanımlayan farklı web sayfalarına bir geçiş olduğunu düşünelim (Wikipedia'ya bağlantılar):

Bir figürü seçin:

"Seçim için 4 rakamlar mevcuttur"

Ve böylece bu örnekte yaptığımız şey:

Bu makalede, belirli bir alana tıkladığınızda belirli bir bağlantıya tıklayacağız, bir istemci resim kartı yapmayı düşüneceğiz. Haritalama haritaları sitelerde nadiren bulunabilir, çünkü bu işlem oldukça zaman alıcıdır, ancak ziyaretçilerinizi referanslar için sıradışı bir formda şaşırtmak istiyorsanız ve kendi kendine eğitim için boş zamanınız varsa, bu makale sizin içindir.

Etiket

Kullanım örneği

Bir resimde belirli bir rakama tıklandığında, bu rakamları tanımlayan farklı web sayfalarına bir geçiş olduğunu düşünelim (Wikipedia'ya bağlantılar):

Bir figürü seçin:

"Seçim için 4 rakamlar mevcuttur"

Ve böylece bu örnekte yaptığımız şey:

Komut istemi: Görüntü koordinatlarını almak için, görüntü düzenleyicisini, en kolay editörü bile kullanın, örneğin, Boya.İmlecin koordinatlarını görüntüler. Koordinatları sayfaya veya ayrı bir dosyaya yazın ve sayfadaki değerleri yapın.

Bir görevi yerine getirmekte zorlanıyorsanız, bir örnek olarak ayrı bir pencereye açarak sayfa kodunu inceleyin ve dikkatlice okuyun.

Vlad Merzehevich

Görüntü kartları, bir görüntünün farklı alanlarına bağlantıları bağlamanıza izin verir. İki farklı versiyonda - sunucu ve istemcide uygulanır. Sunucu uygulanırsa, tarayıcı seçilen bağlantının adresini almak için sunucuya bir istek gönderir ve gerekli bilgilere bir cevap bekliyor. Bu yaklaşım, her görüntü kartı için sonucu ve bireysel dosyaları beklemek için ek süre gerektirir.

Müşteri sürümünde, harita, resmin bağlantısı olarak aynı HTML belgesinde bulunur.

İstemci resim kartı

Görüntünün bir harita olduğunu belirtmek için USMAP Tag özelliğini kullanın . Değer, Harita Yapılandırma Açıklamasına bağlantısını gösterir.

Örnek 1. Bir harita resmi kullanarak

Görüntünün harita olduğuna dair tarayıcıyı belirtmek için, USEMAP niteliği uygulanır. Etiket tarafından belirlenen kart yapılandırmasının yapılandırmasına bir referanstır.

Nitelikler Tag alanı.

şekil vermek

Aktif bölgenin şeklini belirler. Form, bir daire (daire), bir dikdörtgen (rekth), bir çokgen (poli) şeklinde olabilir.

alt.

Her alan için alternatif bir metin ekler. Ekran görüntülenmediğinden, yalnızca referans için bir yoruma hizmet eder.

koordineler.

Aktif alanın koordinatlarını belirtir. Koordinatlar, görüntünün sol üst açısından 0.0'a karşılık gelen piksellerde sayılır. İlk numara, yatay koordinattır, ikincisi dikey olarak. Koordinat listesi bölgenin biçimine bağlıdır.

Çember için, üç sayı ayarlanır - dairenin merkezinin ve yarıçapın koordinatları.

Bir dikdörtgen için - sol üst ve sağ alt köşenin koordinatları.

Poligon için, köşelerinin koordinatları ayarlanır (Şekil 2).

İncir. 2. Depolama depolama alanı için koordinat noktaları

hREF.

Görüntü kartları, bir görüntünün farklı alanlarına bağlantılar oluşturmanıza olanak sağlar. Bu yaklaşımı kullanmak normal metin bağlantılarından daha net bir şekildedir ve bağlantıları düzenlemek için yalnızca bir grafik dosyası uygulamanıza izin verir. Bununla birlikte, kart görüntülerinin grafik bağlantılarının gerekli olduğu her yere dahil edilmesi gerektiğini varsaymak gerekli değildir. Her şeyden önce, her ikisi için tüm argümanları hem alternatif seçenekleri görmemelisin.

Kartların Avantajları

1. Kartlar, herhangi bir referans alanı formunu belirlemenizi sağlar. Doğası ile görüntülerin dikdörtgenler olduğu göz önüne alındığında, örneğin coğrafi alanı, kart görüntüleri olmadan, coğrafi alanı belirtmek için karmaşık bir formun grafiksel bir referansını oluşturur. Bir kural olarak, harita görüntüsünün coğrafi konularında ve en sık uygulayın.

2. Bir dosya çalışmak için daha uygun - bireysel parçaların satın alımına dikkat etmeniz gerekmez ve resim kolayca doğru yere yerleştirilebilir.

Dezavantajları

1. Bireysel alanlar için bir pop-up ucu ve alternatif bir metin kuramazsınız. Alternatif metin, görüntü yüklemesi tarayıcıda devre dışı bırakıldığında resim hakkında metin bilgisi almanızı sağlar. Resimlerin yüklenmesi, bilgi tarayıcısını aldıktan sonra gerçekleştiğinden, yedek desen metni daha önce görünür. Ve yüklendiği gibi, metin görüntü tarafından değiştirilecektir. Kartlar için, bu özellik ilgilidir, çünkü birçok kullanıcının yaptığı resimlerin izlenmesini devre dışı bırakırsanız, sonunda yalnızca bir boş dikdörtgen göreceğiz.

2. Karmaşık bir formda, referans alanı HTML kodunun miktarını arttırır. Kontur, bir dizi düz segmentle yaklaşık olarak, iki koordinat, böyle bir segmentin her bir nokta için ayarlanmalıdır ve bu tür noktanların toplam sayısı oldukça büyük olabilir. Adalette, karmaşık formların özel bir durum olduğu ve nadiren uygulandığı belirtilmelidir.

3. Kartlarla, görüntüler fragmanlar için bir paterni kesilirken mevcut olan farklı efektler yapılamaz: Haddeleme etkisi, kısmi animasyon, hızlı yükleme için resimlerin bireyselleştirilmesi.

Yuzlik

Kullanıcı rahatlığının bakış açısından, kart görüntülerinin yalnızca bir avantajı var - çeşitli formların referansları var. Bu, bilgi sunumunda netlik ekler - biz dikdörtgen referans formuyla sınırlı değiliz ve karmaşık yapılandırmanın referanslarını amaçlarıyla kullanabilir. Diğer tüm ilişkilerde, kullanımı yoktur - normal metin bağlantıları daha bilgilendiricidir ve tarayıcıdaki resimlerin ekranını devre dışı bırakmak korkunç değildir. Bir görüntünün aynı resimden daha hızlı yüklenmesi, ancak fragmanlara kıyılmış ve bir dizi grafik dosyası formuna kaydedildiği gerçeği kolayca muhasebeleştirilir. Bu uç dosyaların her biri, bireysel optimizasyon ayarları kullanılarak azaltılabilir. Sonuç olarak, tüm parçaların toplam hacmi bir görüntüden daha az yer kaplayacaktır. İndirim ve psikolojik faktör - bir kişi, bir dizi küçük resimlerin bir büyüklüğüne daha hızlı yüklendiği gibi görünüyor.

Ana hatalar kartları açıkça özel bağlantı sınırları değildir. Bu nedenle, bu sınırların görüntüdeki farklı yollarla tahsis edilmesi gerekir. Resim herhangi bir nedenden dolayı önyüklemiyorsa, referanslar kümesinde çok sorunlu hale gelir.

Alternatif Seçenekler

Kart görüntülerini kullanmak için acil bir ihtiyaç yoktur, bu nedenle görevi gerçekleştirmek için başka olası seçenekler olduğu gerçeğine dikkat etmelisiniz.

Flash kullanarak.

Flaş silindirlerinde, vektör grafiklerini kullanarak farklı bağlantı bağlantıları oluşturabilirsiniz. Geniş fırsatlar sayesinde Flash'ta çarpıcı menüler ve navigasyon araçları oluşturabilirsiniz. Ancak burada ayrıca, orman ağaçlarının arkasında kaybetmemesi gerekmektedir.

Görüntüleri kesme

Bu, tasarımdaki popüler fonlardan biridir. Bu durumda bir görüntü, nihayet birlikte azaltılan, katı bir resim yanılsaması oluşturan parçalara özel programlar aracılığıyla kesilir. Kesme alanları sadece dikdörtgen olabilse de, çoğu durumda bu referans oluşturmak için yeterlidir. Her bir parça için, kaydedileceği en uygun grafiksel formatı seçebilirsiniz, optimizasyon seçenekleri, alternatif metin ekleyin. Öyleyse resimler devre dışı bırakıldığında bile, alanların sınırları ve metnin görüntüsü açıkça görülebilir.

Özet

Çıktığı gibi, haritalar-görüntülerin kullanılmasının nedeni sadece birdir - tasarım görevleri tarafından belirlenen karmaşık referansların şeklidir. Tipik Uygulama - Referans olarak hizmet veren bir coğrafi haritanın bölgeleri. Diğer tüm durumlarda, metin bağlantılarını yapabilirsiniz ve grafik navigasyon oluşturmanız gerekirse, kolaylık için bir görüntü parçalara ayrılabilir. Bu yaklaşım, kullanıcılara, özellikle de farklı nedenlerden dolayı, tarayıcıdaki görüntülerin ekranını ayırdıkları için daha fazla kolaylık yaratacaktır. Onlar da onları hatırlamaları gerekir.

"Çeşitli web sayfaları tanımlanmış alanlara (" ") bağlantılarını barındırmak için bir iş parçası yaptım (" ")

Şimdi, yazıtlara sahip rakamlara tıklarsanız, ilgili sayfalar açılır: "Photoshop Dersleri" bölümünden profil, günlüğü veya tüm yazılar (dikkat! Blogu WordPress'e ve onun değişikliklerine aktardıktan sonra, bağlantılar işe yaramaz! Ancak ders alakalı kalır!)

Resmin çalışması için, böyle bir HTML kodu hakkında yazdım:

Bu kod mesaj alanına yerleştirilebilir ("Kaynak" düğmesine basıldığında) veya epigrafe ...

Bu arada, konuda başka yazılar var: "HTML nedir ","HTML Çizim Kodu ","Link Resmi "vb.

1. Koordinatlar

Belirtilen kodu derlemek için küçük bir geometri hatırladım :)

Koordinat sistemi: x ekseni - yukarıdan aşağıya, Y ekseni - soldan sağa
Şekilin koordinatlarını belirlemek için, yüklemeniz gerekir:
- Kare (veya dikdörtgen), yanları eksenlere paralel olan - iki zıt açının koordinatları - X1, Y1 ve X2, Y2
- Poligon - Tüm açıların koordinatları
- Daire - Merkez koordinatları ve yarıçapı.

Davamda, A, C noktalarının koordinatları, referans için "profil" (dikdörtgen), noktalar D, E, F, G, H - "günlüğü" (çokgen), Q ve uzunluğu için R - Referans için "Photoshop Dersleri» (daire). HTML kodundaki tüm bu sayılar kırmızı olarak vurgulanır. Ek olarak, görüntünün boyutunu piksellerde (yeşil) bilmeniz gerekir.

Özel doğruluğa gerek yoktur, bu nedenle, photoshop'taki "satır" yardımıyla koordinatları belirlemek mümkündür - aramak için CTRL + R.

Başka birinin koordinatları hesaplaması için daha ilginçti. Bu lansman için MS boyası. (Başlat - Tüm Programlar - Standart - Boya) ve içinde bir çizim açın. İmleci alt paneldeki istenen noktalara getirdiğinizde, koordinatları dikkatlice kaydederken ortaya çıkar.

2. HTML kodu

Gezinme kartları etiketle belirlenir

Tag haritası etiketleri içerir çizimin geometrik alanlarını ve ilgili referansları tanımlar.

Bunu çözdüm - Gerekli bir navigasyon kartı oluşturmak için:

— resim Açıklaması ile Etiketler

— kart etiketleri

— etiketler bölgeleri

Benim durumumda, değerler ortaya çıktı:

• genişlik \u003d. "640" Yükseklik \u003d. "367" - Görüntünün boyutları
• src \u003d "https: //syt/f02c73a3cd94.jpg" - sitedeki görüntünün adresi
• usemap \u003d "# resim " - Koşullu görüntü kartı adı (belki herhangi biri)
• harita adı \u003d. "Resim" - Harita adı (tamamen Yukarıdakilere karşılık gelir)

Bağlantı alanları için değerler - HREF - Bağlantının hedefi, şekli - Alanın ve koordinelerin şekli - koordinatlar - görüntüdeki üç alana (alan) karşılık gelir.

Dikdörtgen "Profil"

• href \u003d "https: // site / profil /" - Profil Sayfası Adresi
• Şekil \u003d "doğru" - "dikdörtgen" formunun atanması
• koorlar \u003d "235,61,472,117" - Noktaların Koordinatları A (235.61) ve C (472,117)

Çokgen "Günlüğü"

• href \u003d "https: // site / blog" - Günlüğü Sayfa Adresi
• şekli \u003d "poli" - "çokgen" formunun belirlenmesi
• koordineler \u003d "235,118,362,118,474,152,457,207,29,1146" - çokgen açılarının koordinatları: D (235,118), E (362,118), F (474,152), g (457,207) ve H (229,146)

"Photoshop Dersleri" daire

• href \u003d "https: //syt/showjournal.php? Journalid \u003d 2447247" - "Photoshop Dersleri" bölümünden yazıların yayınlarının adresi
• Şekli \u003d "daire" - atama "dairesi"
• coords \u003d "551,198,65" - Circle koordinatları: Center - Point Q (551,198) ve yarıçapı - R \u003d 65

3. bitirmek

Gezinme haritası görüntüsü için HTML kodunun "sistem" ndeki tüm elde edilen değerleri yazın ve aşağıdakileri alındı:

Bağlantı alanlarıyla resme "döner" kullanırken bu koddur.

Eğitim için, linkler oluşturmanın "hafif" bir kolay sürümü var - "Eğitim: Resimdeki Bağlantılar"

Bir hata bulduysanız, lütfen metin parçasını seçin ve tıklayın Ctrl + Enter..