Gallery என்பது ஒரே அளவிலான பல்வேறு படங்களின் தொகுப்பு ஆகும். Galary-க்குள் இருக்கும் ஒவ்வொரு படத்தின் மீது சென்று சொடுக்கும் போதும், அதற்கான முழு படம் பெரிய அளவில் வெளிப்படும். இது போன்ற ஒரு gallery-ஐ உருவாக்குவதற்கான code பின்வருமாறு அமையும்.
[code]
<html>
<head>
<style>
div.one {margin:5px; padding:5px; border:1px; solid red; float:left; text-align:center;}
div.one img { display:inline; margin: 5px; border:1px solid yellow; width:170px; height:150px;}
div.one a:hover img{border:1px solid blue;}
div.two {text-align:center; font-weight:normal; width:120px; margin:5px;}
</style>
</head>
<body>
<div class="one"> <a target="_blank" href="a1.jpg"><img src="a1.jpg"></a> <div class="two">1</div></div>
<div class="one"> <a target="_blank" href="a2.jpg"><img src="a2.jpg"></a> <div class="two">2</div></div>
<div class="one"> <a target="_blank" href="a3.jpg"><img src="a3.jpg"></a> <div class="two">3</div></div>
<div class="one"> <a target="_blank" href="a4.jpg"><img src="a4.jpg"></a> <div class="two">4</div></div>
</body>
</html>
[/code]
இங்கு <style>-க்குள் முதலாவதாக கொடுக்கப்பட்டிருக்கும் div.one என்பது one எனும் பெயர் கொண்ட division எவ்வாறு அமைக்கப்பட வேண்டும் எனும் விவரத்தை அளிக்கிறது. பின்னர் அதற்குள் உள்ள <img>-ன் நீல அகல உயர விவரம் இரண்டாவது வரியில் கொடுக்கப்பட்டுள்ளது. மூன்றாவது வரியில் cursor எந்த image-ன் மீது செல்கிறதோ அந்த image border மட்டும் நீல நிறத்தில் மாறும் வண்ணம் a:hover என்பது கொடுக்கப்பட்டுள்ளது. கடைசியாக உள்ள வரியானது one எனும் பெரிய division-க்குள் two எனும் பெயர் கொண்ட மற்றொரு division-ஐ உருவாக்கி அதற்குள் image-ஐ சீராக வைக்க உதவுகிறது.
அடுத்தபடியாக Gallery-க்குள் எந்த image-ன் மீது cursor செல்கிறதோ அந்த image மட்டும் தெளிவாகத் தெரியும்படியும், மற்றவையெல்லாம் சற்று மங்கலாக இருக்கும் படியும் அமைப்பதற்கு Opacity எனும் பண்பு பயன்படுகிறது. இதன் மதிப்பு 100-லிருந்து குறையக் குறைய image-ன் தெளிவு மங்கலாகிக் கொண்டே செல்லும். இது பின்வருமாறு.
[code]
<html>
<head>
<style>
div.one {margin:5px; padding:5px; border:1px; solid red; float:left; text-align:center;}
div.one img { display:inline; margin: 5px; border:1px solid yellow; width:170px; height:150px; opacity: 0.4; filter:alpha(opacity=40);}
div.one a:hover img{border:1px solid blue;opacity: 1; filter:alpha(opacity=100);}
div.two {text-align:center; font-weight:normal; width:120px; margin:5px;}
</style>
</head>
<body>
<div class="one"> <a target="_blank" href="a1.jpg"><img src="a1.jpg"></a> <div class="two">1</div></div>
<div class="one"> <a target="_blank" href="a2.jpg"><img src="a2.jpg"></a> <div class="two">2</div></div>
<div class="one"> <a target="_blank" href="a3.jpg"><img src="a3.jpg"></a> <div class="two">3</div></div>
<div class="one"> <a target="_blank" href="a4.jpg"><img src="a4.jpg"></a> <div class="two">4</div></div>
</body>
</html>
[/code]
IE8 மற்றும் அதற்கும் குறைந்த version-களில் filter:alpha(opacity=40); என்று கொடுக்க வேண்டும். இல்லையெனில் opacity:0.4; என்று கொடுத்தால் போதுமானது.
து. நித்யா
தொடரின் பிற பகுதிகளைப் படிக்க – www.kaniyam.com/category/css-in-tamil/