استفاده از ایکن هایی که یک جا هستند

[sara_aryanfar]

با سلام دوستان حتما تابحال شما هم دیدید در تعدادی از سایت ها وقتی آیکن ها رو دانلود می کنین همه اونها یک تصویر هستند ولی موقع استفاده جدا جدا چطوری اینکار صورت میگیره ممنون میشم توضیح بدین

[Reza1607]

به اين تكنيك css sprite گفته ميشه
در اين تكنيك سعي ميشه تمام عكس ها ( آيكون ها ) داخل يك فايل قرار بگيرند و بعد با استفاده از css و خصوصيات
background-image
(مسير عكس )
background-position
(مختصات عكس مورد نظر در عكس اصلي)
عكس رو به يك المان نسبت ميدن

[sara_aryanfar]

اگر چنین تصویری رو به یک کنترل مثلا ایمیج باتن هم به عنوان بک گراند الصاق کنیم همینطوری خواهد بود یعنی با جابجایی پیکسل می توان انجام داد

[hamid_shrk]

اگر چنین تصویری رو به یک کنترل مثلا ایمیج باتن هم به عنوان بک گراند الصاق کنیم همینطوری خواهد بود یعنی با جابجایی پیکسل می توان انجام داد
اگه منظورتون ایمیج باتن asp هست که باید بگم خیر چون این کنترل یک image-url داره که فقط یک عکس رو قبول میکنه ، اما شما میتونی به کنترل طول و عرض بدی و image-url رو مقدار دهی نکنی و بجاش با css بهش بک گراند بدی و css sprite رو روش اعمال کنی

[sara_aryanfar]

راستش من کلا اون کنترل رو بی خیال شدم و خواستم از تگ <a> استفاده کنم کد زیر رو نوشتم اما نشد
.pay
{
background-position: 58px 45px;
background-image: url('../admin/images/z1.jpg');
}
.pay a
{
width:118px;
height:45px;
background-position: 58px 45px;
background-image: url('../admin/images/z1.jpg');
}
یعنی هیچ لینکی هم ایجاد نمیشه

[sara_aryanfar]

دوستان الان مشکل اینجاست که من این تصویر رو تونستم اینطوری قرار بدم ولی خب اگه برای تگ a نوشته نباشه لینکی هم نداره چطوری کاری کنم که کل آین مورد نظر به عنوان لینک تگ a باشه

[hamid_shrk]

اگه فایر باگ نصب کنی خیلی راحت میتونی مشکل رو پیدا کنی :

background: url("../admin/images/z1.jpg") no-repeat scroll 58px 45px;

رو امتحان کن

[sara_aryanfar]

کد رو فایر فکس کار می کنه اما روی ie شکل پس ضمینه نیست لینک وجود داره اما اشکال نمیان آیا برای ie کد خاصی رو می خواد

[hamid_shrk]

کد رو فایر فکس کار می کنه اما روی ie شکل پس ضمینه نیست لینک وجود داره اما اشکال نمیان آیا برای ie کد خاصی رو می خواد
خیر این دستور برای ie فرقی نداره !!
کدتون رو بذارید تا امتحان کنم.(هم html هم css)

[sara_aryanfar]

برای سی اس اس
.pay-news
{
width:226px;
height:45px;
margin-right:5px;
}
a.pay
{
float: right;
height: 40px;

width: 118px;
background: url('../admin/images/z1.jpg')no-repeat scroll right top transparent;

}
a.pay:hover
{
background: url('../admin/images/z1.jpg')no-repeat scroll 0 -51px transparent;
}
a.des
{
float: left;
height: 40px;
margin-top:3px;
width: 96px;
background: url('../admin/images/z2.jpg')no-repeat scroll right top transparent;
}
a.des:hover
{
background: url('../admin/images/z2.jpg')no-repeat scroll 0 -51px transparent;
}

و برای html
<div class="pay-news">
<a class="pay" href="example.aspx" ></a>
<a class="des" href="example.aspx" ></a>

</div>

[sara_aryanfar]

84950

84951

[hamid_shrk]

حدث بزنید مشکل چی بود ؟؟؟
شما فقط باید قبل از no-repeat یک space میزدید،یعنی این :

background: url('images/z2.jpg') no-repeat scroll 0 -51px transparent;

بجای این :

background: url('images/z2.jpg')no-repeat scroll 0 -51px transparent;