كيفية إنشاء رابط مع صورة التمرير في CSS عادي

تم التحديث: 2020-02-27 / مقال: جيري لو

* ملاحظات التحديث: تم نشر هذا المنشور لأول مرة في أكتوبر 2009. بعض التقنيات التي ذكرتها ربما عفا عليها الزمن. يرجى الرجوع إلى هذا الدليل لأحدث تقنيات إنشاء الموقع.

ما هو تحوم؟ التعريف مقتبس من UWStout.edu:

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

يعمل تأثير التمرير على تحسين قابلية استخدام الويب ويساعد مالكي الويب على توجيه حركة مرور الويب الخاصة بهم. عندما ترغب في أن يولي مستخدمو الويب اهتمامًا إضافيًا لارتباط خاص ، فإن الطريقة الجيدة للقيام بذلك هي إنشاء ارتباط بتأثير تمرير جذاب. يشير تأثير التمرير البسيط مثل هذا (تسطير بسيط وتغيير لون النص) إلى أن النص "قابل للنقر" ويحسن تفاعلات الويب. ومع ذلك ، فإن تغيير لون النص وأنماطه (تسطير / خط علوي / غامق) أساسي للغاية وهناك الكثير الذي يمكن القيام به باستخدام التمرير.

في هذه المقالة ، سأوضح كيف يمكنك إنشاء روابط جيدة المظهر مع تأثير التحويم.

مثال 1: رابط مع زر التحويم

أولاً ، ألق نظرة على مثال العمل (ضع الماوس فوق الارتباط لترى كيف يعمل - تغيير الرمز على الجانب).

مثال 1 - ارتباط بصورة زر التمرير

هذه هي النسخة المكتملة لما سيتم بناؤه في هذا المثال.

كيف ننشئه في CSS عادي؟

صورة الزر

الخطوة 1 ، كما ترى ، نحتاج إلى رموز أسهم في نسختين مختلفتين. في المثال الخاص بنا ، استخدمت الأحمر (#CC3300) كزر الارتباط الافتراضي؛ والرمادي (#333333) لتأثير التمرير. يمكن بسهولة صنع هذا الزر باستخدام أي برنامج لتحرير الصور.

لدينا الآن زر اللون الأحمر (على سبيل المثال ، b1.png) ولون ريي (زر يقول ، b2.png). قم بدمج هذين الملفين في ملف صورة واحد مع b1.png أعلى b2.png. ستكون هذه الصورة النهائية للرابط. قم بتسمية ذلك (قل ، x.png) وقم بتحميل الموقع المطلوب (بالنسبة لحالتي ، قمت بوضعه في مجلد قالب WP الخاص بي).

للرجوع اليها:

b1.png ، b2.png و x.png

رمز CSS

المقبل ، على رمز CSS. بشكل أساسي ، ما نريد تحقيقه هو وضع مسافة بادئة على نص الرابط قليلاً إلى اليمين لتوفير مساحة للزر ؛ وفي الوقت نفسه ، عرض صورة مختلفة عندما يكون الرابط في حالة التمرير. هذه هي المواد الأساسية جميلة إلا أننا بحاجة إلى تطور قليلا على موقف الخلفية. الحيلة هي إظهار الجزء العلوي من الصورة (الزر الأحمر) للارتباط الأصلي. وعندما تحوم ، قم بتزييف صورة الخلفية باستخدام -11px (قد يختلف على موقع الويب الخاص بك) الهامش لإظهار الزر الرمادي.

.xa {color: #cc3300؛ padding-left: 14px؛ font-weight: bold؛ background-image: url (images / x.png)؛ وضع الخلفية: 0 2px؛ تكرار الخلفية: لا تكرار ؛ }
.xa: hover {color: #333333؛ padding-left: 14px؛ font-weight: bold؛ background-image: url (images / x.png)؛ وضع الخلفية: 0 -11px؛ تكرار الخلفية: لا تكرار ؛ }

تطبيق

لإظهار تأثير التحويم هذا ، قم ببساطة بإدراج الفئة x في المنطقة المحددة. إليك مثال على كيفية القيام بذلك.

الصفحة الرئيسية

مثال 2: رابط في خلفية التمرير

مع نفس المفهوم ، هناك طرق لا نهاية لها يمكنك من خلالها جعل الروابط تبدو باردة. إليك مثال آخر على ما يمكننا القيام به مع تأثيرات التحويم بطريقة مختلفة قليلاً. مرة أخرى ، إلقاء نظرة على النسخة النهائية.

مثال 2 - ارتباط في خلفية التمرير

في هذا المثال ، ما سأفعله هو إنشاء ارتباط تشعبي مفضل بالزر عندما يتم تغيير الخلفية عندما يضع المستخدمون الماوس فوقها.

كيف ننشئه في CSS عادي؟

صور الخلفية

أولاً ، قم بإنشاء صورتين لمستطيل دائري. لأغراض العرض التوضيحي ، لن ندمج هاتين الصورتين في هذا المثال. سنقوم بتسمية المستطيل الأحمر (#CC3300) باسم b1.png؛ ومستطيل المارون (#9F2800) كـ b2.png.

رمز CSS

بعد ذلك ، إليك الرموز الخاصة بورقة الأنماط الخاصة بك (نقوم بتسمية الفئة "y" في هذا المثال الثاني).

ay {width: 280px؛ الارتفاع: 42px؛ اللون: #000000. الحشو: 10px؛ النص الديكور: لا شيء؛ العرض محجوب؛ font-weight: bold؛ background-image: url (images / b1.png)؛ تكرار الخلفية: لا تكرار ؛ }
ay: hover {width: 280px؛ الارتفاع: 42px؛ اللون: #FFFFFF؛ الحشو: 10px؛ font-weight: bold؛ النص الديكور: لا شيء؛ العرض محجوب؛ background-image: url (images / b2.png)؛ تكرار الخلفية: لا تكرار ؛ }

تطبيق

لعرض الارتباط ، قم ببساطة بإدراج الفئة (y) في العلامة في شفرة المصدر الخاصة بك. مثال:

الصفحة الرئيسية

اختتام

آمل أن يكون هذا المقال قد جلب لك معلومات قيمة وألهم البعض منك استخدام CSS بطريقة إبداعية. إذا كانت هناك أية نقاط أخرى تعتقد أنه ينبغي علي إضافتها في هذا الدليل ، فلا تتردد في ترك أفكارك في قسم التعليقات.

عن جيري لو

مؤسس WebHostingSecretReveals.net (WHSR) - مراجعة استضافة موثوق بها ويستخدمها مستخدمو 100,000. خبرة تزيد عن 15 في مجال استضافة المواقع والتسويق التابع لها وكبار المسئولين الاقتصاديين. مساهم في ProBlogger.net ، Business.com ، SocialMediaToday.com ، وأكثر من ذلك.