HTML - Resim Bağlantıları

Metin kullanarak nasıl hipermetin bağlantısı oluşturulacağını gördük ve ayrıca web sayfalarımızdaki resimleri nasıl kullanacağımızı da öğrendik. Şimdi, köprü oluşturmak için görüntüleri nasıl kullanacağımızı öğreneceğiz.

Misal

Bir resmi köprü olarak kullanmak çok basit. Sadece aşağıda gösterildiği gibi metin yerinde köprü içinde bir resim kullanmamız gerekiyor -

<!DOCTYPE html>
<html>

   <head>
      <title>Image Hyperlink Example</title>
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "https://www.tutorialspoint.com" target = "_self"> 
         <img src = "/images/logo.png" alt = "Tutorials Point" border = "0"/> 
      </a>
   </body>
	
</html>

Bu, Tutorials Point'in ana sayfasına ulaşmak için resimlere tıklayabileceğiniz aşağıdaki sonucu üretecektir.

Bu, görüntüleri kullanarak köprü oluşturmanın en basit yoluydu. Ardından, Fareye Duyarlı Görüntü Bağlantılarını nasıl oluşturabileceğimizi göreceğiz.

Fareye Duyarlı Görüntüler

HTML ve XHTML standartları, birçok farklı bağlantıyı tek bir görüntünün içine yerleştirmenize izin veren bir özellik sağlar. Tek görüntü üzerinde, görüntü üzerinde bulunan farklı koordinatlara göre farklı bağlantılar oluşturabilirsiniz. Farklı koordinatlara farklı bağlantılar eklendiğinde, hedef belgeleri açmak için görüntünün farklı bölümlerine tıklayabiliriz. Bu tür fareye duyarlı görüntüler, görüntü eşlemeleri olarak bilinir.

Görüntü haritaları oluşturmanın iki yolu vardır -

Server-side image maps - Bu, ismap <img> etiketinin özniteliği ve bir sunucuya ve ilgili görüntü eşleme işleme uygulamalarına erişim gerektirir.
Client-side image maps - Bu, usemap <img> etiketinin özniteliği, karşılık gelen <map> ve <area> etiketleri.

Sunucu Tarafı Görüntü Haritaları

Burada resminizi bir hiper bağlantının içine koymanız ve ismapözelliği onu özel bir görüntü haline getirir ve kullanıcı görüntünün herhangi bir yerine tıkladığında, tarayıcı fare imlecinin koordinatlarını <a> etiketinde belirtilen URL ile birlikte web sunucusuna iletir. Sunucu, hangi belgenin tarayıcıya geri teslim edileceğini belirlemek için fare işaretçisi koordinatlarını kullanır.

Ne zaman ismap kullanılır içeren <a> etiketinin href niteliği geçti koordinatlara dayanan gelen isteği işlemek için cgi veya PHP komut dosyası vb gibi bir sunucu uygulamasının URL içermelidir.

Fare konumunun koordinatları, görüntünün sol üst köşesinden (0,0) ile başlayarak sayılan ekran pikselleridir. Önünde soru işareti bulunan koordinatlar URL'nin sonuna eklenir.

Örneğin, bir kullanıcı aşağıdaki görüntünün sol üst köşesinden 20 piksel üzerinde ve 30 piksel aşağıyı tıklarsa -

Aşağıdaki kod parçacığı tarafından oluşturulan -

<!DOCTYPE html>
<html>

   <head>
      <title>ISMAP Hyperlink Example</title>
   </head>
	
   <body>
      <p>Click following link</p>
      
      <a href = "/cgi-bin/ismap.cgi" target = "_self"> 
         <img ismap src = "/images/logo.png" alt = "Tutorials Point" border = "0"/> 
      </a>
   </body>
	
</html>

Ardından tarayıcı, aşağıdaki arama parametrelerini web sunucusuna gönderir ve bunlar tarafından işlenebilir. ismap.cgi komut dosyası veya map file ve istediğiniz belgeleri bu koordinatlara bağlayabilirsiniz -

/cgi-bin/ismap.cgi?20,30

Bu şekilde görüntünün farklı koordinatlarına farklı bağlantılar atayabilir ve bu koordinatlara tıklandığında ilgili bağlantılı belgeyi açabilirsiniz. Hakkında daha fazla öğrenmek içinismapözniteliğini kontrol edebilirsiniz Image ismap nasıl kullanılır?

Note- Perl programlamayı çalışırken CGI programlamayı öğreneceksiniz. Bu aktarılan koordinatları PHP veya başka bir komut dosyası kullanarak işlemek için komut dosyanızı yazabilirsiniz. Şimdilik, HTML öğrenmeye odaklanalım ve daha sonra bu bölümü tekrar ziyaret edebilirsiniz.

İstemci Tarafı Görüntü Haritaları

İstemci tarafı görüntü haritaları, usemap <img /> etiketinin niteliği ve özel <map> ve <area> uzantı etiketleriyle tanımlanır.

Haritayı oluşturacak görüntü, <img /> etiketi kullanılarak normal bir görüntü olarak sayfaya eklenir, tek farkı usemap. Usemap özniteliğinin değeri, harita ve resim etiketlerini bağlamak için bir <map> etiketinde kullanılacak değerdir. <map>, <area> etiketleriyle birlikte tüm görüntü koordinatlarını ve ilgili bağlantıları tanımlar.

Harita etiketinin içindeki <area> etiketi, görüntü üzerinde bulunan tıklanabilir her bir sıcak noktanın sınırlarını tanımlayan şekli ve koordinatları belirtir. İşte resim haritasından bir örnek -

<!DOCTYPE html>
<html>

   <head>
      <title>USEMAP Hyperlink Example</title>
   </head>
	
   <body>
      <p>Search and click the hotspot</p>
      <img src = /images/html.gif alt = "HTML Map" border = "0" usemap = "#html"/>
      <!-- Create  Mappings -->
      
      <map name = "html">
         <area shape = "circle" coords = "80,80,20" 
            href = "/css/index.htm" alt = "CSS Link" target = "_self" />
         
         <area shape = "rect" coords = "5,5,40,40" alt = "jQuery Link" 
            href = "/jquery/index.htm" target = "_self" />
      </map>
   </body>
   
</html>

Bu, aşağıdaki sonucu verecektir -

Koordinat sistemi

Koordinatların gerçek değeri tamamen söz konusu şekle bağlıdır. İşte bir özet, ardından ayrıntılı örnekler sunulacak -

rect = x₁ , y₁ , x₂ , y₂

x ₁ ve y ₁ , dikdörtgenin sol üst köşesinin koordinatlarıdır; x ₂ ve y ₂ , sağ alt köşenin koordinatlarıdır.
circle = x_c , y_c , radius

x _c ve y _c , dairenin merkezinin koordinatlarıdır ve yarıçap, dairenin yarıçapıdır. 200,50 merkezli ve 25 yarıçaplı bir dairenin öznitelik koordinatları = "200,50,25" olur
poly = x₁ , y₁ , x₂ , y₂ , x₃ , y₃ , ... x_n , y_n

Çeşitli xy çiftleri, bir noktadan diğer noktaya bir "çizgi" çizilerek çokgenin köşelerini (noktaları) tanımlar. En üst noktası 20,20 ve en geniş noktalarında 40 piksel olan bir elmas şeklindeki çokgen, öznitelik koordinatlarına = "20,20,40,40,20,60,0,40" sahip olacaktır .

Tüm koordinatlar görüntünün sol üst köşesine (0,0) görelidir. Her şeklin ilgili bir URL'si vardır. Farklı konumların koordinatlarını bilmek için herhangi bir görüntü yazılımını kullanabilirsiniz.