CSS Image Sprites

ஒரு பட ஸ்ப்ரைட் என்பது பல்வேறு சிறிய படங்களின் தொகுப்பாகும், அவை ஒரு பெரிய பட கோப்பில் வைக்கப்படுகின்றன, இது "ஸ்ப்ரைட் படம்" என்று அழைக்கப்படுகிறது.

ஒரு ஸ்ப்ரைட் படம் பொதுவாக கிரிட் போன்ற வழியில் ஏற்பாடு செய்யப்படுகிறது:

Navigation Images Sprite

பல படங்களைக் கொண்ட ஒரு வலைப்பக்கம் ஏற்ற நீண்ட நேரம் எடுக்கும், மேலும் பல சேவையக கோரிக்கைகளை உருவாக்குகிறது.

எனவே, ஒவ்வொரு படத்தையும் தனித்தனியாக பதிவிறக்கம் செய்வதற்குப் பதிலாக, உலாவி ஒற்றை ஸ்ப்ரைட் பட கோப்பை பதிவிறக்கம் செய்யும், இது சேவையக கோரிக்கைகளின் எண்ணிக்கையைக் குறைக்கும் மற்றும் பட்டைஅகல பயன்பாட்டைக் குறைக்கும்.

CSS Image Sprites Example

பட ஸ்ப்ரைட்டுகளுக்குப் பயன்படுத்தப்படும் CSS முக்கிய பண்புகள்:

background-image
background-position

இங்கே, CSS குறியீடு வெவ்வேறு வழிசெலுத்தல் உருப்படிகளுக்கு (முகப்பு, முந்தையது, மற்றும் அடுத்தது) ஸ்ப்ரைட் படத்தின் ("img_navsprites.gif") எந்தப் பகுதியைக் காட்ட வேண்டும் என்பதைக் குறிப்பிடுகிறது:

Example

<html>
<head>
<style>
#home {
  width: 46px;
  height: 44px;
  background-image: url(img_navsprites.gif);
  background-position: 0 0; /* Top-left corner of the sprite */
}

#prev {
  width: 43px;
  height: 44px;
  background-image: url('img_navsprites.gif');
  background-position: -47px 0; /* 47px to the left of the sprite's top-left */
}

#next {
  width: 43px;
  height: 44px;
  background-image: url('img_navsprites.gif');
  background-position: -91px 0; /* 91px to the left of the sprite's top-left */
}
</style>
</head>
<body>

<img id="home" src="img_trans.gif" width="1" height="1">
<img id="prev" src="img_trans.gif" width="1" height="1">
<img id="next" src="img_trans.gif" width="1" height="1">

</body>
</html>

Example explained:

width, height - ஒவ்வொரு பட-பாகங்களின் அகலம் மற்றும் உயரத்தை வரையறுக்கிறது
background-image: url(img_navsprites.gif); - பட ஸ்ப்ரைட்டின் url ஐ வரையறுக்கிறது
background-position - ஒவ்வொரு உறுப்புக்குள்ளும் பின்னணி படத்தை மாற்றுகிறது, ஸ்ப்ரைட் படத்தின் விரும்பிய பகுதியை மட்டுமே காட்ட
<img id="home" src="img_trans.gif"> - ஒவ்வொரு படமும் ஒரு சிறிய வெளிப்படையான படத்துடன் தொடங்குகிறது, ஏனெனில் src பண்பு காலியாக இருக்க முடியாது (காட்டப்படும் படம் CSS இல் நாம் குறிப்பிடும் பின்னணி படமாக இருக்கும்)

Image Sprites in a Navigation List

இங்கே, நாம் ஒரு வழிசெலுத்தல் பட்டியலுக்குள் ஸ்ப்ரைட் படத்தை ("img_navsprites.gif") பயன்படுத்துகிறோம். வழிசெலுத்தல் பட்டியலுக்கு ஒரு HTML பட்டியலை (<ul> மற்றும் <li>) பயன்படுத்துவோம்:

Example

#navlist {
  position: relative;
}

#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}

#navlist li, #navlist a {
  height: 44px;
  display: block;
}

#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 0 0;
}

#prev {
  left: 60px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}

#next {
  left: 120px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}

மேலே உள்ள உதாரணம் வழிசெலுத்தல் பட்டியலில் பட ஸ்ப்ரைட்டுகளைக் காட்டுகிறது.

Example explained:

