CSS Image Sprites

فهرست مطالب

    نمایش فهرست مطالب

ﺮﯾﻮﺼﺗ ﯼﺎﻫ ﻦﺟ

.ﺪﻧﺮﯿﮔ ﯽﻣ ﺭﺍﺮﻗ ﺮﯾﻮﺼﺗ ﮏﯾ ﺭﺩ ﻪﮐ ﺖﺳﺍ ﺮﯾﻭﺎﺼﺗ ﺯﺍ ﯼﺍ ﻪﻋﻮﻤﺠﻣ ﺖﯾﺍﺮﭙﺳﺍ ﺮﯾﻮﺼﺗ

ﺪﺷﺎﺑ ﻪﺘﺷﺍﺩ ﺯﺎﯿﻧ ﺪﯿﻟﻮﺗ ﻭ ﯼﺭﺍﺬﮔﺭﺎﺑ ﯼﺍﺮﺑ ﯼﺩﺎﯾﺯ ﻥﺎﻣﺯ ﺪﻧﺍﻮﺗ ﯽﻣ ﺩﺎﯾﺯ ﺮﯾﻭﺎﺼﺗ ﺎﺑ ﺏﻭ ﻪﺤ

ﺪﻨﮐ ﯽﻣ ﻩﺮﯿﺧﺫ ﻭ ﺪﻫﺩ ﯽﻣ ﺶﻫﺎﮐ ﺍﺭ ﺭﻭﺮﺳ ﯼﺎﻫ ﺖﺳﺍﻮﺧﺭﺩ ﺩﺍﺪﻌﺗ ﺖﯾﺍﺮﭙﺳﺍ ﺮﯾﻭﺎﺼﺗ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ

Image Sprites - ﻩﺩﺎﺳ ﻝﺎﺜﻣ

:ﻢﯿﻨﮐ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ("img_navsprites.gif") ﺪﺣﺍﻭ ﺮﯾﻮﺼﺗ ﻦﯾﺍ ﺯﺍ ،ﻪﻧﺎﮔﺍﺪﺟ ﺮﯾﻮﺼﺗ ﻪﺳ ﺯﺍ

.ﻢﯿﻫﺩ ﻥﺎﺸﻧ ﻢﯾﺭﺍﺩ ﺯﺎﯿﻧ ﻪﮐ ﺍﺭ ﺮﯾﻮﺼﺗ ﺯﺍ ﯽﺸﺨﺑ ﻂﻘﻓ ﻢﯿﻧﺍﻮﺗﯽﻣ CSS ﺎﺑ

"img_navsprites.gif" ﺯﺍ ﺖﻤﺴﻗ ﻡﺍﺪﮐ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ CSS ،ﺮﯾﺯ ﻝﺎﺜﻣ ﺭﺩ

ﻝﺎﺜﻣ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
#home {
  width: 46px;
  height: 44px;
  background: url(img_navsprites.gif) 0 0;
}

#next {
  width: 43px;
  height: 44px;
  background: url(img_navsprites.gif) -91px 0;
}
</style>
</head>
<body>

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

</body>
</html>

ﻩﺪﺷ ﻩﺩﺍﺩ ﺢﯿﺿﻮﺗ ﻪﻧﻮﻤﻧ:

<img id="home" src="img_trans.gif">

ﻢﯿﻨﮐ ﯽﻣ ﺺﺨﺸﻣ CSS ﺭﺩ ﻪﮐ ﺩﻮﺑ ﺪﻫﺍﻮﺧ ﯼﺍ ﻪﻨﯿﻣﺯ ﺲﭘ ﺮﯾﻮﺼﺗ ﻩﺪﺷ ﻩﺩﺍﺩ ﺶﯾﺎﻤﻧ ﺮﯾﻮﺼﺗ .ﺪﺷﺎﺑ

width: 46px; height: 44px;

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻢﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﻢﯿﻫﺍﻮﺧ ﯽﻣ ﻪﮐ ﺍﺭ ﺮﯾﻮﺼﺗ ﺯﺍ ﯽﺘﻤﺴﻗ -

background: url(img_navsprites.gif) 0 0;

(ﻞﺴﮑﯿﭘ 0 ﻻﺎﺑ ،ﻞﺴﮑﯿﭘ 0 ﭗﭼ ﺖﻤﺳ) ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻥﺁ ﺖﯿﻌﻗﻮﻣ ﻭ ﻪﻨﯿﻣﺯ ﺲﭘ ﺮﯾﻮﺼﺗ -

.ﻢﯿﻫﺩ ﺵﺮﺘﺴﮔ ﺭﻭﺎﻨﺷ ﯼﺎﻫ ﺖﮑﻓﺍ ﻭ ﺎﻫﺪﻧﻮﯿﭘ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ ﺍﺭ ﻥﺁ ﻢﯿﻫﺍﻮﺧ ﯽﻣ ﻥﻮﻨﮐﺍ ،ﺖﺳﺍ

Image Sprites - ﺪﯿﻨﮐ ﺩﺎﺠﯾﺍ ﺶﯾﺎﻤﯿﭘ ﺖﺴﯿﻟ ﮏﯾ

.ﻢﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺶﯾﺎﻤﯿﭘ ﺖﺴﯿﻟ ﮏﯾ ﺩﺎﺠﯾﺍ ﯼﺍﺮﺑ sprite ("img_navsprites.gif") ﺮﯾﻮﺼﺗ ﺯﺍ

:ﺪﻨﮐ ﯽﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ ﻪﻨﯿﻣﺯ ﺲﭘ ﺮﯾﻮﺼﺗ ﮏﯾ ﺯﺍ ﻦﯿﻨﭽﻤﻫ ﻭ ﺪﺷﺎﺑ ﺪﻧﻮﯿﭘ ﮏﯾ ﺪﻧﺍﻮﺗ ﯽﻣ ﺍﺮﯾﺯ ،ﺩﺮ

ﻝﺎﺜﻣ

#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: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
#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: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>
</html>

ﻩﺪﺷ ﻩﺩﺍﺩ ﺢﯿﺿﻮﺗ ﻪﻧﻮﻤﻧ:

#navlist {position:relative;}

ﺩﻮﺷ ﻢﻫﺍﺮﻓ ﻥﺁ ﻞﺧﺍﺩ ﺭﺩ ﻖﻠﻄﻣ ﺖﯿﻌﻗﻮﻣ ﻥﺎﮑﻣﺍ ﺎﺗ ﺖﺳﺍ ﻩﺪﺷ ﻢﯿﻈﻨﺗ ﯽﺒﺴﻧ ﯼﻭﺭ ﺖﯿﻌﻗﻮﻣ -

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

ﺪﻧﺮﯿﮔ ﯽﻣ ﺭﺍﺮﻗ ﻖﻠﻄﻣ ﺖﯿﻌﻗﻮﻣ ﺭﺩ ﺖﺴﯿﻟ ﺩﺭﺍﻮﻣ ﻪﻤﻫ ﻭ ﺩﻮﺷ ﯽﻣ ﻑﺬﺣ ﺖﺴﯿﻟ ﮏﺒﺳ ،ﺖﺳﺍ ﻩﺪﺷ ﻢﯿﻈ

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

ﺖﺳﺍ ﻞﺴﮑﯿﭘ 44 ﺮﯾﻭﺎﺼﺗ ﻡﺎﻤﺗ ﻉﺎﻔﺗﺭﺍ -

:ﺪﯿﻨﮐ ﺹﺎﺧ ﺶﺨﺑ ﺮﻫ ﯼﺍﺮﺑ ﻥﺩﺮﮐ ﻞﯾﺎﺘﺳﺍ ﻭ ﺖﯿﻌﻗﻮﻣ ﻪﺑ ﻉﻭﺮﺷ ﻥﻮﻨﮐﺍ

#home {left:0px;width:46px;}

ﺖﺳﺍ ﻞﺴﮑﯿﭘ 46 ﺮﯾﻮﺼﺗ ﺽﺮﻋ ﻭ ﺩﺭﺍﺩ ﺭﺍﺮﻗ ﭗﭼ ﺖﻤﺳ ﻪﺑ ﻼًﻣﺎﮐ -

#home {background:url(img_navsprites.gif) 0 0;}

(ﻞﺴﮑﯿﭘ 0 ﻻﺎﺑ ،ﻞﺴﮑﯿﭘ 0 ﭗﭼ ﺖﻤﺳ) ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻥﺁ ﺖﯿﻌﻗﻮﻣ ﻭ ﻪﻨﯿﻣﺯ ﺲﭘ ﺮﯾﻮﺼﺗ -

