HTML

Resme Link Verme

HTML Sayfalarında resimleri göstermek için <img> etiketlerini kullanırız. Resimlere link özelliği vermek için sadece <img> etiketi yeterli olmaz.  Bir HTML nesnesine link özelliği vermek için <a> etiketi kullanılması gerekir. Resimler için de durum böyledir. Resimlere link vermek için <a> ve <img> etiketini birlikte kullanılır.

Resim dışında word, pdf, yazı vb. belgelere link vermek için bağlantı oluşturma yazısını inceleyebilirsiniz.

 HTML Resme Link Verme

Temel olarak a etiketi içinde img etiketi kullanarak yapılır. Tabiki a ve img etiketilerinin gerekli nitelikleri (href, src) değerleri verilmesi gerekir.  Özetle en basit şekilde resme link verme kodu için a ve img etiketleri birlikte kullanılması gerekir.

HTML sayfalarında resimlere tıklama özelliği  genellikle aşağıdaki işlemlerden biri için yapılır.

  • Ekrandaki HTML resmi indirmek için
  • Resmi yeni bir sayfada açmak için
  • Resme tıklandığında yeni bir sayfa açmak için
  • Facebooktaki gibi resim galersi yapmak için (lightbox)

HTML Resme İndirme Linki Verme

Resim (img)  içindeki yolu  link (a) içindeki yol ile aynı verilir. <a> etiketine donwload niteliği de eklendiğinde resmin indirilebilir hale gelir.

 

HTML Resmi Yeni Sekmede Açma

Remi yeni sekmede açmak için <a> etiketine target=”_blank” yazılarak yeni sekmede açılabilir.

 

Resme Tıklandığında Yeni Bir Sayfa Açma

 

Lightbox Resim Galerisi Yapma

Resim galeri yapmak için Jquery ve Jquery Lightbox eklentisini birlikte kullanarak aşağıdaki gibi galeri oluşturulabilir.

http://lokeshdhakar.com/projects/lightbox2/ eklentisi ile resimleri  aynı sayfada galeri olarak göstermek mümkündür.

Lightbox Örneğini İndir

Kod:

 

 

 

 

Yorum Yap