ساخت و طراحی پیوند گرافیكی Rollover دار

March 4, 2005 at 04:13 pm

منظور از پیوند گرافیكی ساده در اینجا همون منو گرافیكی هست كه در اغلب وب سایت ها حتما دیدید . بعضی از اون ها قابلیت Rollover رو هم دارن و خلاصه اینكه از افكت های ویژه ایی برای تزیین پیوندها استفاده می كنند .

Rollover هم همون جور كه مطلع هستید یه مكانیزم برای نشان دادن اینكه چیزی فعال است ، می باشد و یك پیوند Rollover هم پیوندی است كه در بعضی مدها ، معمولا با یك رنگ یا تغییر شكل ، وقتی موس كاربر روی آن قرار می گیرد فعال می شود . فكر نكنم كسی تا به حال این جور پیوندی ندیده باشه . چون استفاده از اون ها تحت وب آن قدر رایجه كه به صورت كلیشه ای در آمدند .

این مكانیزم برای یه پیوند معمولی متنی خیلی ساده است و از توضیح اون خودداری می كنیم . در عوض در این تمرین ، این مكانیزم رو برای یك پیوند گرافیكی تشریح می كنیم . اما قبل از اون باید بگم كه پیوندهای گرافیكی یه چندتا عیب اساسی دارن ؟ اول اینكه وقتی بهینه می شوند ، می توانند روی زمان دریافت تاثیر بگذارند ، به خصوص وقتی كه همراه با Rollover باشند . دوم اینكه پیوندهای متنی در مقایسه با این مدل حجم و اندازه خیلی كمتری خواهند داشت . بنابراین من توصیه می كنم از این پیوندها خیلی كم استفاده بشه .

اما وقتی اصرار فردی كه دارین واسش وب طراحی می كنید ، در طراحی این چنین منوهایی ، بالای سرتون باشه مجبور هستید . اما باز هم راه حل هایی داره . من ترجیح می دم در این موارد به CSS متوسل بشم چون اون می تونه تا حدودی كار رو حل كنه . هر چند با جاوا اسكریت هم این كار عملیه . اما قابلیت های CSS در این مورد مخفی نیست . برای مقایسه ما هر دو صورت رو در این تمرین پیاده می كنیم .

اول با استفاده از جاوا اسكریپت . این كد جاوا اسكریپت نسبتا به سادگی نوشته می شود ، و در ابتدا فقط نیازمند تصاویری جهت بارگذاری است و پشتیبانی از شی JavaScript Image باید وجود داشته باشد . كد زیر این rollover پایه را نشان می دهد :

<script type="text/javascript">
if (document.images)
{
homeon = new Image(85, 48);
homeon.src = "images/homeon.gif";
homeoff = new Image(85, 48);
homeoff.src = "images/homeoff.gif";
}
function rollon (imgname)
{
if (document.images)
document [imgname].src = eval(imgname + "on.src");
}
function rolloff (imgname)
{
if (document.images)
document [imgname].src = eval(imgname + "off.src");
}
</script>

برای تست عملكرد این كد شما باید كد اسكریپت بالا رو در میان تگ <head></head> صفحه قرار دهید یا محتویات اسكریپت را در یك فایل با پسوند js ذخیره كنید و سپس آن را در صفحه خود در تگ مذكور فراخوانی كنید و كدهای پایین رو در میان تگ <body></body> قرار دهید :

<a href="home.htm" onMouseOver="rollon('home')" onMouseOut="rolloff('home')">
<img src="images/homeoff.gif" border="o" alt="home" name="home" id="home" />
</a>

البته توجه كنید كه قبل از انجام مراحل فوق باید یك منو ی گرافیكی در دو مدل ، یكی حالت عادی و دیگری حالت rollover طراحی كنید . مانند دو حالت زیر . این اسكریپت تنها برای یك منو نوشته شده است . خودتان می توانید آن را برای منوهای بیشتر ویرایش كنید .

Rollover Link Normal Link

حال به سراغ CSS می رویم تا به كمك آن نمونه ایی از منوی فوق را طراحی كنیم . اگر به شكل و شمایل منو نگاه كنید می بینید فقط گوشه های اون یه خورده انحنا داره . به طور كلی منظور اینه كه این منو از سه تیكه تشكیل شده دو قسمتش مخصوص گوشه های چپ و راست و در میان اون ها یه مستطیل .

