سؤال سهل على أعضاء هذا المنتدى العملاق ( زر css )

**zuhairtaha** · 22-07-2010

السلام عليكم ورحمة الله وبركاته
أعزائي أعضاء هذا الصرح الشامخ و المنتدى العملاق
لدي سؤال متأكد أن إجابته عندكم وهو سهل عليكم ان شاء الله

أريد صنع زر يتكون من صورتين
الصورة التالية هي الزر في الحالة الطبيعية

و الصورة التالية هي شكل ظهور الزر عند مرور الماوس فوقه

عملتها بالجافا سكريبت ولكن أرغب بعملها بالـ css
و بشكل عام في مثل هذه الحالة ما هي أفضل طريقة لعمل هذا

و أيضاً لا ننسى أنه قد يوجد عدة أزرار بجوار بعضها فما هي الطريقة الأنسب و الأمثل
و حالياً أرغب منكم بالحصول على كود يعتمد على تقنية css لعمل هذا
ولكم ألف شكر

**majado2** · 23-07-2010

تفضل اخوي
اولا هذا كود الـ css

كود PHP:


<style type="text/css">
<!--
#majado2
{
 background-image: url(مسار الصورة الاصلية);
 padding: 5px;
 width: 137px;  
 height: 62px;
 position:absolute; 
}
#majado2:hover
{
 background-image: url(مسار الصورة بعد مرور الماوس);
 
}
-->
</style>

لا تنسى مقاسات الصوره

لازم تكون مضبوطه

وهذا كود الـ html

كود PHP:


 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="aqar-rent.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div><a id="majado2" href="services.php"  title="الخدمات" ></a></div>
</body>
</html>

جرب وبالتوفيق يا صديقي :nice:

**zuhairtaha** · 23-07-2010

أشكرك جداً جداً جداً على المساعدة :app:
لو تعلم كم سررت بردك الرائع ياغالي :eek2:
جزاك الله كل خير
وهذا الكود كاملا مع ضبط الصور و الأبعاد فقد يستفيد غيري من بعدي منه أيضاً
و الصور مرفوعة على النت أي الكود جاهز :

كود HTML:

<!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>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
#majado2
{
 background-image: url(http://img834.imageshack.us/img834/2605/90259863.png);
 padding: 5px;
 width: 84px;  
 height: 75px;
 position:absolute; 
 background-repeat:no-repeat;
}
#majado2:hover
{
 background-image: url(http://img6.imageshack.us/img6/245/47823723.png);
}
</style>  
</head>
<body>
<div><a id="majado2" href="http://www.tahasoft.com/vb"  title="الخدمات" ></a></div>
</body>
</html>

**المصمم نور الجمالي** · 23-07-2010

معاً لنتعلم شكراً لأعضاء سوالف الكرام

الموضوع: سؤال سهل على أعضاء هذا المنتدى العملاق ( زر css )

أدوات الموضوع

بحث في الموضوع

سؤال سهل على أعضاء هذا المنتدى العملاق ( زر css )

المواضيع المتشابهه

رسالة إلى أعضاء المنتدى

كيف أدمج أعضاء ألبوم 4image مع أعضاء المنتدى

اعترافات أعضاء المنتدى......

ضوابط المشاركة