چهارشنبه, ۱۹ اردیبهشت, ۱۴۰۳ / 8 May, 2024
مجله ویستا
به لینکهای خود جلوه بیشتری بدهید
یكی از مهمترین و پركاربردترین عناصر یك صفحه وب، لینكهایی هستند كه برای دسترسی به متون، اشكال یا صفحات وب و سایتهای دیگر بر روی آن صفحه قرار گرفتهاند و بیننده سایت را در راه رسیدن به مطالب موردنظر خود راهنمایی میكنند. بیشتر اوقات، طراحان وب برای نیل به این مقصود ترجیح میدهند تا این لینكها و به خصوص آنهایی كه از كاربرد بیشتر و مهمتری در یك سایت برخوردارند را طوری بر روی یك صفحه وب قرار دهند تا نه تنها عمل موردنظر كاربر را انجام دهد، بلكه از ابتدا در جلب توجه وی و بیان نمودن اهمیت لینك مذكور، نقش بیشتری را بازی میكند. بههمین منظور این طراحان سعی میكنند تا برخی از لینكهای مهم و گاهی همه لینكها را به شكل خاصی از برخی دیگر و همچنین سایر عناصر روی صفحه وب متمایز سازند. استفاده از مكانیسم تغییررنگ لینك، قرار دادن پیغامهای جانبی بر روی لینك (Popup Message)، روشنتر كردن رنگ یك لینك (high light)، قرار دادن یك خط زیر متن یك لینك (Underline) و بسیاری از روشهای دیگر، از جمله فوتوفنهایی است كه طراحان برای رسیدن به مقصود از آن استفاده میكنند.بسیاری از این نوع ترفندها، برخلاف آنچه كه ابتدا به نظر میرسد، بسیار آسان و با اطلاع نه چندان وسیعی از زبان جاوا اسكریپت قابل انجام میباشند. به عنوان مثال، حتماً بسیاری از شما هنگام گشت و گذار در اینترنت به برخی از لینكها برخوردهاید كه در زمان قرار دادن مكاننمای ماوس بر روی آن، یك نوار متن شامل توضیحات جانبی در مورد آن لینك به شما نمایش داده میشود. به شكل ۱ نگاه كنید. این لینك بر اثر تغییر tag مربوط به آن، دارای این قابلیت شده است (كد ۱ ).
كد شماره ۱
<a href="Company.html"
title="Click here for cast and crew biographies">همچنین اگر بخواهید به جای نوار توضیح فوق، با نگاه داشتن ماوس بر روی یك لینك، متن آن را به صورت زیر خطدار(underline) نمایش دهید باید كد ۲ را در قسمت <>head فایل html خود قرار دهید (كد ۲ ).
كد شماره ۲
<style type="text/css">
<!-
A{color : #۹۹ffff ; text-decoration:none}
a:hover{text-decoration:underline}
->
</style>
در بسیاری از صفحات وب هم، طراح به گونهای كد مذكور را نوشته كه با قرار دادن ماوس بر روی یك لینك، رنگ متن با رنگ زمینه آن لینك عوض میشود. انجام این كار هم بسیار ساده است. كافی است در كد ۲ به غیر از خصوصیتtextdecoration، دو خصوصیت دیگر برای رنگ متن و رنگ زمینه هم به آن اضافه كنید. این دو خصوصیت یعنی Color و همچنینbackgroundcolor را در همان قسمت hover (كد ۲) همانند خصوصیت textdecoration قرار دهید تا در صورت قرار گرفتن مكاننمای ماوس بر روی هر لینك، هر سه خصوصیت اصلی مذكور برای آن تنظیم شود. برای این كار، خط چهارم كد ۲ را به شكل كد ۳ تغییر دهید.
كد شماره ۳
<style type="text/css">
<!-
A{color : #۵۵ffff ; text-decoration:none}
a:hover{text-decoration:underline;
color:#۹۹ffff ; background-color:۳۳ffaa}
->
</style>
كد شماره ۴
<img src="louvre.jgp" alt="louvre" width="۳۰۰" height="۳۰۰"
hspace="۱۰" align="left" name="paris" >
<a href-"wheel.html" OnMouseOver="document.paris.src=۰۳۹;wheel.jpg۰۳۹;; " >
tuileries Wheel </a>
<p><a href="louvre.html" OnMouseOver="document.paris.src=۰۳۹;louvre.jpg۰۳۹;;">
Louvre Museum </a>
لینك به همراه تصویر
یكی دیگر از شگردهایی كه برخی از طراحان وب از آن استفاده میكنند، نمایش اطلاعات مربوط به یك لینك به صورت تصویر است. در این روش هرگاه مكاننمای ماوس بر روی یك لینك قرار گیرد تصویر مربوط به آن لینك در یك قسمت مخصوص از صفحه وب نمایش داده میشود و با عبور مكاننمای از روی لینك مذكور، آن تصویر هم ناپدید میگردد. به شكل ۳ نگاه كنید. در این شكل مكانهای دیدنی از شهر پاریس به صورت ۴ لینك قرار گرفتهاند. سمت چپ تصویر محل نمایش تصویر مربوط به هر كدام از لینكها قرار داده شده است. برای انجام این كار، یك تصویر به هر لینك انتساب داده شده كه نحوه انجام آن را در كد ۴ مشاهده میكنید. در این كُد از خاصیت یا به بیان بهتر، رویدادی به نام onMouseOver استفاده شده است. این رویداد عبور مكاننمای ماوس بر روی لینك href را به تصویر موجود در document.paris.src مرتبط میكند.اگر به انجام این قبیل كارها علاقهمند شدید، به سایتهای زیر سر بزنید. در این سایتها كدهای جاوا اسكریپت برای انجام ترفندهای گوناگون مهیا و آماده هستند.
www.javagoodies.com
www.javascripts.com
www.javascript.internet.com
www.scripts.com.co.uk
ترجمه: مهیار داعی الحق
منبع : ماهنامه شبکه
نمایندگی زیمنس ایران فروش PLC S71200/300/400/1500 | درایو …
دریافت خدمات پرستاری در منزل
pameranian.com
پیچ و مهره پارس سهند
تعمیر جک پارکینگ
خرید بلیط هواپیما
ایران دولت سیزدهم مجلس شورای اسلامی دولت رئیس جمهور سید ابراهیم رئیسی رافائل گروسی حجاب انتخابات رهبر انقلاب مجلس انتخابات مجلس
هواشناسی قتل تهران شهرداری تهران پلیس وزارت بهداشت بارش باران آموزش و پرورش شهرداری سیل فضای مجازی سلامت
قیمت طلا خودرو قیمت دلار مسکن حقوق بازنشستگان قیمت خودرو مالیات بازار خودرو ایران خودرو بانک مرکزی بورس سایپا
نمایشگاه کتاب نمایشگاه کتاب تهران تلویزیون تئاتر دفاع مقدس محمدمهدی اسماعیلی سینمای ایران سریال موسیقی سینما کتاب رسانه ملی
دانشگاه تهران اینوتکس دانشگاه آزاد اسلامی دانش بنیان
رژیم صهیونیستی اسرائیل غزه فلسطین جنگ غزه رفح روسیه حمله به رفح چین ترکیه نوار غزه اوکراین
فوتبال پرسپولیس استقلال لیگ قهرمانان اروپا دورتموند لیگ برتر ذوب آهن نساجی بازی لیگ برتر ایران لیگ برتر فوتبال ایران رئال مادرید
تبلیغات عیسی زارع پور اپل اینترنت آب گوگل سامسونگ آیفون ناسا مایکروسافت ایلان ماسک فضا
رژیم غذایی سرطان سبک زندگی چاقی هندوانه کمردرد کنسرو ناباروری زیبایی بیماران خاص کاهش وزن