السلام عليكم .
اخباركم يا شباب ؟
اليوم جايب درس طريقة عمل Hover Button في الموقع ^^
اول شي مثال وهو تطبيقي للدرس
Home
بسم الله نبدأ :
أنشأ مجلد اسمه test (( او أي اسم )) .
افتح الشير بونت SharePoint أو أي برنامج تستعمله ..
وضح داخل وسم الـ HEAD التالي :
كود:
<style type="text/css">
#styleone{position:relative;display:block;height:24px;font-size:11px;
font-weight:bold;background:transparent url(images/bgOFF.gif) repeat-x top left;
font-family:Arial,Verdana,Helvitica,sans-serif;}
#styleone ul{margin:0;padding:0;list-style-type:none;width:auto;}
#styleone ul li{display:block;float:left;0 1px 0 0}
#styleone ul li a{display:block;float:left;color:#000;text-decoration:none;
padding:6px 20px 0 20px;height:24px;}
#styleone ul li a:hover,#styleone ul li a.current{color:#fff;
background:transparent url(images/bgON.gif) repeat-x top left;}
</style>
وقم بوضع التالي في الـ Body :
كود:
<div id="styletwo">
<ul>
<li><a href="" title="">Home</a></li>
<li><a href="" title="">About Us</a></li>
<li><a href="" title="" class="current">Services</a></li>
<li><a href="" title="">Our Work</a></li>
<li><a href="" title="">Contact Us</a></li>
</ul>
</div>
احفظ عملك داخل الملف test باسم : index.html
الان افتح الفوتوشوب واعمل صورتان جديدتان طبعا يفضل الاولى داكنة والاخرى فاتحة .. بمقاس :
الطول : 25 بيكسل
العرض : 1 بيكسل
سمي الأولى : bgOFF.gif
والثانية : bgON.gif
وضعهم داخل ملف اسمه Images
طيب اذا ما تعرف تصمم خذ هالصورتين ..
http://www.c77c.net/phpl/images/bgOFF.gif
http://www.c77c.net/phpl/images/bgON.gif
الصورتين مجهريتين على فكرة هههههه .. حاول تشوفهم وتحفظهم ..
الان جرب اللي عملته على المتصفح وشوف النتيجة .. ومبرووك ..
أي خدمة انا موجود ..