எளிய தமிழில் CSS – 9 – Gallery

Gallery என்பது ஒரே அளவிலான பல்வேறு படங்களின் தொகுப்பு ஆகும். Galary-க்குள் இருக்கும் ஒவ்வொரு படத்தின் மீது சென்று சொடுக்கும் போதும், அதற்கான முழு படம் பெரிய அளவில் வெளிப்படும். இது போன்ற ஒரு gallery-ஐ உருவாக்குவதற்கான 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>

இங்கு <style>-க்குள் முதலாவதாக கொடுக்கப்பட்டிருக்கும் div.one என்பது one எனும் பெயர் கொண்ட division எவ்வாறு அமைக்கப்பட வேண்டும் எனும் விவரத்தை அளிக்கிறது. பின்னர் அதற்குள் உள்ள <img>-ன் நீல அகல உயர விவரம் இரண்டாவது வரியில் கொடுக்கப்பட்டுள்ளது. மூன்றாவது வரியில் cursor எந்த image-ன் மீது செல்கிறதோ அந்த image border மட்டும் நீல நிறத்தில் மாறும் வண்ணம் a:hover என்பது கொடுக்கப்பட்டுள்ளது. கடைசியாக உள்ள வரியானது one எனும் பெரிய division-க்குள் two எனும் பெயர் கொண்ட மற்றொரு division-ஐ உருவாக்கி அதற்குள் image-ஐ சீராக வைக்க உதவுகிறது.

அடுத்தபடியாக Gallery-க்குள் எந்த image-ன் மீது cursor செல்கிறதோ அந்த image மட்டும் தெளிவாகத் தெரியும்படியும், மற்றவையெல்லாம் சற்று மங்கலாக இருக்கும் படியும் அமைப்பதற்கு Opacity எனும் பண்பு பயன்படுகிறது. இதன் மதிப்பு 100-லிருந்து குறையக் குறைய image-ன் தெளிவு மங்கலாகிக் கொண்டே செல்லும். இது பின்வருமாறு.


<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>

IE8 மற்றும் அதற்கும் குறைந்த version-களில் filter:alpha(opacity=40); என்று கொடுக்க வேண்டும். இல்லையெனில் opacity:0.4; என்று கொடுத்தால் போதுமானது.

 

 

து. நித்யா

nithyadurai87@gmail.com

தொடரின் பிற பகுதிகளைப் படிக்க – www.kaniyam.com/category/css-in-tamil/

Leave a Reply

%d bloggers like this: