electro-bargh

توضیح درباره این Combine images using CSS sprites

13 پست در این موضوع قرار دارد

با سلام

خوب هستین .. الحمدوالله .... ولی من خوب نیستم ... :rolleyes: به خاطر این :

ادرس وبسایتم : http://www.electro-bargh.ir/

دوستان برای سئوی وبسایتم خیلی زحمت کشیدم تا اینجا رسیدم .. خوب بریم سر اصل مطلب برین به لینک زیر رجوع کنید

http://gtmetrix.com/reports/www.electro-bargh.ir/6pNoCs9m

خوب قسمت Combine images using CSS sprites خیلی از وبسایت ها رو گشتم ولی مطالب یا ناقص بود یا اصل من هنگ کردم :o

خوب این ارور ها رو داده

The following images served from electro-bargh.ir should be combined into as few images as possible using CSS sprites.

حالا هر کاری می کنم نمیتونم چجوری این ارور ها رو درست کنم ..... این مطلب انگلیسی بالا میگه باید تمام عکس ها بشن یکی .... چجوری ...

خوهشا توضیح کامل باشه .

دوستان راهنمایی کنید............

راستی اگه این یه مورد رو اوکی کنم که میترکونه .... :D البته با کمک شما میترکونیـــــــــــــــــــــم :P

با تشکر ..منتظر نظراتتون هستم.

به اشتراک گذاری این پست


لینک به پست

شما باید تصاویری که در بکگراند لینکها ، لیستها، کلیدها و ... استفاده کردید را در یک فایل قرار دهید و با پوزیشن و طول و عرض مکان مورد نظر را در تصویر نشان دهید

http://www.w3schools.com/css/css_image_sprites.asp

http://www.spritecow.com/

http://css-sprit.es/

به اشتراک گذاری این پست


لینک به پست

ممنونم فکر کنم ... دارم درستش می کنم

به اشتراک گذاری این پست


لینک به پست

شما باید تصاویری که در بکگراند لینکها ، لیستها، کلیدها و ... استفاده کردید را در یک فایل قرار دهید و با پوزیشن و طول و عرض مکان مورد نظر را در تصویر نشان دهید

http://www.w3schools...age_sprites.asp

http://www.spritecow.com/

http://css-sprit.es/

ممنون

من متوجه نشدم یعنی اون کدی رو که بهمون می ده یک فایل css درست کنیم براش همون جا قرار بدیم؟ یا تمام عکسها رو که کد کریدم تو یک فایل cssجمع کنیم؟

بعد خود عکس رو چیکار کنیم پاک کنیم؟

به اشتراک گذاری این پست


لینک به پست

کلا عکسها رو باید یکی کنید و استفاده کنید

توضیح این ترفند در بخش html-css هست

به اشتراک گذاری این پست


لینک به پست

ممنون من یک سرچی زدم

اومدم همه عکسام رو تو یک فایل جمع اوری کردم و همه عکسها رو پاک کردم

الان خوب شده

ولی باید عکس ها پاک می کردم؟

به اشتراک گذاری این پست


لینک به پست

بله دیگه، استفاده‌ای ندارند!

به اشتراک گذاری این پست


لینک به پست

رفتم تمام کارایی که گفته شده رو انجام دادم ، حالا دارم عکس ها رو پاک میکنم و عکس جدید رو آپلود میکنم

از یه طرف Combine images using CSS sprites داره رتبش خوب میشه ، از یه طرف Avoid bad requests داره رتبش بد میشه

همون عکس ها رو داره درخواست میده

توی یه فایل عکس ها رو قرار دادم ، اینجوری که من برداشت کردم باید تکه کد فراخونیش رو اینجوری بنویسم :


.parent-element {background:url(result.png);background-position: 0px 0px;background-position: 0px -16px;background-position: 0px -34px;background-position: 0px -75px;background-position: 0px -121px;background-position: 0px -151px;background-position: 0px -181px;background-position: 0px -200px;background-position: 0px -220px;background-position: 0px -250px;}

و بذارم توی style قالبم ، درسته ؟

عکسه رو هم توی قسمت images آپلودش کردما ، اما بازم نمیدونم مشکل چیه !

به اشتراک گذاری این پست


لینک به پست

نه شما اشتباه کردین این position ها رو شما میبایست توی هر کدوم از استایل هایی که تصویر لود میکردن استفاده کنید.

مثلا شما عکس چشم رو برای تعداد بازدید با تمامی عکس ها یکی کردین.

حالا میخواین توی کد ها ازش استفاده کنید.

اول از همه شما میاین توی استایل بازدید ها و

background:url(images/view.png);

و کد که داره تصویر view.png رو فراخوانی میکنه رو باید به result.png تغییر بدین و به جز اون باید ببینید که عکس چشم توی عکسی که ساختین چه اندازه ای داره.مثلا:

در اندازه:


background-position: 0px -16px;