اگر تا حدودی با قدرت و كارایی CSS آشنایی داشته باشید به سادگی این منو رو ایجاد می كنید . ما برای این كار فقط به گوشه های خمیده نیاز داریم و قسمت میانی رو توسط CSS ایجاد می كنیم . خوب اگه دقت كنید متوجه می شید كه حذف همین بخش میانی وقتی كه منوهای ما زیاد باشه كمك شایانی به بارگذاری صفحه می كنه و می تونه واقعا موثر باشه . اول از همه گوشه ی چپ منو رو ایجاد می كنیم و از CSS برای نمایش اون به طریقه ی زیر استفاده می كنیم :

گوشه سمت راست گوشه سمت چپ

#navigation a {
color: #000;
background: #fb0 url("images/left-tab.gif") left top no-repeat;
text-decoration: none;
padding-left: 10px }

خوب عناصر به كار رفته كاملا واضحه فقط یه نكته در مورد padding-left ، اون هم اینكه مقدار داده شده به این رشته نشون دهنده فاصله از ابتدای خمیده گی است . چون ما یه منحنی داریم و عنوان بك گراند بكار رفته ( گوشه سمت چپ ) برای این كه نوشته ما زیر انحنا درست قرار بگیره از این رشته اسفاده كردیم . می تونید حذفش كنید و تاثیرش رو مشاهده كنید .

در ادامه كار گوشه سمت راست رو به تگ span نسبت می دیم برای این هم مانند مرحله قبل ، رشته ی padding-right رو تعیین می كنیم . كه در حقیقت فاصله متن رو از انحنای سمت راست مشخص می كنه :

#navigation a span {
background: url("images/right-tab.gif") right top no-repeat;
padding-right: 10px
}

تا اینجا ما حالت نرمال و معمولی پیوند رو ایجاد كردیم . در ادامه كار و برای بكاربردن اون كافیه كدهای زیر رو در تگ <body></body> صفحه خودتون قرار بدید :

<div id="navigation"><a href="/"><span>Home</span></a></div>

حال به ساخت حالت Rollover می پردازیم گوشه ها رو در حالت موردنظر انتخاب می كنیم و با استفاده از كدهای زیر این حالت رو به صفحه الحاق می كنیم :

گوشه سمت راست گوشه سمت چپ

#navigation a:hover {
color: #fff;
background: #26a url("images/left-tab-hover.gif") left top no-repeat;
text-decoration: none;
padding-left: 10px
}
#navigation a:hover span {
background: url("images/right-tab-hover.gif") right top no-repeat;
padding-right: 10px }

كار به پایان رسید حالا شما یه منوی Rollover دار گرافیكی دارید كه می تونید اون رو آزمایش كنید و در طرح هاتون از اون استفاده كنید . با استفاده از دو تگ <ul> و <li> كه به نظر من زیباترین تگ ها دنیای html هستن می تونید یه نوار از این منو ها رو ایجاد كنید . برای راهنمایی بیشتر در این زمینه به اینجا رجوع كنید . در ضمن كلیه تصاویر و گوشه های به كار رفته در این آموزش به همراه اسكریپت ها مربوطه رو جهت تمرین بیشتر می تونید از اینجا دانلود كنید . شاد و خرم پیروز باشید ، مرتضی الوانی

دسته: طراحی وب | نویسنده: مرتضی الوانی
  1. 5 نظر برای این مطلب ارسال شده است. نظر خود را ارسال کنيد »

  1. 1

    امين


    مثل هميشه جلب و جذاب و آموزنده بود!

    March 7, 2005 at 12:48 am

  2. 2

    hamed


    salam che tori mishe tedate bazdid konandeye anruz va mah ra dar site neshun dad hame model faghat wordpress nabashe

    March 7, 2005 at 9:06 pm

  3. 3

    الوان


    جناب حامد آقا ! در پست هاي قبلي به اين موضوع پرداخته شده است كه تنها منحصر به وردپرس نيست . يه اسكريپت با PHP . براي ديدن ادامه متن به اينجا برويد :wink:

    March 8, 2005 at 8:58 am

  4. 4

    سکوت مرگ


    من چند وقت پیش این مطلب رو که لینکش رو توی لینکدونی گذاشته بودی
    4 ساعت داشتم روش کار می کردم
    ولی بازم اون چیزی که خودم می خواسم نشد
    آموزشی سراغ نداری که بدون ایمیج گوشه ها رو گرد کنه و کلا css باشه

    March 9, 2005 at 6:06 am

  5. 5

    خشایار


    سلام آیا در نسخه جدید وردپرش امکان استفاده از چند زبان وجود دارد یا خیر؟؟؟ من که به فولدر ها نگاه کردم چنین چیزی ندیدم

    March 9, 2005 at 10:04 pm