نمایش نتایج: از 1 به 3 از 3
    1. آموزش تکنیک CSS Sprites و استفاده از آن در Image Map Details »»

      آموزش تکنیک CSS Sprites و استفاده از آن در Image Map

      Version: , by (عضو انجمن) lexus آنلاین نیست.
      Developer Last Online: Aug 2018 پرینت این صفحه / حالت نمایش بصورت پرینت شده ارسال این صفحه به ایمیل یک دوست یا خودتان
      vB Version: Unknown امتیاز:  Installs: 0
      Released: Saturday 01 September 12 Last Update: Never Downloads:
      Not Supported

      آیا تابحال دنبال تکنیکی بوده اید تا بتوانید با استفاده از بهینه کردن تصاویر بکاررفته در یک صفحه ی وب، سرعت بارگذاری را افزایش دهید؟ CSS Sprites تکنیکی ساده و موثر است که تاثیر بسزایی در بالا رفتن سرعت بارگذاری صفحات دارد. ابتدا به توضیح این تکنیک می پردازیم و در پایان نیز مثال جالبی در مورد نحوه ایجاد یک CSS Image Map با استفاده از CSS Sprites را بررسی خواهیم کرد.
      فرض کنید رئیس یک شرکت بزرگ از شما در مورد پایین بودن سرعت بارگذاری یکی از صفحات وب شرکت که باعث ایجاد نارضایتی کاربران شده راه حلی می خواهد؛ شما بعنوان یک طراح و توسعه دهنده ی خوب بعد از مطالعه پروسه ی بارگذاری صفحه و بررسی درخواست ها و پاسخ های بین کلاینت وسرور پی به این موضوع می برید که بارگذاری حجم بالایی از عکس ها در کندشدن این صفحه تاثیر داشته است. نزدیک به ۱۰۰ عکس که سایز آن ها بین ۱ تا ۱۰ کیلوبایت است و فقط بالا بودن تعداد آن ها باعث بروز این مشکل شده است. با این وجود شما چه پاسخی به این سوال خواهید داد؟ آیا خواهید گفت مشکل از سرعت پایین اینترنت کاربران است یا مساله را به بهتر یا بدتر بودن تکنولوژی های PHP، JAVA یا ASP.NET نسبت می دهید؟
      این مقاله به ارائه ی راه حلی برای این مساله می پردازد. تکنیکی به نام CSS Sprites که ایده ی اولیه آن از صنعت بازی سازی گرفته شده است و البته در عرصه وب نیز کاربرد دارد.
      ایده اصلی این تکنیک به این صورت است که تمامی عکس های کوچک (دراینجا همه ۱۰۰عکس) در قالب یک تصویر بزرگ قرار خواهد گرفت و با استفاده از CSS مختصات هر عکس کوچک را در تصویر بزرگ پیدا کرده و نمایش می دهیم. یکی شدن ۱۰۰ عکس کوچک به یک عکس بزرگ، تاثیر زیادی در پایین آمدن حجم عکس جدید خواهد داشت و سختی کار فقط در تشخیص عکس های موردنظر از درون عکس جدید است.
      به این مثال توجه کنید:

      کد:
        
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <style type="text/css">         .container div         {             border: 1px solid;             float: left;             height: 100px;             left: 20px;             margin-left: 12px;             margin-top: 50px;             position: relative;             width: 100px;         }         .blue         {         }         .red         {         }         .yellow         {         }     </style> </head> <body>     <div class="container">         <div class="blue">         </div>         <div class="red">         </div>         <div class="yellow">         </div>     </div> </body> </html>
      اگر این کد را اجراء کنید ۳ عدد مربع بصورت زیر خواهید دید:

      [فقط اعضا می توانند لینک ها را ببینند. ]



      حال به هر مربع یک عکس نسبت می دهیم، کلاس های خالی نوشته شده به این صورت اصلاح خواهد شد:

      کد:
       
      
      
      .blue         {         background-image:url('blue.jpg');         } .red         {         background-image:url('red.jpg');         } .yellow         {         background-image:url('yellow.jpg');         }

      پس از اجرای صفحه سه مربع به رنگ های آبی، قرمز و زرد خواهید دید:

      [فقط اعضا می توانند لینک ها را ببینند. ]

      مساله ای که در این حالت وجود دارد اینست که سه بار درخواست بارگذاری برای سه عکس مختلف به سرور ارسال شده است. دقیقا همین نمایش را می توان با استفاده از تکنیک CSS Sprites انجام داد با این تفاوت که در این حالت ما یک عکس را بارگذاری کرده و با استفاده از CSS قسمتی از عکس اصلی را که مورد نظرمان هست به کلاس های تصویر پیش زمینه انتساب می دهیم. با استفاده از نرم افزار فتوشاپ سه عکس را بصورت زیر به یک عکس تبدیل می کنیم:

      [فقط اعضا می توانند لینک ها را ببینند. ]

      سپس تغییرات ذیل را لحاظ می کنیم:

      کد:
       
      .container div         {             border: 1px solid;             float: left;             height: 100px;             left: 20px;             margin-left: 12px;             margin-top: 50px;             position: relative;             width: 100px;             background-image:   url('sprite.jpg');         }         .blue         {             background-position: -100px 0px;         }         .red         {             background-position: -200px 0px;         }         .yellow         {             background-position: -0px 0px;         }
      در این کد تصویر جدید را که از ترکیب سه تصویر قبلی ایجاد کردیم بعنوان تصویر پیش زمینه به کلاس container نسبت دادیم و با استفاده از خاصیت background-position در سه کلاس blue، red و yellow قسمت مورد نظرمان را از عکس کلی انتخاب کردیم. استفاده از این تکنیک علاوه بر اینکه باعث کاهش برآیند حجم عکس ها می شود به پایین آمدن تعداد درخواست ها و پاسخ های بین کلاینت و سرور نیز منجر خواهد شد.
      پس از اجرای کد بالا همان خروجی قبل را خواهیم داشت با این تفاوت که بجای سه عکس اول، فقط عکس sprites.jpg بارگذاری خواهد شد.
      در حالت اول حجم صفحه برابر با ۱۲ کیلوبایت و تعداد HTTP Requestها برابر با ۴ می باشد در حالتی که در حالت دوم، حجم صفحه برابر با ۸ کیلوبایت و تعداد HTTP Requestها به ۲ کاهش یافت.
      در ادامه برای آشنایی بیشتر با تکنیک CSS Sprites، به شرح یک مثال جهت ایجاد Image Map خواهیم پرداخت.
      مطمئنا تگ هایی که برای عکس ها در سایت هایی مانند facebook یا flickr می توان درست کرد را دیده اید. بعنوان مثال در سایت فیس بوک می توان اسامی افرادی که در یک عکس قرار دارند را با کادری که مشخص کننده هر فرد است تعریف کرد تا با اشاره موس روی صورت هر فرد، اسم فرد نمایش داده شود. یکی از روش هایی که می توان با استفاده از آن این کار را انجام داد CSS Image Map می باشد که با استفاده از تکنیک CSS Sprites قابل انجام است.
      کاری که در این مثال می خواهیم انجام دهیم اینست که کاربر با قرار دادن موس روی هریک از شماره های موجود در عکس زیر توضیح مربوط به آن شماره در عکس نمایش داده شود.

      تصویر 4

      بعنوان مثال با قرارگرفتن موس بر روی شماره ۴ که یک نوت بوک است این اتفاق بیفتد:

      [فقط اعضا می توانند لینک ها را ببینند. ]
      در فایلی که ضمیمه شده است نمونه این مثال جهت دانلود قراردارد. ابتدا کلاس officeMap را بررسی می کنیم:

      کد:
       
      
      dl#officeMap{     margin: 0;     padding: 0;     background: transparent url(office.jpg) top left no-repeat;     height: 262px;     width: 350px;     position: relative; }
      در حالتی که موس روی هر کدام از شماره ها قرار می گیرد آیتم مورد نظر map می شود و همان طور که در شکل نمایش داده شده کادری با حاشیه سفید نمایان می شود. تصویر این کادرها را با استفاده از فتوشاپ ایجاد می کنیم و از آنجایی که در پروژه از تکنیک CSS Sprites استفاده کرده ایم عکس ها را به هم متصل می کنیم. علت وجود عکس سوم در شکل زیر اینست که کادر نوت بوک با کادر مانیتور و فلاپی هم پوشانی دارد و به این دلیل در یک تصویر مجزا این کادر را به تصویر اضافه کردیم. در نهایت عکس office.jpg که در عکس پیش زمینه کلاس officeMap قراردارد به این صورت درخواهد آمد:


      تصویر 6

      از آنجایی که ۵ شماره در عکس داریم نیاز هست تا ۵ گروه کد CSS برای هر شماره ایجاد کنیم. تنها نکته ای که حائز اهمیت است مشخص کردن هر کادر در تصویر است که موقعیت هر عکس را در ویژگی background-image هر کلاس مشخص کرده ایم. کدی که برای مانیتور نوشته شده است به این صورت است:

      کد:
        
      
      
      dd#monitorDef{ top: 65px; left: 114px; } dd#monitorDef a{ position: absolute; width: 73px; height: 69px; text-decoration: none; } dd#monitorDef a span{ display: none; } dd#monitorDef a:hover{ position: absolute; background: transparent url(office.jpg) -109px -317px no-repeat; top: -10px; left: -5px; } dd#monitorDef a:hover span{     display: block;     text-indent: 0;     vertical-align: top;     color: #000;     background-color: #F4F4F4;     font-weight: bold;     position: absolute;     border: 1px solid #BCBCBC;     bottom: 100%;     margin: 0;     padding: 5px;     width: 250%; }

      برای ۴ شماره دیگر نیز کدها به همین صورت است. این مثال در مرورگرهای IE6+، Mozilla و Opera تست شده است.
      یا حق


      موضوعات مشابه:

      Screenshots

      • نوع فایل: jpg 4.jpg (82.0 کیلو بایت, 2 نمايش)


      Show Your Support

      • This modification may not be copied, reproduced or published elsewhere without author's permission.
      • برای تشکر از نویسنده بر روی کلیک کنید.
        The Following User Says Thank You to lexus For This Useful Post:

    Similar Mod

    آخرين نوشته
    پاسخ
    Type
    Developer
    مدیریت
    07:33 PM Tuesday 24 July 12
    0
    آموزش های جوملا 2.5 / 1.7
    Mojtaba
    10:45 PM Tuesday 07 August 12
    0
    آموزش های جوملا 2.5 / 1.7
    Mahdi Manian
    03:49 PM Thursday 30 August 12
    2
    آموزش های جوملا 2.5 / 1.7
    محمدحسین میری
    02:30 PM Tuesday 30 October 12
    0
    آموزش های جوملا 2.5 / 1.7
    shervin_20
    02:18 PM Thursday 17 January 13
    0
    آموزش های جوملا 2.5 / 1.7
    Mahdi Manian
    01:46 PM Monday 28 January 13
    0
    آموزش های جوملا 2.5 / 1.7
    mohammad2232
    08:03 PM Monday 28 January 13
    2
    آموزش های جوملا 2.5 / 1.7
    mohammad2232
    06:36 PM Tuesday 21 May 13
    1
    آموزش های جوملا 2.5 / 1.7
    hamidnpc
    11:46 PM Tuesday 10 September 13
    3
    آموزش های جوملا 2.5 / 1.7
    ali09366
    02:19 PM Saturday 14 September 13
    8
    آموزش های جوملا 2.5 / 1.7
    hamidnpc
  1. # ADS
    Circuit advertisement
    تاریخ عضویت
    Always
    نوشته ها
    Many


    اینجا محل تبلیغات شماست.

     

  2. Top | #2
    StarStarStarStarStarStarStar
    تاریخ عضویت
    October 2012
    شماره عضویت
    1015
    عنوان کاربر
    عضو انجمن
    میانگین پست در روز
    0.01
    نوشته ها
    29
    موضوع ها
    8
    Thanks
    3
    Thanked 3 Times in 3 Posts
    وب سایت کاربر
    کلیک کنید
    میزان امتیاز
    87
    با سلام خدمت همه عزیزان

    بنده فایل CSS sprites ساختم اما راهنمایی میخوام برای جایگزاری در قالبم میخواست بدونم چی کار باید بکنم تا قالبم خراب نشه؟



    فایل CSS sprites
    [فقط اعضا می توانند لینک ها را ببینند. ]


    آدرس قالب من
    [فقط اعضا می توانند لینک ها را ببینند. ]

    با تشکر

    ویرایش توسط Mahdi Manian : Monday 03 June 13 در ساعت 09:26 PM
    Installed

  3. Top | #3
    StarStarStarStarStarStarStar
    تاریخ عضویت
    July 2012
    شماره عضویت
    1
    عنوان کاربر
    مدير کـــــــــل
    میانگین پست در روز
    1.91
    محل سکونت
    اصفهان
    هوادار
    سپاهان - رئال مادرید
    نوشته ها
    5,305
    موضوع ها
    76
    Thanks
    1,921
    Thanked 1,964 Times in 1,525 Posts
    وب سایت کاربر
    کلیک کنید
    میزان امتیاز
    1000
    درود

    الان دقیقا مشکلتان چی هست؟ بیشتر توضیح بدید! البته در تاپیک جدید! طبق قوانین انجمن!

    موضوع بسته شد.

    موفق باشید.

    این پست مفید بود؟؟ دکمه گوگل +1 یادتون نره پس!
    کجاست؟ یکی بالای تاپیک سمت چپ و یکی دیگه هم پایین انجمن سمت چپ!


    [فقط اعضا می توانند لینک ها را ببینند. ] - [فقط اعضا می توانند لینک ها را ببینند. ] - [فقط اعضا می توانند لینک ها را ببینند. ] - [فقط اعضا می توانند لینک ها را ببینند. ]

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

کلمات کلیدی این موضوع

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  


از انجمن جومیران در گوگل حمایت کنیم.