#prev {left:63px;width:43px;}

ﺖﺳﺍ ﻞﺴﮑﯿﭘ 43 ﻥﺁ ﺽﺮﻋ ﻭ (ﺩﺭﺍﻮﻣ ﻦﯿﺑ ﯽﻓﺎﺿﺍ ﯼﺎﻀﻓ ﯼﺭﺍﺪﻘﻣ + ﻞﺴﮑﯿﭘ 46 ﻪﻧﺎﺧ # ﺽﺮﻋ) ﺖﺳﺍﺭ

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

ﻞﺴﮑﯿﭘ 1 ﻂﺧ + ﻞﺴﮑﯿﭘ 46 ﻪﻧﺎﺧ ﺽﺮﻋ#) ﺪﻨﮐﯽﻣ ﻒﯾﺮﻌﺗ ﺖﺳﺍﺭ ﺖﻤﺳ ﻪﺑ ﻞﺴﮑﯿﭘ 47 ﺍﺭ ﻪﻨﯿﻣ

#next {left:129px;width:43px;}

ﺖﺳﺍ 43px ﺽﺮﻋ ﻭ (ﯽﻓﺎﺿﺍ ﯼﺎﻀﻓ + 43px ﺽﺮﻋ prev 63px + #prev# ﻉﻭﺮﺷ) ﺖﺳﺍﺭ ﺖﻤﺳ ﺭﺩ ﻞﺴﮑ

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

ﻞﺴﮑﯿﭘ 1 + ﻞﺴﮑﯿﭘ 46 ﻪﻧﺎﺧ ﺽﺮﻋ#) ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ ﺖﺳﺍﺭ ﺖﻤﺳ ﺭﺩ ﻞﺴﮑﯿﭘ 91 ﺍﺭ ﻪﻨﯿﻣﺯ ﺲﭘ ﺮﯾ

Image Sprites - ﺭﻭﺎﻨﺷ ﻩﻮﻠﺟ

.ﻢﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺩﻮﺧ ﯼﺮﺑﻭﺎﻧ ﺖﺴﯿﻟ ﻪﺑ ﺍﺭ ﺭﻭﺎﻨﺷ ﺖﮑﻓﺍ ﮏﯾ ﻢﯿﻫﺍﻮﺧ ﯽﻣ ﻥﻮﻨﮐﺍ

ﻪﺘﮑﻧ: ﺮﮕﺑﺎﺨﺘﻧﺍ :hover ﺩﺮﮐ ﻩﺩ

ﺖﺳﺍ ﯼﺮﺑﻭﺎﻧ ﺮﯾﻮﺼﺗ ﻪﺳ ﻞﻣﺎﺷ ("img_navsprites_hover.gif") ﺎﻣ ﺪﯾﺪﺟ ﺮﯾﻮﺼﺗ

ﺖﺷﺍﺩ ﺪﻫﺍﻮﺧ ﺩﻮﺟﻭ ﺩﺪﻋ ،ﻪﻧﺎﮔﺍﺪﺟ ﻞﯾﺎﻓ ﺶﺷ ﻪﻧ ﻭ ﺖﺳﺍ ﺪﺣﺍﻭ ﺮﯾﻮﺼﺗ ﮏﯾ ﻦﯾﺍ ﻪﮐ ﯽﯾﺎﺠﻧﺁ ﺯ

:ﻢﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺍﺭ ﺭﻭﺎﻨﺷ ﺖﮑﻓﺍ ﺎﺗ ﻢﯿﻨﮐ ﯽﻣ ﻪﻓﺎﺿﺍ ﺪﮐ ﻂﺧ ﻪﺳ ﻂﻘﻓ ﺎﻣ

ﻝﺎﺜﻣ

#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;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
#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_hover.gif') 0 0;
}

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

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

#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;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>
</html>

:ﻩﺪﺷ ﻩﺩﺍﺩ ﺢﯿﺿﻮﺗ ﻝﺎﺜﻣ

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

ﺮﺗﻦﯿﯾﺎﭘ ﻞﺴﮑﯿﭘ 45 ﻂﻘﻓ ،ﻢﯿﻨﮐﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﯽﻧﺎﺴﮑﯾ ﻪﻨﯿﻣﺯﺲﭘ ﺖﯿﻌﻗﻮﻣ ،ﺭﻭﺎ