تلميحات تطوير الويب 9

تلميحات تطوير الويب ( 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 ) 9

تتكون تلميحات هذه التدوينة من :

21 / أعمل أزرار بصورة متغيره عند مرور الفأرة وعند الضغط على الزر بأبسط وأفضل طريقة

22 / استخدم Google Chatback لمحادثة زوارك والتواصل معهم

تابع التلميحات لمعرفة المزيد :

21 / أعمل أزرار بصورة متغيره عند مرور الفأرة وعند الضغط على الزر بأبسط وأفضل طريقة

راح تلاحظون في موقعي عند مرور الفأرة على الشعار يضيء الشعار ويظهر نص ( الرئيسية ) , تتميز هذه الطريقة التي سنعرضها لكم بسرعة عرض الصورة الأخرى التي تظهر عند مرور الفأرة لأن الصورة الأولى قبل مرور الفأره والصورة الثانيه بعد مرور الفأره عليها هي صورة واحده فقط يتم التحكم بها عن طريق background-position والدرس شبيه بأحد التلميحات السابقة اللي عرضناها بخصوص عرض عدة صور من صورة واحدة وبإستخدام background-position لكن يختلف هنا بإضافة الخاصية :hover لكي يتم تغيير موقع الخلفيه عند مرور الفأره عليها وكذالك إضافة :active لكي يتم تغيير موقع الخلفية عند الضغط عليها وهنا مثال :

الصورة التي صممناها ليتم إستخدامها في  الروابط كالقائمة الرئيسية في الأعلى أو في أي مكان

حيث أن الجزء الأول من الصورة سيكون قبل حدوث أي حدث ثم في الجزء الثاني من الصورة عند مرور الفأرة وفي الجزء الثالث عند الضغط على الرابط

وهنا مثال عملي للمشاهدة والتجربة ( يمكنك الضغط عليها للتجربه لن يتم نقلك لأي صفحه أخرى )

الرئيسيةمن نحنسجل الزواراتصل بنا

لقراء خلاصات الـ RSS الأعزاء يرجى الدخول للموضوع للمشاهدة والتجربة من هنا

ستلاحظ تفاعل الأزرار مع الفأرة وهذه طريقة رائعة لتفاعل الزائر مع موقعك , الأن لنبدأ بالطريقة أولاً عند إضافة الأزرار

<div id="header_menus"><a>زر 1</a><a>زر 2</a><a>زر 3</a></div>

نضيف عليها الـ CSS اللازمة :

#header_menus a {
width:105px;
height:23px;
display:block;
background:url(https://www.althari.ws/wp-content/uploads/2009/01/button_submit.gif);
}

نحن أضفنا العرض والإرتفاع ولكي يمكننا تأثير ذالك في الرابط الذي يحمل الوسم a يجب أن نحول ظهوره إلى block لأنه بالظهور الإفتراضي هو مثل النص ومثل النص يعتبر ظهوره بالـ CSS باسم inline فيمكننا التبديل بين خصائص الوسوم حسب حاجتنا , ثم بعد تغيير ظهوره إلى block لكي يتم تأثير خاصية العرض والإرتفاع قمنا بإضافة الخلفيه عليها وبشكل طبيعي ستظهر الخلفية أول جزء حسب الطول والعرض الذي أضفناه لأول جزء

الأن نريد أن نضيف عند مرور الفأره يتم تغيير موقع الخلفيه إلى الجزء الثاني إلى الأسفل بالطريقة التالية :

#header_menus a:hover {
background:url(https://www.althari.ws/wp-content/uploads/2009/01/button_submit.gif)
0px -26px;
}

أضفنا الحدث :hover عند خاصية الزر a لكي نقوم بعمل الخاصيه عند حدوث الحدث المطلوب , وأضفنا صورة الخلفية من جديد ثم حركناها إلى الأسفل قليلاً فالرقم 0px يرمز إلى موقع الصوره من اليسار اما الرقم الثاني فهو موقع الصورة من الأعلى فلو مثلاً أضفنا 26px بدل سالب 26px سيتم إظهار الصورة التي بالجزء الأعلى وهي تمثل صورة الضغط على الحدث وهذا ما لا نريده ننتقل إلى صورة الضغط على الحدث وبكل سهوله

#header_menus a:active {
background:url(https://www.althari.ws/wp-content/uploads/2009/01/button_submit.gif)
0px -52px;
}

أضفنا خاصية جديده وأضفنا لها الحدث active ثم وضعنا الخلفيه وحركناها إلى الأسفل حسب ارتفاع الجزئين للصورتين الأوليتين لكي يظهر لنا الصوره الثالثه

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

وهناك ملاحظه مهمه في متصفح الفايرفوكس عند الضغط على رابط تظهر حدود منقطه عليه ليدلك انك ضغطت هنا وقد تشوه على الصوره التي ضغطت عليها لذالك يمكنك إزالتها بإستخدام الخاصية outline:none; كالتالي:

#header_menus a:active, #header_menus a:focus{
outline:none;
}

وكذالك يمكنك إزالة الحدود المنقطه إذا أردت من أي رابط في موقعك باستخدام هذه الخاصية.

أتمنى أن أكون قد وفقت في الشرح وأفدتكم ننتقل إلى التلميحة الأخرى.

22 / استخدم Google Chatback لمحادثة زوارك والتواصل معهم

قد تكون خدمه قديمه ولكنها مفيده وجميله والبعض لا يعرفها , يمكنك مشاهدة طريقة عمل المحادثة النصيه الخاصة بالتواصل مع زوار موقعك في موقعي الشخصي كالصورة التالية:

ولعمل ذالك بكل بساطة يمكنك الحصول على الكود من خلال الرابط التالي للـ Google Chat Back , وهذا طبعاً إذا كان لديك حساب في Google والتواصل مع الزوار يكون عن طريق GTalk او البريد GMail

تمنياتي لكم بكل التوفيق وإلى التلميحات الجاية إن شاء الله :)