در این مقاله از تصویر زیر که در فایل ضمیمۀ مقاله موجود است، استفاده می کنیم:

از ستاره زرد رنگ برای نمایش رتبه به عنوان رتبۀ اولیه، از رنگ سبز برای زمانی که موس بر روی ستاره ها قرار میگیرد و از رنگ سفید یا ستاره خالی برای نمایش خانه های فاقد رتبه استفاده می کنیم. قابل ذکر است که تصویر ما دارای ابعاد 90*30 پیکسل می باشد که ابعاد آن برای تعیین اندازه تگ ها اهمیت دارد.

در ساخت این سیستم از تگ های ul و li به عنوان عناصر اصلی html استفاده می کنیم، به شکلی که هر تگ li معادل یکی از ستاره های ما خواهد شد و تگ ul نیز به عنوان دربرگیرندۀ ستاره ها. برای شروع کار کد html زیر را در نظر بگیرید:

<ul class="rating">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

تگ های ul و li را به صورت زیر استایل دهی می کنیم:

ul.rating
{
    list-style: none;
    width: 150px;
    height: 30px;
    padding: 0;
    background: url("star_rating.gif") left top;
}
ul.rating li
{
    float: left;
    width: 30px;
    height: 30px;
}

 در ابتدا عرض کردم که اندازۀ کل تصویر ما (شکل 1) 90*30 پیکسل است، به این معنی که طول و عرض هر یک از ستاره ها 30 پیکسل می باشد. با توجه به اینکه پنج ستاره در سیستم رتبه بندی داریم، عرض و ارتفاع تگ ul به ترتیب برابر 150 و 30 پیکسل در نظر گرفته شده است، همچنین تصویر ستاره ها را در زمینۀ تگ ul قرار می دهیم. همانطور که گفته شد هر تگ li معادل یکی از ستاره های ما خواهد بود، بنابراین برای کنار هم قرار گرفتن هر 5 ستاره خاصیت float:left را برای li ها در نظر می گیریم. عرض و ارتفاع تگ های li هم مطابق ابعاد هر ستاره برابر 30 پیکسل در نظر گرفته شده است. توجه داشته باشید، به دلیل اینکه ارتفاع هر ستاره 30 پیکسل است و تصویر زمینه را به صورت left top در تگ ul موقعیت دهی کردیم، تنها قسمت بالایی تصویر یعنی ستارۀ خالی نمایش داده می شود.

کار ما تا این لحظه به صورت زیر خواهد بود:

همانطور که در شکل شماره 2 مشاهده می کنید، اعداد موجود در هر li بر روی ستاره ها قرار گرفته اند که برای حل این مشکل کافی است خاصیت text-indent را به خصوصیات li اضافه کنیم:

ul.rating li
{
    ....
text-indent: -999px;
}

در ادامه برای ایجاد جلوۀ rollover کلاس کاذب hover را برای تگ های li استایل دهی می کنیم. با توجه به اینکه می خواهیم با رفتن موس بر روی هر ستاره رنگ آن به سبز تغییر پیدا کند، بار دیگر تصویر سه ستاره را در زمینۀ تگ li قرار داده و آن را به گونه ای موقعیت دهی می کنیم که ستارۀ وسطی نمایش یابد:

 ul.rating li:hover
{
    background: url("star_rating.gif") left center;
    width: 150px;
    margin-left: -120px;
    cursor: pointer;
} 

دقت کنید که تصویر زمینه در راستای محور عمودی به صورت center موقعیت دهی شده است که باعث می شود تصویر در وسط li ها قرار گیرد. مقدار width نیز برای هر li برابر 150 پیکسل در نظر گرفته شده است. علت انتخاب این مقدار این است که در واقع ما می خواهیم هنگام قرار گیری موس بر روی هر ستاره، آن ستاره و ستاره های قبل آن همگی به رنگ سبز در-بیایند، به طور مثال اگر کاربری موس را بر روی ستارۀ چهارم قرار داد، سه ستارۀ قبلی نیز باید سبز شوند. بنابراین باید با رفتن موس بر روی هر ستاره یا همان تگ li، عرض آن تگ برابر 150 پیکسل (همان عرض تگ ul) شود. در واقع تمام ناحیه ul توسط این تگ پوشانده شده و ستارهای سبز رنگ بر روی ستاره های خالی که در زمینه ul قرار داشتند، قرار می گیرند.

شرایط ذکر شده در صورتی اتفاق میافتد که کاربر موس را تنها بر روی ستارۀ اول قرار دهد، در این صورت تگ li به اندازه عرض ul بزرگ شده و تمام ناحیه را می پوشاند. اما به طور مثال اگر موس بر روی ستارۀ سوم قرار گیرد، تغییر عرض li از همان ستارۀ سوم به بعد صورت می گیرد و تصویری مطالبق شکل زیر را خواهیم داشت:

با توجه به اینکه عرض هر ستاره 30 پیکسل است، لازم است تگ li در هنگام رفتن موس بر روی آن به اندازۀ 120 پیکسل به سمت چپ کشیده شود تا جلوه مورد نظر ما ایجاد گردد، به همین منظور خاصیت margin-left را برابر 120- پیکسل مقدار دهی کردیم.

با اعمال تغییرات ذکر شده مجددا اگر موس را بر روی ستاره سوم قرار دهید، شکلی مطابق شکل 4 خواهیم داشت:

 همانطور که در شکل 4 مشاهده می کنید دو ستاره در سمت چپ اضافه است که برای حل این مشکل باید خاصیت overflow را در تگ ul برابر hidden قرار دهیم تا قسمت های خارج از ul نشان داده نشوند:

 ul.rating
{
    ....
    overflow: hidden;
    background: url("star_rating.gif") left top;
} 

 حال اگر کار خود را تست کنید دیگر مشکلی از بابت قسمت های اضافی وجود ندارد و زمانی که موس را از چپ به راست بر روی ستاره ها حرکت می دهید بدون مشکل ستاره ها به رنگ سبز در میایند، اما اگر موس را از سمت راست به چپ حرکت دهید هیچ تغییری ایجاد نمی-شود. علت این است که وقتی موس بر روی یکی از li ها قرار می گیرد، سایر تگ های li به زیر تگ فعلی رفته و قابل دسترس نیستند، به همین دلیل دیگر کلاس hover اتفاق نمیافتد و تغییری انجام نمی پذیرد.

برای رفع این مشکل لازم است تگی که موس بر روی آن قرار گرفته به زیر دیگر تگ ها رفته تا زمانی که تغییر اندازه صورت می گیرد، سایر تگ ها از دسترس خارج نشوند. برای قرار گیری عناصر در لایه های مختلف از z-index استفاده می کنیم. تغییرات را مطابق کد های زیر اغمل کنید:

ul.rating li
{
    ....
    position: relative;
    z-index: 3;
}
ul.rating li:hover
{
    ....
    z-index: 2;
} 

بنابراین زمانی که موس بر روی یکی از ستاره ها می رود، آن ستاره به یک لایه پایین تر از دیگر ستاره ها منتقل شده و طول آن افزایش پیدا می کند. ناگفته نماند به دلیل اینکه z-index تنها در حالات position:fixed، position:relative و position:absolute کار می کند، position:relative را نیز به خصوصیات li اضافه کردیم.

با اعمال این قسمت، شکل کلی سیستم ما ایجاد شده است و در زمان حرکت موس بر روی ستاره ها، تغییرات به خوبی صورت می گیرد. اکنون می خواهیم حالت اولیۀ ستاره ها در زمان لود صفحه را که مبین رتبه های داده شده توسط کاربران مختلف است را ایجاد کنیم، به طور مثال می خواهیم در زمانی که صفحه لود شد، 2.5 ستاره از پنج ستاره فعال باشد.

برای انجام این کار یک تگ li در ابتدای دیگر li ها اضافه می کنیم:

<ul class="rating">
    <li class="current_rate"></li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>         

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

