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.
|
1 2 3 4 5 6 7 |
<!--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.
|
1 2 3 4 5 |
<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.
|
1 2 3 4 5 |
<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
|
1 2 3 4 5 6 7 8 9 10 |
<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.
Kod:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!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> |
dosya yok diyor o hata mı yoksa dosya bende yok diyemi? bilgilendirirseniz sevinirim
[…] HTML […]
Gayet güzel ve açıklayıcı olmuş teşekkür ederim.işime çok yaradı