#navlist {position:relative;} - அதன் உள்ளே முழுமையான நிலைப்பாட்டை அனுமதிக்க தொடர்புடையதாக அமைக்கப்பட்டுள்ளது
#navlist li - விளிம்பு மற்றும் இடைவெளியை 0 ஆக அமைக்கவும், புல்லட்டுகளை அகற்றவும், மற்றும் அனைத்து <li> களும் முழுமையாக நிலைநிறுத்தப்பட்டுள்ளன
#navlist li, #navlist a - அனைத்து படங்களின் உயரத்தையும் 44px ஆக அமைத்து தொகுதியாகக் காட்டு
இப்போது ஒவ்வொரு வழிசெலுத்தல் உருப்படியையும் நிலைநிறுத்தி பாணியிடவும்:
- #home {left:0px;width:46px;} - இடதுபுறம் அனைத்து வழிகளிலும் நிலைநிறுத்தப்பட்டது, மற்றும் படத்தின் அகலம் 46px
- #home {background:url(img_navsprites.gif) 0 0;} - பின்னணி படம் மற்றும் அதன் நிலையை வரையறுக்கிறது (இடது 0px, மேல் 0px)
- #prev {left:60px;} - வலதுபுறம் 60px நிலைநிறுத்தப்பட்டது (#home அகலம் 46px + உருப்படிகளுக்கு இடையே சில கூடுதல் இடம்)
- #prev {background:url('img_navsprites.gif') -47px 0;} - பின்னணி படத்தை வலதுபுறம் 47px (#home அகலம் 46px + 1px வரி பிரிப்பான்) வரையறுக்கிறது
- #next {left:120px;} - வலதுபுறம் 120px நிலைநிறுத்தப்பட்டது (#prev தொடக்கம் 60px + #prev அகலம் 43px + கூடுதல் இடம்)
- #next {background:url('img_navsprites.gif') -91px 0;} - பின்னணி படத்தை வலதுபுறம் 91px (#home அகலம் 46px + 1px வரி பிரிப்பான் + #prev அகலம் 43px + 1px வரி பிரிப்பான்) வரையறுக்கிறது

Image Sprites - Hover Effect

இப்போது நமது வழிசெலுத்தல் பட்டியலுக்கு ஒரு ஹோவர் விளைவைச் சேர்க்க விரும்புகிறோம்.

எங்கள் புதிய படம் ("img_navsprites_hover.gif") மூன்று வழிசெலுத்தல் படங்கள் மற்றும் ஹோவர் விளைவுகளுக்குப் பயன்படுத்த மூன்று படங்களைக் கொண்டுள்ளது:

Navigation Image with hover Sprite

இது ஒரு ஒற்றை படமாக இருப்பதால், மற்றும் ஆறு தனி கோப்புகள் அல்ல, பயனர் படத்தின் மேல் சுட்டியை நகர்த்தும்போது ஏற்றுதல் தாமதம் இருக்காது.

ஹோவர் விளைவைச் சேர்க்க நாங்கள் மூன்று வரி குறியீட்டை மட்டுமே சேர்க்கிறோம்:

Example

#home a:hover {
  background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
  background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
  background: url('img_navsprites_hover.gif') -91px -45px;
}

Home

மேலே உள்ள பொத்தான்களின் மேல் சுட்டியை நகர்த்தி ஹோவர் விளைவைக் காண்க.

Example explained:

#home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;} - மூன்று ஹோவர் படங்களுக்கும் நாம் ஒரே பின்னணி நிலையைக் குறிப்பிடுகிறோம், 45px மட்டுமே கீழே.

Exercise

❓ பட ஸ்ப்ரைட்டில் ஒரு குறிப்பிட்ட பகுதியைக் காட்ட எந்த CSS பண்பு பயன்படுத்தப்படுகிறது?

background-image

✗ தவறு! background-image ஸ்ப்ரைட் படத்தை அமைக்கிறது, ஆனால் குறிப்பிட்ட பகுதியைக் காட்டாது

background-position

✓ சரி! background-position ஸ்ப்ரைட் படத்தில் குறிப்பிட்ட பகுதியைக் காட்ட பயன்படுகிறது

background-size

✗ தவறு! background-size பின்னணி படத்தின் அளவை மாற்றுகிறது

background-repeat

✗ தவறு! background-repeat பின்னணி படத்தின் மறுநிகழ்வைக் கட்டுப்படுத்துகிறது