قرار داره.حالا اینطوری تصویر به راحتی لود میشه و نیازی به تصویر های قبلی نیست.در اصل کد استایل view این شکلی میشه:


background:url(images/view.png);
background-position: 0px -16px;

البته برای تمامی تصویر ها همین کار باید انجام بشه.

در ضمن اون تصویری که ساخته میشه رو باید در پوشه images قالب بزارین.

به اشتراک گذاری این پست


لینک به پست

استایل بازدید ها ؟ از کجا بدونم کجا دارن فراخونی میشن ؟!

به اشتراک گذاری این پست


لینک به پست

بازدید ها مثال بود.

دقیق بخونید.

شما برید ببینید که تصاویرتون توی استایل کجا فراخوانی میشن.

بعد کار های بالا رو براش لنجلم بدین.

به اشتراک گذاری این پست


لینک به پست

شما برید ببینید که تصاویرتون توی استایل کجا فراخوانی میشن.

بعد کار های بالا رو براش انجام بدین.

از کجا میتونم بفهمم که تصاویر از کجا فراخوانی میشن ؟

به اشتراک گذاری این پست


لینک به پست

ابتدا فایل .css این کد رو اضافه کنید


.Sp-ImageAll-2{background:url(images/ImageAll-2.png) no-repeat;}
.Sp-ImageAll-2.home{background-position:-83px -2px; width:23px; height:23px;}

کد بالا برای مثال هستش

نام ImageAll-2.png باید به عکسی که درست کردید تغییر کنه

آدرس فولدر عکساتون باید نام فولدر عکسهای خودتون باشه images

نام Sp-ImageAll-2.home رو در کلاس تگ div یا a قرار بدید تا عکس برای شما نمایش داده بشه

باید عرض کنم که background-position:-83px -2px;

پوزیشن آیکونی که میخواین نمایش بدید برای اینکه بفهمید پوزیشن عکستون چیه از طریق فتوشاپ این کار رو انجام بدید

در فتوشاپ منوی windows تیک info را بزنید تا ابزاری که پوزیشن عکس ها رو نمایش میده ظاهر میشه

بعد خودتون دستی تک تک برای هر عکس یک


.Sp-ImageAll-2.home{background-position:-83px -2px; width:23px; height:23px;}

تعریف کنید با این تفاوت که باید home رو تغییر نام بدید

البته اساتید باز کمکتون خواهند کرد

از کجا میتونم بفهمم که تصاویر از کجا فراخوانی میشن ؟

خودتون باید تعریف کنید به این صورت


.Sp-ImageAll-2{background:url(images/ImageAll-2.png) no-repeat;}

ویرایش شده در توسط M.At

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط napo
      سلام 
      افزونه max mega menu  رو دانلود کردم ولی متاسفانه راستچین نیست یعنی زیر منو رو سمت راست ایجاد میکنه به جای اینکه در سمت چپ نشون بده همونطوری که توی عکس مشخصه بعد انتخاب دوتا زیر منو کلا از صفحه خارج میشه
      اگه میشه کمکم کنید
      اگه کسی افزونه ای دیگه میشناسه که هم راستیچینه هم اکاردئونی ممنون میشم معرفی کنه

    • توسط oonchiye
      سلام
      تنظیمات مربوط به افزونه رو انجام دادم برگه ها موجود هستش 
      شرت کد های مربوط هم درسته 
      فقط وقتی دکه پرداخت رو میزنی صفحه تسویه حساب فقز اسم برگه رو میاره 
      مینویسه check uot فقط
      چیکار کنم خیلی لازم دارم 
    • توسط behi13
      با سلام
      دوستام و اساتید محترم یک سوال
      من به سایت دوزبانه با افزونه wpml درست کردم الان یک مشکل هست توی گوگل صفحه اول سایت ایندکس شده و توی فارسی مشکلی ندارم
      ولی توی زبان انگلیسی وقتی توی گوگل به انگلیسی سرچ میکنم بازهم با نام و فارسی میاد
      ممنون میشم من و راهنمایی کنید
    • توسط j1989m
      سلام
      توی قسمت افزودن نوشته و از طریق پرونده های رسانه ای یه عکس انتخاب میکنم و منتشر میکنم. توی سایت عکس رو نشون میده اما این کدها رو هم میاره:
      [caption id="attachment_154" align="aligncenter" width="300"] [/caption]
      درواقع عکس بین دوتا caption بالا قرار میگیره.
      این مشکل توی افزودن برگه نیست.
      لطفا راهنمایی کنید
      خیلی فوریه
      ممنون
    • توسط xboby
      سلام،
      من سایتی با ورد پرس طراحی کردم و می خواهم با:
      یک برنامه تمام پستهای موجود در کانال تلگرامی که بنام آن سایت ایجاد کر ده ام را
      بتوانم از موبایلم دانلود کنم و بعد در آن سایت قرار دهم:
      آیا چنان برنامه ای وجود دارد؟ لطفا راهنمائی ام بفرمائید.
                                   متشکرم