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 <head></head> tagları arasına aşağıdaki JS kodlarını ekliyoruz.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('img.altyazı').each(function() {var aciklama = $(this).attr('title'); $(this).wrap('<div class="cerceve"></div>') .after('<div class="aciklama">'+aciklama+'</div>');});}); </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.
<img src="http://www.adobewordpress.com/wp-content/uploads/2012/11/ojeler.jpg" alt="" title="AdobeWordPress.com ~ Ojeler" />
Kaynak ve Test Adresi : http://www.adobewordpress.com/css-ve...mlere-caption/