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.

<!--Temel Kullanımı a etiekti içinde img etiketi kullanmaktır. -->

<a>
 <img>
</a>

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.

<a download href="http://via.placeholder.com/350x150">
    <img src="http://via.placeholder.com/350x150">
</a>

HTML Resmi Yeni Sekmede Açma

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

<a target="_blank" href="http://via.placeholder.com/350x150">
    <img src="http://via.placeholder.com/350x150">
</a>

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

<a href="yenisayfa.html">
    <img src="http://via.placeholder.com/350x150">
</a>


<a href="https://www.yazilimbilisim.net">
    <img src="http://via.placeholder.com/350x150">
</a>

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:

<!DOCTYPE html>
<html>
	<head>
        <meta charset="utf-8">        
        <title>Yazılım Bilişim</title>
        <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>
        <link href="lightbox/css/lightbox.min.css" rel="stylesheet">
        <style>
            img{
                width: 250px;
            }
        </style>
    </head>

    <body>    
        <a href="orn1.png" data-lightbox="site-resim">
            <img src="orn1.png">
        </a>
         <a href="orn2.png" data-lightbox="site-resim">
            <img src="orn2.png">
        </a>
         <a href="orn3.png" data-lightbox="site-resim">
            <img src="orn3.png">
        </a>
         <a href="orn4.png" data-lightbox="site-resim">
            <img src="orn4.png">
        </a>
        
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="lightbox/js/lightbox.min.js"></script>
        <script>
        </script>
    </body>
</html>

Yorum

Yorum Yap X