طريقتان لإنشاء صفحة ويب رائعة انقر بزر الماوس الأيمن على القائمة

في صفحات الويب العامة، تعد قائمة النقر بزر الماوس الأيمن الافتراضية في متصفح IE وضعًا ثابتًا لا يتغير، ولا يستخدمه معظم مستخدمي الإنترنت كثيرًا عند تصفح صفحات الويب. بالنسبة لمصممي الويب المحترفين، سيكون الأمر رائعًا ومريحًا جدًا إذا كان من الممكن تصميم قائمة النقر بزر الماوس الأيمن بمحتوى مخصص.
فقط تخيل، عندما ينقر المستخدم بزر الماوس الأيمن على موقع الويب الخاص بك، سترى "الروابط" و"إرسال الرسائل" المنظمة بعناية، والتي تتضمن أيضًا رسوم فلاش تفاعلية ملونة! كما هو موضح في الشكل 1 - لا يسيل لعابك، دعنا نروي عطشك ونرى كيفية صنعه :).

لدي طريقتان لتحويل قائمة النقر بزر الماوس الأيمن (في الواقع، الجوهر هو نفسه، وكلاهما من عناصر JavaScript).

الطريقة الأولى أقدم، ما عليك سوى نسخ التعليمات البرمجية المصدر التالية إلى ملف HTML الموجود في صفحة الويب.

<نمط>
<!--
.الجلد0 {
الموقف:مطلق؛
محاذاة النص:يسار؛
العرض: 200 بكسل؛
الحدود: 2 بكسل أسود خالص؛
لون الخلفية: القائمة؛
عائلة الخط: فيردانا؛
ارتفاع الخط: 20 بكسل؛
المؤشر:افتراضي؛
الرؤية:مخفية؛
}
.skin1 {
المؤشر:افتراضي؛
الخط:menutext;
الموقف:مطلق؛
محاذاة النص:يسار؛
عائلة الخطوط: Arial، Helvetica، sans-serif؛
حجم الخط: 10 نقطة؛
العرض: 120 بكسل؛
لون الخلفية: القائمة؛
الحدود: 1 زر صلب؛
الرؤية:مخفية؛
الحدود: 2 زر البداية تسليط الضوء؛
}
عناصر القائمة {
الحشو الأيسر: 15 بكسل؛
الحشو الأيمن: 10 بكسل؛
}
-->
</نمط>
< لغة البرنامج = "JavaScript1.2">
< !-- موقع الويب: http://www.painting-effacts.co.uk -->

< !-- هذا البرنامج النصي وغيره متاح مجانًا عبر الإنترنت على -->
< !-- مصدر جافا سكريبت!! http://javascript.internet.com -->

< !-- ابدأ
var Menuskin = "skin1";
var Display_url = 0; // إظهار عناوين URL في شريط الحالة؟
وظيفة showmenuie5() {
var rightedge = document.body.clientWidth-event.clientX;
var Bottomedge = document.body.clientHeight-event.clientY;
إذا (حافة اليمين < ie5menu.offsetWidth)
ie5menu.style.left = document.body.scrollLeft + events.clientX -
ie5menu.offsetWidth;
آخر
ie5menu.style.left = document.body.scrollLeft + events.clientX;
إذا (أسفل الحافة < ie5menu.offsetHeight)
ie5menu.style.top = document.body.scrollTop + events.clientY -
ie5menu.offsetHeight;
آخر
ie5menu.style.top = document.body.scrollTop + events.clientY;
ie5menu.style.visibility = "visible";
عودة كاذبة.
}
وظيفة إخفاء القائمة5() {
ie5menu.style.visibility = "مخفي";
}
وظيفة تمييز 5 () {
إذا (event.srcElement.className == "menuitems") {
events.srcElement.style.backgroundColor = "تسليط الضوء"؛
events.srcElement.style.color = "white";
إذا (display_url)
window.status = events.srcElement.url;
}
}
وظيفة lowlightie5() {
إذا (event.srcElement.className == "menuitems") {
events.srcElement.style.backgroundColor = "";
events.srcElement.style.color = "black";
window.status = "";
}
}
وظيفة الانتقال السريع5() {
إذا (event.srcElement.className == "menuitems") {
إذا (event.srcElement.getAttribute("target") != null)
window.open(event.srcElement.url, events.srcElement.getAttribute("target"));
آخر
window.location = events.srcElement.url;
}
}
// النهاية -->
</script>
< div id = "ie5menu" class = "skin0" onMouseover = "highlightie5 ()"
onMouseout = "lowlightie5 ()" onClick = "jumptoie5 ()؛">
< div class="menuitems" url="javascript:history.back();">الرجوع</div>
< div class="menuitems" url=" http://javacool.3322.net ">العودة إلى الصفحة الرئيسية</div>
<ساعة>
< div class="menuitems" url=" http://www.163.com ">NetEase</div>
< div class="menuitems" url=" http://www.sohu.com ">سوهو</div>
<ساعة>
< div class="menuitems" url=" http://www.sina.com.cn ">سينا</div>
< div class="menuitems" url=" http://www.yahoo.com.cn ">ياهو</div>
< /ديف>
<script language="JavaScript1.2">
إذا (document.all && window.print) {
ie5menu.className = Menuskin;
document.oncontextmenu = showmenuie5;
document.body.onclick = Hidemenuie5;
}
</script>
التأثير هو كما يلي:

