به لینک‌های خود جلوه بیشتری بدهید

یكی از مهم‌ترین و پركاربردترین عناصر یك صفحه وب، لینك‌هایی هستند كه برای دسترسی به متون، اشكال یا صفحات وب و سایت‌های دیگر بر روی آن صفحه قرار گرفته‌اند و بیننده سایت را در راه رسیدن به مطالب موردنظر خود راهنمایی می‌كنند. بیشتر اوقات، طراحان وب برای نیل به این مقصود ترجیح می‌دهند تا این لینك‌ها و به خصوص آن‌هایی كه از كاربرد بیشتر و مهمتری در یك سایت برخوردارند را طوری بر روی یك صفحه وب قرار دهند تا نه تنها عمل موردنظر كاربر را انجام دهد، بلكه از ابتدا در جلب توجه وی و بیان نمودن اهمیت لینك مذكور، نقش بیشتری را بازی می‌كند. به‌همین منظور این طراحان سعی می‌كنند تا برخی از لینك‌های مهم و گاهی همه لینك‌ها را به شكل خاصی از برخی دیگر و همچنین سایر عناصر روی صفحه وب متمایز سازند. استفاده از مكانیسم تغییررنگ لینك، قرار دادن پیغام‌های جانبی بر روی لینك (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

ترجمه: مهیار داعی الحق

منبع : ماهنامه شبکه