Herkese merhaba. Bernatsky Andrey seninle.
Bu derste size nasıl oluşturulacağını göstereceğim. HTML resim haritaları .
Resim Haritası - bu bir tür resim, belki birkaç aktif bölgeye sahip bir fotoğraf.
Örneğin, aktif bölgeye tıkladığınızda belirli bir URL'ye gideriz. Vkontakte.ru'daysanız, bir resim haritası örneği vardır - bu, bir fotoğrafta işaretledikleri zamandır ve fareyi fotoğrafta işaretlenmiş bir kişinin üzerine getirdiğinizde, adı ve soyadı gösterilir ve ne zaman fareye tıklıyorsunuz, bu kişinin sayfasına gidiyorsunuz.
İlk olarak, size bu dersin bir video versiyonunu sunuyorum:
Bütün bunlar oldukça basit bir şekilde yapılır. Arkadaşlarla herhangi bir fotoğraf çekiyoruz. Kendi ayrı bloğuna eklemek daha iyidir.
.
XHTML
Örnek olarak kendi fotoğrafımı çektim.
İçin div verilen İD bazı girintiler veya başka ne gerekiyorsa atayabilmek için. Örneğimde hiçbir şey sormayacağım.
Etiketin ana parametresi resim bu durumda usemap = "# img-nav" ... Hangi isimle atıfta bulunacağımızı haritaya işaret eder.
XHTML
Sırayla gidelim.
Parametre şekil etiket şekil :
rect - Alanın dikdörtgen şeklinde olacağını belirtir.
poli - keyfi bir çokgen.
daire - alan bir daire şeklinde olacaktır.
Parametre kodlar bölgemizin koordinatlarını içerir.
Eğer şekil = "doğru" , ardından sol üst ve sağ alt koordinatları gösterilir. Yani, ilk sayı çifti sol üst köşeyi ve ikinci sayı çifti sağ alt köşeyi gösterir.
Eğer şekil = "poli" , daha sonra çokgenin her bir köşesinin koordinatları belirtilir. şekil = "çoklu" kodlar = "80,100,150,100,210,40,300,40,300,110" bu durumda, ilk köşenin koordinatları 80.100, ikinci 150.100, üçüncü - 210.40, dördüncü - 300.40, beşinci - 300.110 olacaktır.
Eğer şekil = "daire" , sonra merkezin ve yarıçapın koordinatlarını belirtiriz. şekil = "daire" koordinatlar = "300,300,100" burada merkez koordinatlar 300,300 ve yarıçap 100'dür.
başlık = "(! LANG: Andrey" alt="Andrey"
!} zaten bilinen parametreler. onların üzerinde durmayacağım.
Kodun tamamı aşağıda gösterilmiştir:
XHTML
Selam. Son zamanlarda, bir resim haritası gibi belirli bir html özelliğiyle uğraştım. Dürüst olmak gerekirse, sık kullanmadım ve sonra genellikle her şey dikdörtgen bölgelerle yapıldı. Ama durum böyle değildi. Görev, ülkenin haritası olan görüntünün tek tek bölgelerine bağlantılar göndermekti ve ne yazık ki, herhangi bir tuval veya svg söz konusu değildi. Sadece html sadece hardcore! Böylece görev belirlendi, Google etkinleştirildi ve başlayabilirsiniz.
teori harita - kart kabı ve alan - seçim alanı. Harita bir bölge ile sınırlı değildir ve sınırsız sayıda içerebilir. Etiket alan standart özelliklerin yanı sıra kendine has özellikleri vardır: kodlar - seçim alanının koordinatlarıhref - bölgeye tıklandığında geçişin yapılacağı linknohref - bölgenin bağlantı içermediğini gösterirşekil - seçim şekli Daire - daire şeklinde seçim alanıvarsayılan - tüm görüntü alanını seçerpoli - çokgen şeklinde seçim alanıdoğru - dikdörtgen şeklinde seçim alanıhedef - bağlantının nerede açılacağını belirlerharita bağlanmak isim rastgele bir adla ve resimlere bir etiket asıyoruz kullanım haritası , değeri biçimde belirtilen "#isim" .Seçim alanım çokgen olması gerektiğinden, şekil özniteliğinin değeri olan alan etiketini poli - çokgen alan olarak belirtiyoruz. Bu modda, noktanın sol üst köşeye göre virgülle ayrılmış koordinatları - x, y. Noktalar ayrıca virgülle ayrılır; bu, bu tür bir kodu okurken ilk başta kafa karıştırıcıdır.
Boya Yazma Önce düzeni hazırlayalım:
Gövde (kenar boşluğu: 0; dolgu: 20 piksel; yazı tipi ailesi: Arial, Helvetica, sans-serif;) img (kenarlık: yok; anahat: yok; ekran: blok; -moz-user-select: yok; -webkit-user -select: yok; kullanıcı-seçimi: yok;) .canvas (kenarlık: 2 piksel katı # 333; dolgu: 2 piksel; kenar boşluğu: 16 piksel; görüntüleme: satır içi blok; // görüntüleme: satır içi; // yakınlaştırma: 1; ) .canvas.draw (kenarlık rengi: # 3C0;) .canvas .inner (konum: göreceli;) .canvas .point (genişlik: 1 piksel; yükseklik: 1 piksel; arka plan rengi: #fff; kenarlık: 1 piksel düz # 000 ; taşma: gizli; konum: mutlak;) .bar (alt kenar boşluğu: 16 piksel;) .info (arka plan rengi: #FCFCFC; kenarlık: 1 piksel noktalı #CCC; yazı tipi boyutu: 12 piksel; yazı tipi stili: italik; dolgu : 8 piksel; sözcük kaydırma: sözcük kesme;)
Var addPoint = function (e) (var e = _.getEvent (e), offset = _.getOffset (düğümler ["canvas"]), x = e.clientX + _.getDocScrollLeft () - offset, y = e. clientY + _.getDocScrollTop () - offset, node = node ["canvas"].pendChild (_.node ("div", ("class": "point"))); node.style.top = y-1 + "px"; node.style.left = x-1 + "px"; point.push (("x": x, "y": y, "düğüm": düğüm)); e.preventDefault && e. önlemeDefault(); false döndür;);
Var renderInfo = function () (var text; _.clearNode (düğümler ["info"]); düğümler ["info"]. AppendChild (_. Node ("span", " ")); düğümler [" info "]. appendChild (_. node (" br ")); for (var i = 0, l = area.length; i< l; i++){
if(areas[i].length >0) (metin = " "));
};
HTML resimleri bir etiket kullanılarak web sayfalarına eklenir
HTML etiketlerini kullanma ve görüntü haritaları aktif alanlar ile
HTML belgesine resim ekleme
1. Etiket
eleman
Veya
.
Etiket
etiket için
Tablo 1. Etiket Nitelikleri Bağlanmak
Açıklama, kabul edilen değer
alt
alt özelliği, resim için alternatif metin ekler. Yüklenmeden önce veya grafikler devre dışı bırakıldığında görüntünün göründüğü yerde görüntülenir ve ayrıca fare imlecini görüntünün üzerine getirdiğinizde bir araç ipucu olarak görüntülenir.
çapraz kökenli
crossorigin özniteliği, CORS isteklerini kullanarak farklı bir etki alanındaki kaynaklardan gelen görüntüleri yüklemenize olanak tanır. CORS istekleri kullanılarak tuvale yüklenen resimler yeniden kullanılabilir. İzin verilen değerler:
boy uzunluğu
Height özelliği, görüntünün yüksekliğini px olarak ayarlar.
ismap
ismap özelliği, resmin sunucuda bulunan bir harita görüntüsünün parçası olduğunu belirtir (harita görüntüsü, tıklanabilir alanları olan bir görüntüdür). Harita görüntüsüne tıkladığınızda, koordinatlar sunucuya bir URL sorgu dizesi olarak gönderilir. ismap niteliğine yalnızca, öğenin geçerli bir href özniteliği ile.
uzun
Alt özelliğine ek olarak resmin genişletilmiş açıklamasının URL'si.
kaynak
src niteliği görüntünün yolunu belirtir.
boyutlar
Görüntünün boyutunu ekran parametrelerine göre ayarlar. Yalnızca srcset özniteliği belirtildiğinde çalışır. Öznitelik değeri, virgülle ayrılmış bir veya daha fazla dizedir.
kaynak seti
Ekran çözünürlüğüne göre seçilecek görüntü kaynaklarının bir listesini oluşturur. src niteliği ile birlikte veya onun yerine kullanılabilir. Öznitelik değeri, virgülle ayrılmış bir veya daha fazla satırdır.
kullanım haritası
Usemap özelliği, görüntüyü bir görüntü haritası olarak belirtir. Değer bir # karakterle başlamalıdır. Değer, etiketin name veya id özelliğinin değeriyle ilişkilendirilir. ve öğeler arasında bir bağlantı oluşturur ... Öğe, aşağıdaki durumlarda kullanılamaz: elementin soyundan geliyor veya .
Genişlik
Genişlik özelliği, görüntünün genişliğini px cinsinden ayarlar.
1.1. Resim adresi
Resim adresi tam (mutlak URL) olarak belirtilebilir, örneğin:
Veya göreli bir yoldan belge veya kök dizini alan:
Bu şu şekilde yorumlanır:
1.2. Görüntü boyutları
Görüntü boyutunu ayarlamadan çizim sayfada gerçek boyutta görüntülenir. Genişlik ve yükseklik niteliklerini kullanarak görüntünün boyutlarını düzenleyebilirsiniz. Niteliklerden yalnızca biri ayarlanırsa, resmin orantılarını korumak için ikincisi otomatik olarak hesaplanır.
1.3. Grafik dosya biçimleri
JPEG formatı (Birleşmiş Fotoğraf Uzmanları Grubu) ... JPEG görüntüler fotoğraflar için idealdir; milyonlarca farklı renk içerebilirler. Görüntüleri GIF'lerden daha iyi sıkıştırır, ancak metin ve düz renkli geniş alanlar lekelenebilir.
GIF formatı (Grafik Değişim Formatı) ... Logolar gibi düz renkli alanlara sahip görüntüleri sıkıştırmak için idealdir. GIF'ler, bir web sayfasının arka planının görüntünün bir bölümünde görünebilmesi için renklerden birini saydam olacak şekilde ayarlamanıza olanak tanır. GIF'ler ayrıca basit animasyonlar içerebilir. GIF'ler yalnızca 256 ton içerir, bu da görüntülerin lekeli ve posterler gibi gerçekçi olmayan görünmesini sağlar.
PNG formatı (Taşınabilir Ağ Grafikleri) ... GIF ve JPEG formatlarının en iyi özelliklerini içerir. 256 renk içerir ve görüntüleri bir GIF dosyasından daha küçük bir boyuta sıkıştırırken renklerden birini saydam yapmanıza olanak tanır.
APNG formatı (Animasyonlu Taşınabilir Ağ Grafikleri) ... PNG formatına dayalı görüntü formatı. Animasyonun saklanmasına izin verir ve ayrıca şeffaflığı destekler.
SVG formatı (Ölçeklendirilebilir Vektör Grafiği) ... Bir SVG çizimi, XML formatında tanımlanan bir dizi geometrik şekilden oluşur: çizgi, elips, çokgen vb. Hem statik hem de hareketli grafikler desteklenir. İşlev seti, çeşitli dönüşümler, alfa maskeleri, filtre efektleri, şablon kullanma yeteneği içerir. SVG görüntüleri kalite kaybı olmadan yeniden boyutlandırılabilir.
BMP formatı (Bitmap Resmi) ... Dikdörtgen bir piksel ızgarası ile desenlenmiş sıkıştırılmamış (orijinal) bir bit eşlemdir. Bir bitmap dosyası bir başlık, palet ve grafik verilerinden oluşur. Başlık, grafik görüntü ve dosya hakkında bilgi içerir (piksel derinliği, yüksekliği, genişliği ve renk sayısı). Palet, yalnızca palet görüntüleri (8 veya daha az bit) içeren ve en fazla 256 öğeden oluşan Bitmap dosyalarında belirtilir. Grafiksel veriler resmin kendisini temsil eder. Bu formattaki renk derinliği piksel başına 1, 2, 4, 8, 16, 24, 32, 48 bit olabilir.
ICO formatı (Windows simgesi) ... Microsoft Windows'ta dosya simgeleri için depolama biçimi. Ayrıca Windows ikonu internetteki sitelerde ikon olarak kullanılmaktadır. Tarayıcıda site adresinin veya yer iminin yanında görüntülenen bu biçimin bir resmidir. Bir ICO dosyası, her birinin boyutu ve rengi ayrı ayrı ayarlanmış bir veya birkaç simge içerir. Simgenin boyutu herhangi biri olabilir, ancak en yaygın simgeler 16, 32 ve 48 piksel kenarlı kare simgelerdir.
2. Etiket
Etiket aktif alanlara sahip bir harita şeklinde grafik bir görüntü sunmaya hizmet eder. Sıcak noktalar, üzerine gelindiğinde fare imlecinin görünümü değiştirilerek belirlenir. Kullanıcı, bağlantı noktalarına tıklayarak bağlantılı belgelere gidebilir.
Ad özelliği, haritanın adını belirten etiket için kullanılabilir. Etiket için name niteliğinin değeri öğenin usemap özelliğindeki adla eşleşmelidir
...
eleman bir dizi unsur içerir
3. Etiket
Etiket
Tablo 2. Etiketin özellikleri Bağlanmak
Kısa Açıklama
alt
Haritanın aktif alanı için alternatif metin belirtir.
kodlar
Alanın ekrandaki konumunu belirler. Koordinatlar uzunluk birimlerinde belirtilir ve virgülle ayrılır: Daire - dairenin merkezinin ve yarıçapının koordinatları; dikdörtgen - sol üst ve sağ alt köşelerin koordinatları; çokgen - çokgenin köşelerinin koordinatları istenen sırada, ayrıca şeklin mantıksal olarak tamamlanması için birinciye eşit son koordinatların belirtilmesi önerilir.
indirmek
href niteliğini tamamlar ve tarayıcıya kaynağın, örneğin önceden açmak (bir PDF dosyası gibi) yerine, kullanıcı bağlantıya tıkladığı anda yüklenmesi gerektiğini söyler. Niteliğe bir isim vererek, yüklenen nesneye bir isim vermiş oluyoruz. Değerini belirtmeden niteliği kullanmasına izin verilir.
href
Bağlantının URL'sini belirtir. Mutlak veya göreli bir bağlantı adresi belirtilebilir.
hreflang
Bağlantılı web belgesinin dilini belirtir. Yalnızca href özniteliği ile birlikte kullanılır. Kabul edilen değerler, bir dil kodunu belirten bir çift harften oluşan bir kısaltmadır.
medya
Dosyanın hangi tür cihazlar için optimize edileceğini belirler. Değer herhangi bir medya sorgusu olabilir.
rel
Geçerli belge ile bağlantılı belge arasındaki ilişki hakkındaki bilgilerle href niteliğini tamamlar. Kabul edilen değerler:
şekil
Haritadaki etkin noktanın şeklini ve koordinatlarını ayarlar. Aşağıdaki değerleri alabilir:
hedef
Bağlantıyı takip ederken belgenin nereye yükleneceğini belirtir. Aşağıdaki değerleri alır:
tip
Başvurulan dosyaların MIME türünü belirtir, ör. Dosya uzantısı.
4. Bir resim haritası oluşturma örneği
1) Orijinal görüntüyü istenilen şeklin aktif alanlarına işaretliyoruz. Alanların koordinatları bir fotoğraf işleme programı kullanılarak hesaplanabilir, örneğin, Adobe photoshop veya Boya .
Pirinç. 1. Harita oluşturmak için bir resim işaretleme örneği
2) Haritanın adını etikete ekleyerek ayarlayın name niteliğini kullanarak. Aynı değeri etiketin usemap niteliğine de atarız.
Jpg "alt =" (! LANG: çiçekler_foto" width="680" height="383" usemap="#flowers">
!}
HTML - Ders 15. Navigasyon haritaları - harita Birçok html sayfası, bağlantıları düzenlemek için sözde resim haritalarını kullanır. Bu yaklaşımda, bir görüntü alınır ve çeşitli bölgelerine bağlantılar sabitlenir. En yaygın örnek dünya turist haritalarıdır, bir ülke ile olan kısmına tıklarsınız ve o ülkeye ayrılmış bir sayfaya yönlendirilirsiniz.
Bu tür görüntü haritaları, istemci tarafı ve sunucu tarafı olabilir. İstemci haritalarının bağlantıları belgenin kendisinde saklanır ve fareyi tıklatarak tarayıcının kendisi bu noktanın koordinatlarının hangi alana atıfta bulunduğunu belirler ve istenen bağlantıyı takip eder.
Sunucu versiyonunda, bu koordinatlar önce sunucuya iletilir, orada özel bir program tarafından işlenir ve ancak bundan sonra bağlantı takip edilir.Açıkçası, istemci tarafı navigasyon haritaları tercih edilir. Onları değerlendireceğiz.
Örneğin, bir beyaz eşya mağazası olduğumuzu varsayalım ve web sitemizin başlığında aşağıdaki resim var:
Bundan bir navigasyon haritası çıkaralım, yani. bir buzdolabına tıklamak sizi buzdolaplarına ayrılmış sayfaya (modeller, açıklamalar ve fiyatlar ile) ve bir elektrikli süpürge ve çamaşır makinesine tıklayarak ilgili sayfalarına götürür.
Bunu yapmak için, bu resimde bağlantı olacak alanları tanımlamamız gerekiyor. Etiketler bu tür alanları tanımlamak için kullanılır.
isim referans haritasının adını belirten ve daha sonra bu haritaya atıfta bulunmak için kullanılan .
Kartımız resmimize bağlı olmalıdır, bunun için etikette
bir parametre eklemeniz gerekiyor
kullanım haritası değeri # (hash) işaretinden sonraki haritamızın adı olan :
Etiketler içindeki belirli alanları tanımlamak için
etiketler kullanılıyor
... Bu etiket aşağıdaki parametrelere sahiptir:
şekil - alanın şeklini tanımlar, aşağıdaki değerleri alabilir: doğru - dikdörtgen şeklinde alan,Daire - daire şeklinde bir alan,poli - çokgen şeklinde bir alan,varsayılan - tüm alan.cootd'lar - ayrı bir alanın koordinatlarını ayarlar: için doğru dikdörtgenin sol üst ve sağ alt köşelerinin koordinatları belirlenir, için Daire dairenin merkezinin ve yarıçapın koordinatları belirlenir, için poli çokgenin köşelerinin koordinatlarını istenen sırada belirtir.
href - bağlantı adresini tanımlar.hedef - çerçeveler kullanılırken kullanılır ve sayfanın yükleneceği çerçeveyi belirtir.alt - alan için alternatif metin ayarlar.Üç alanımız var, bu yüzden üç etiket olacak
: ilki elektrikli süpürgenin etrafındaki dikdörtgen alan, ikincisi çamaşır makinesinin etrafındaki dikdörtgen alan, üçüncüsü buzdolabının etrafındaki alan.
Şimdi bu alanların koordinatlarını belirlememiz gerekiyor. Aslında, bu en çok zaman alan süreçtir. Örneğimizde, alanların dikdörtgen olacağına karar verdik ve görevi kendimiz için çok daha kolay hale getirdik, ancak örneğin bir ülkeyi haritada daire içine almak için kaç nokta belirlemeniz gerektiğini hayal edin. Ancak, üç dikdörtgenin sol üst ve sağ alt köşelerinin koordinatlarını ayarlamamız gerekiyor.
Bu amaçlar için, genellikle bazı programlar kullanılır; örneğin, alanların ana hatlarını çizmek için özel bir araca sahip olan ve bu alanların açıklamalarını otomatik olarak oluşturan Image Ready. Bu programların işleyişini incelemek HTML dersine dahil değildir, bu yüzden burada koordinatları "gözle" ayarlayacağız. Resmimize bir kez daha bakın:
Görselimiz 738 piksel genişliğinde ve 192 piksel yüksekliğindedir. Alanlarımızın sınırları boyunca çizgiler çizelim ve kabaca koordinatları belirleyelim. Artık bu parametreleri etiketlerimize eklemeye hazırız.
Sonuç:
Artık alanlarımız bağlantı haline geldi (fare imlecini hareket ettirirseniz avuç içine dönüşür). Bu sitede buzdolabı sayfası yok, bu yüzden bağlantılar aynı sayfaya yönlendiriyor, ancak istediğiniz sayfaları oluşturursanız, alana tıklamak atlayacaktır.
Bu, derslerimizi sonlandırıyor. HTML dilinin tüm özelliklerine aşinasınız. Becerilerinizi pekiştirmek için Web sitesi yapma - elektronik tablo düzeni başlıklı iki dersi okuyun.
Son olarak, HTML etiketlerinde iki harika öğe daha olduğunu söylemeliyim.
ve
... Aslında bunlar çok önemli etiketlerdir, ancak onları CSS olmadan yönetmek için, bunu sadece bir "sapkınlık" olarak görüyorum, bu yüzden ayrıntılı olarak açıklanmıştır. HTML etiketleri
Anlamı ve uygulaması
Etiket bir harita görüntüsünü tanımlamak için kullanılır. Harita görüntüsü, tanımlanmış bir aktif alana sahip bir görüntüdür. eleman bir sayı içerir harita görüntüsündeki etkileşimli alanları tanımlayan etiketler, ör. görüntünün belirli bir alanına tıkladığınızda, belirli eylemler gerçekleşir, örneğin, görüntünün bu alanının açıklamasını içeren ayrı bir sayfa açılır.
tarayıcı desteği
Etiket
Evet Evet Evet Evet Evet Evet
Öznitellikler
Etiket özellikleri hem alanın koordinatlarını (coords niteliği) hem de ihtiyacımız olan şeklin türünü (şekil niteliği) belirtiriz:
kullanım örneği
Bir şekildeki belirli bir şekle tıkladığınızda, bu şekilleri tanımlayan farklı web sayfalarına gittiğiniz bir örneği ele alalım (Wikipedia bağlantıları):
</span> etiketi kullanan örnek <map>
Bir şekil seçin:
>
href = "green.html" alt = "(! LANG: Yeşil daire."
>
!} >
Ve sırayla, bu örnekte yaptığımız şey:
Bir resim yerleştirdi (etiket (adından önce bir kafes belirtmek gerekir).
Harita görüntüsünü yerleştirin (etiket ), name öğesinin (harita adı) tek ve gerekli özniteliğini belirledik. Etiketin aksine unutmayın
Dört etiket yerleştirin harita görüntüsündeki etkileşimli alanları tanımlayan: İlk Biz sorarız dikdörtgen alan ("rect" değerine sahip şekil niteliği), bizim ilk resim ( ilk iki değerler sol üst köşeye karşılık gelir, aşağıdakiler 2 değerler sağ üst ve sağ alt köşeyi tanımlar).İkinci belirtmek yuvarlak alan ("daire" değerine sahip şekil niteliği), bizim ikinci resim ( ilk değer, eksen boyunca koordinatlara karşılık gelir x , ve eksen boyunca ikinci y , üçüncü tanımlar yarıçap ).İlişkin üçüncü ve dördüncü şekil , daha sonra ilkeye göre oluşturulurlar çokgen alan ("poli" değerine sahip şekil niteliği). Görüntüde gerekli nokta sayısını belirlersiniz, bu noktaların koordinatlarını hesaplarsınız ( grafik düzenleyici ) ve tarayıcının bunları bir satırla bağlayabileceği şekilde belirtin. Örnek olarak bir üçgen kullanmak (üçüncü şekil): ilk nokta (koordinatlar x ve y köşeler), ikinci nokta (koordinatlar x ve y sol alt köşe) ve üçüncü nokta (koordinatlar x ve y sag alt köşe).
Dikkatinizi çekiyorum, eğer etiket
