• مشکی
  • سفید
  • سبز
  • آبی
  • قرمز
  • نارنجی
  • بنفش
  • طلایی
وبلاگ نویسان (بازدید: 367)
يکشنبه 8/5/1391 - 20:4 -0 تشکر 484510
قرار دادن تولتیپ با رنگ های مختلف

:: خوب شاید قبل از همه چی بهتر باشه واسه اونایی که نمی دونن تولتیپ چیه یه توضیح کوتاهی بدم. تولتیپ (tooltip) یه ابزاری هست برای زیباسازی وبسایت یا وبلاگ های شما . حالا دقیقا چیکار می کنه این تولتیپ؟ یکی از گزینه های تنظیمات هر لینک یا تگ در صفحات وب بخش توضیحات یا title اون تگ هست یعنی اگر تو صفحتون یه کدی مثل کد زیر داشته باشید

 <a href="http://7learn.com" title="معراجیان">Sina</a>

وقتی روی لینکتون نشانگر ماوس رو نگه دارید یه چیزی مثل شکل ۱ به شما نمایش داده می شه . حالا بعد از آموزش زیر می تونید توضیحات لینک خودتون رو به حالت ۲ که در عکس زیر نشون داده شده در بیارید .
tooltip
:: توی اینترنت تولتیپ های زیادی وجود داره که تقریبا توی همه ی اونا یه کدی رو به استایل خودتون اضافه می کنید و برای هر لینکی یه کلاس تعریف می کنید(اگر متوجه نمیشید نگران نباشید در ادامه متوجه میشید) اما در این آموزش تنها چندتا فایل به قالبتون اضافه می کنید اونا رو فراخونی می کنید و علاوه بر اینکه نیازی به تعریف کلاس در هر لینک نیس امکان تعیین رنگ آن در هر لینک نیز وجود دارد چیزی که در تولتیپ های دیگر نمی بینیم!!!
حالا چطوری این تولتیپ رو اضافه کنیم؟
ابتدا فایل زیر را دانلود کنید و در صفحه اصلی سایت خود یا اصطلاحا روت خود آپلود کنید بعد از خارج کردن فایل از حالت فشرده باید یک فولدر به اسم colortip-1.0 داشته باشید که توش دوتا فایل هست و یه فایل به اسم script.js .

خوب حالا فقط یه مرحله از کار باقی مونده!!!
بالای قالب یا صفحه وب خود درون تگ head این چند خط رو اضافه کنید تا فایل های مربوط به تولتیپ رو لود کنید . فقط دقت کنید که در خط ۲ ، ۳ و ۴ باید آدرس دقیق جایی که فایل ها رو آپلود کردید بزارید .

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="colortip-1.0/colortip-1.0-jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="colortip-1.0/colortip-1.0-jquery.css"/>

خوب حالا اگر هر تگی با ویژگی title مثل پاراگراف زیر داشته باشید توضیحات لینکوتون به حالت رنگی و جالبتر درمیاد !

 <p title="Web Design & Javascript Tutorials">7Learn.com</p>

تولتیپ
به همین سادگی!

www.7learn.com/tutorials/tooltip-with-custom-colors

برو به انجمن
انجمن فعال در هفته گذشته
مدیر فعال در هفته گذشته
آخرین مطالب
  • آلبوم تصاویر بازدید از کلیسای جلفای...
    آلبوم تصاویر بازدید اعضای انجمن نصف جهان از کلیسای جلفای اصفهان.
  • بازدید از زیباترین کلیسای جلفای اصفهان
    جمعی از کاربران انجمن نصف جهان، در روز 27 مردادماه با همکاری دفتر تبیان اصفهان، بازدیدی را از کلیسای وانک، به عمل آورده‌اند. این کلیسا، یکی از کلیساهای تاریخی اصفهان به شمار می‌رود.
  • اعضای انجمن در خانه شهید بهشتی
    خانه پدری آیت الله دکتر بهشتی در اصفهان، امروزه به نام موزه و خانه فرهنگ شهید نام‌گذاری شده است. اعضای انجمن نصف جهان، در بازدید دیگر خود، قدم به خانه شهید بهشتی گذاشته‌اند.
  • اطلاعیه برندگان جشنواره انجمن‌ها
    پس از دو ماه رقابت فشرده بین کاربران فعال انجمن‌ها، جشنواره تابستان 92 با برگزاری 5 مسابقه متنوع در تاریخ 15 مهرماه به پایان رسید و هم‌اینک، زمان اعلام برندگان نهایی این مسابقات فرارسیده است.
  • نصف جهانی‌ها در مقبره علامه مجلسی
    اعضای انجمن نصف جهان، در یك گردهمایی دیگر، از آرامگاه علامه مجلسی و میدان احیا شده‌ی امام علی (ع) اصفهان، بازدیدی را به عمل آوردند.
  • وبگردی