الطريقة الثانية هي استخدام مكون إضافي لبرنامج Dreamweaver - Right_Click_Menu_Buil-der، والذي يمكن تنزيله من http://www.macromedia.com . بعد التثبيت، يمكن العثور على الأمر "Right Click Menu Builder" ضمن قائمة "Command" في Dreamweaver.
انقر فوق هذا الأمر، وسيظهر مربع الإعداد كما هو موضح في الشكل 3. هناك جزأين أساسيين: "القائمة" و"الأنماط".

القائمة مخصصة لإعداد الارتباطات التشعبية وروابط الإرسال يمكن ضبطها هنا. "نص القائمة" في مربع التحديد هذا هو النص الذي سيتم عرضه عند النقر بزر الماوس الأيمن (قم بتغييره إلى اللغة الصينية)؛ واكتب مسار الرابط المقابل في "URL"؛ ويحدد "الهدف" ما إذا كانت نافذة جديدة أم الحالية يتم استخدام النافذة للعرض سيتم عرض محتوى الارتباط في نافذة جديدة عن طريق ملء "فارغ"، وهو نفس إعداد "Target" في Dreamweaver.

الأنماط هي المسؤولة عن تحديد مظهر القائمة. هناك خياران:
img src=" "قائمة نوع Windows (افتراضي)" هي العنصر الافتراضي - أبسط مظهر ونمط Windows المألوف؛
القائمة المخصصة "القائمة المخصصة"، إذا قمت بتحديد هذا العنصر، فستحتاج أيضًا إلى تعيين المحتوى التالي:
"عرض القائمة"، عرض القائمة؛
"الخط"، الخط؛
"لون الخط"، لون الخط؛
"جانب الخط"، حجم الخط؛
"لون الخلفية"، "صورة الخلفية"، لون الخلفية وصورة الخلفية؛
يوجد أيضًا "المؤشر" الذي يستخدم لتحديد نمط الماوس.
بعد ضبط ما سبق، يمكنك النقر فوق "إضافة" لإنشاء التأثير. معاينة ذلك، هل هو جيد

ثم كيفية إضافة فلاش؟ وإليك كيفية القيام بذلك: قم بإضافة "جدول" إلى صفحة الويب، ومن المستحسن ضبط عرضه "W" على: "100%"، مما يسهل تحديد موضع العناصر المختلفة التي تضيفها أدناه. حسنًا، أدخل ملف Flash SWF في "الجدول" واضبط الموضع على "الوسط" (لتسهيل تحديد الموقع بشكل أساسي، بالطبع، يمكنك تحليل المشكلات المحددة بالتفصيل وستحصل على رؤى من خلال تجربة المزيد).

نصيحة: من الممكن أيضًا إنشاء رسوم فلاش متحركة باستخدام روابط تفاعلية. لماذا؟ بهذه الطريقة يمكنك إضافة أي عدد تريده من الارتباطات التشعبية. يحتوي المكون الإضافي نفسه على حد يصل إلى 10 عناصر، والتي يمكن حلها باستخدام Flash ^_^!