اين آموزش به شما خواهد آموخت كه منويي بسازيد كه با رفتن موش بر روي منو رنگ آن تغيير كند. اگر توجه داشته باشيد اينگونه منوها را در سايتهاي مختلف ديده ايد. 1- اول ساخت منو در صفحه مورد نظر وب سايت خود. سپس انتخاب 2 رنگ مختلف يكي براي وقتي كه موش بر روي منو ميرود و يكي براي حالت عادي براي اين موارد كد هاي زير را بين دو عبارت HEAD در اديتور خود كپي كنيد (Between <HEAD></HEAD> tags) :
كد:
<style type="text/css"> td.off { background: #CCCCCC; } td.on { background: #999999; } </style>
ميتوانيد عبارات #CCCCCC و #999999 كه معرف رنگهاي انتخاب شده است را با رنگهاي مورد علاقه خود عوض كنيد. 2- حال CSS به table ساخته شده توسط شما اضافه خواهد شد. اين قسمت يك class file است. براي اين منظور كدهاي زير را وارد نماييد :
table. class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"
بايد كدهاي شما مانند خط زير باشد :
<td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'">MENU 1</td>
حال موارد زير را يكي يكي اعمال كنيد :
1: td class="off" 2: onmouseover="this.className='on'" 3: onmouseout="this.className='off'"
خب اين هم كدهاي اين آموزش به صورت كامل براي آنهايي كه ميخواهند بدون آموزش فقط از اين امكان استفاده كنند و به چند و چون كار علاقه اي ندارند :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Table Background Change</title> <style type="text/css"> td.off { background: #CCCCCC; } td.on { background: #999999; } </style> </head> <body> <table width="150" cellpadding="3"> <tr> <td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif">Menu 1 </font></td> </tr> <tr> <td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif">Menu 2 </font></td> </tr> <tr> <td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif">Menu 3</font></td> </tr> <tr> <td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif">Menu 4 </font></td> </tr> </table> </body> </html>
نمونه
اميدوارم اين آموزش براي همگان مفيد باشد. با درج نام نويسنده و مترجم: رضاچيذري R_Chizari@hotmail.com بلامانع ميباشد.
براي اينكه رنگ ScrollBar صفحه سايت خود را عوض كنيد كافي است كد زير را در ابتداي برنامه خود اضافه كنيد. (تقريبا بعد از تگ )
<STYLE type=text/css> BODY { SCROLLBAR-FACE-COLOR: #739cbd; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #1f1f1f; SCROLLBAR-3DLIGHT-COLOR: #739cbd; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #cee6f2; SCROLLBAR-DARKSHADOW-COLOR: #ffffff } </STYLE>
خب يك توضيحي در مورد اين سورس بدم...
اول اينكه اين چند خط كد از دستورات CSSپيروي ميكنه كه در تگ Style قرار گرفته است.
Scrollbar-face-color: در اين قسمت رنگ اصلي اسكرول را تعيين مي كنيد.
Scrollbar-shadow-color: در اين قسمت رنگ سايه اسكرول را مشخص مي كنيد (خط موجود در سمت راست و پايين اسكرول)
Scrollbar-highlight-color: در اين قسمت رنگ قسمت روشن اسكرول را مشخص مي كنيد (خط موجود در سمت چپ و بالاي اسكرول)
Scrollbar-3dhigh-color: اين پارامتر رنگ بوردر (خط) دور اسكرول را مشخص مي كند. (خط كلي در دور تا دور اسكرول)
Scrollbar-darkshadow-color: خط دوم سايه اسكرول را مشخص مي كند . (اين خط بر روي خط سايه كه در سمت راست و بالاي اسكرول است قرار ميگيرد)
Scrollbar-track-color: اين قسمت رنگ زمينه اسكرول را مشخص مي كند.
Scrollbar-arrow-color: رنگ فلش هاي موجود در كليدهاي بالا و پايين اسكرول را تغيير مي دهد.
به نقل از مجید آن لاین
