எப்படி உங்கள் பிளாக்கில் உள்ள படத்தை Popup விண்டோவில் கட்டுவது

இன்றைய பதிவு எப்படி பிளாக்கில் இடப்பட்ட படத்தை கிளிக் செய்தால் உங்கள் வலைத்தளத்திலே படம் தெரியக் கூடியவாறு செய்தல் உங்களுக்கு சந்தேகம் இருந்தால் இந்த மாதிரியை பார்க்க

Live Demo

உங்கள் வலைதளத்தில் இப்படி செய்ய விருப்பப்பட்டால் முதலில் </head> என்ற கோட்டை கண்டுபிடியுங்கள்

அடுத்து கிழே கொடுத்த </head> என்ற கோட்டிற்கு கிழே போட்டு விட்டு Save Template என்பதனை கிளிக் செய்க

<style type='text/css'>
.img-thumbnail{
position: relative;
z-index: 0;
}
.img-thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.img-thumbnail span{
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 1px solid #000;
visibility: hidden;
color: black;
text-decoration: none;
}
.img-thumbnail span img{
border-width: 0;
padding: 2px;
}
.img-thumbnail:hover span{
visibility: visible;
top: -100px;
left:100px; /*position where enlarged image should offset horizontally */
}
</style>

அடுத்து கிழே கொடுக்கப்பட்டுள்ள கோட்டை நீங்கள் எந்த இடுக்கையில் போட கிழே கொடுத்த கோட்டில் url for image 1 என்பதற்கு பதிலாக உங்கள் படத்தின் Url போட வேண்டும் உங்களுக்கு இது புரிய வில்லை என்றால் பட விளக்கத்தை பார்க்க

<a class="img-thumbnail" href="#">
<img src="url for image 1" border="0" height="98" width="130"/>
<span>
<img src="url for image 1"/>
</span>
</a>