ul.rating li.current_rate
{
    position: absolute;
    left: 0;
    top: 0;
    height: 30px;
    width: 75px;
    z-index: 1;
    background: url("star_rating.gif") left bottom;
} 

 توجه کنید با اضافه کردن تگ جدید، در حال حاضر شش تگ li داریم، درحالی که اندازه تگ ul فقط برای پنج ستاره در نظر گرفته شده بود. بنابراین لازم است تگ جدید را به صورت absolute موقعیت دهی کنیم تا از جریان کلی صفحه خارج شود و تاثیری بر دیگر عناصر نگذارد. با توجه به اینکه تگ li اضافه شده باید درون ul موقعیت دهی شود، لازم است که position:relative را نیز به خصوصیات ul اضافه کنید:

ul.rating
{
    ....
    position: relative;
    background: url("star_rating.gif") left top;
}             

در مراحل قبل با استفاده از z-index دو لایه مختلف را ایجاد کردیم. به دلیل اینکه تگ li جدید در واقع نمایانگر حالت اولیۀ رتبه است، باید در لایه ای زیر دو لایه دیگر قرار گیرد تا در زمان رفتن موس بر روی ستاره ها، توسط سایر li ها همپوشانی شود. به همین دلیل خاصیت z-index این تگ را برابر 1 قرار می دهیم. دقت کنید که بار دیگر تصویر سه ستاره در زمینه این تگ نیز قرار داده شده است، البته این بار تصویر را در راستای محور عمودی به صورت bottom موقیعت دهی کردیم که باعث می شود ستارۀ زرد رنگ نمایش یابد.

خاصیت width که در واقع تعیین کننده میزان رتبۀ اولیه ماست عرض تگ li را تعیین می کند. به طور مثال من در اینجا مقدار 75 پیکسل را به آن اختصاص دادم که برابر 2.5 ستاره می باشد. 

در انتها کار تکمیل شدۀ ما به صورت شکل شماره 5 خواهد بود:

body
{    
    behavior: url("csshover.htc");
}            

دانلود: فایل ضمیمه + کد ها

آیتم های مرتبط:

• چگونگی ساخت تب (سربرگ) با CSS
• یک گالری عکس بسازید
• کتاب آموزشی CSS Hacks & Filters
• ساخت منو های Drop Down با CSS
• طراحی لوگوی مرورگر اپرا با CSS 3.0

یادداشت ها (4)

اشکال در کارکرد نوشته شده توسط yaser در 1388/11/29 - 13:22 سلام  کدهای شما را دانلود و اجرا کردم    هر قدر هم کلیک بشه روی ستاره ها همون مقدار اولیه یعنی دو ستاره و نصفی رو نشون میده    درست کار نمی کنه  بعدشم یک سئوال. اطلاعات کجا ثبت میشه؟ یعنی میانگین بر چه اساسی تهیه میشه؟  عماد:  سلام، این آموزش فقط بخش client side سیستم رو پوشش میده، شما خودت باید سمت سرور رو برنامه نویسی کنید.  اطلاعات جایی ذخیره نمیشه، همونطور که گفتم باید شما باید برنامه نویسی سمت سرور رو انجام بدید و اطلاعات رو توی دیتابیس ذخیره کنید.  ماینگین هم تقسیم میزان رتبه به دست اومده به تعداد رای ها هست که اون رو هم باید از اطلاعات ذخیره شده در دیتابیس محاسبه کنید و بر اساس اون مقدار width (توضیح داده شد) رو برای نمایش مقدار اولیه ستاره ها تعیین کنید.  موفق باشید

tabadol link نوشته شده توسط shahrukh در 1388/12/01 - 17:19 با عرض سلام   وب زیبایی دارین میخواستم تبادل لینک کنم اگه مایل به تبادل لینک هستین منو با نام  هر عکسی بخوای دارم!  www.bia2pix.ir  بازدید روزانه ما000  لینک کنید و در نظرات خبرم کنید تا در اولین فرصت لینک شوید  مدیر سایت بیاتو پیکس

ایجاد یادداشت
لطفا نظرات خود را در مورد این مطلب در اینجا ثبت کنید
نام:
پست الکترونیکی شما:
عنوان:
BBCode:
یادداشت
کد امنیتی: