Bu çalışma JavaScript‘in replace koduyla çalışmakta. Sayfa içerisindeki altyazı classına sahip tüm görsellerin title değerini örnekte gördüğünüz gibi göstermekte.

İlk olarak HTML dosyamızın tagları arasına aşağıdaki JS kodlarını ekliyoruz.

<script></script> <script> $(document).ready(function(){ $('img.altyazı').each(function() {var aciklama = $(this).attr('title'); $(this).wrap('

') .after('

'+aciklama+'

');});}); </script>

Şimdi CSS dosyamıza aşağıdaki kod satırlarını ekliyoruz.

.cerceve {
position:relative;
float:left;
}
.aciklama {
position:absolute;
bottom:0;
left:0;
text-align:center;
background:black;
color:white;
width:100%;
opacity:.75;
font: bold 0.8em/1em arial;
padding:5px 0 5px 0;
filter:alpha(opacity=85);
}
.cerceve img {display:block;}


ve son olarak HTML dosyamızda görselimizi yayınlama şeklimize altyazı classını ekliyoruz.



Kaynak ve Test Adresi : http://www.adobewordpress.com/css-ve-jquery-yardimiyla-resimlere-caption/