قرار دادن تولتیپ با رنگ های مختلف

دسته بندی: جاوا اسکریپت
زمان مطالعه: 2 دقیقه
۰۵ تیر ۱۳۹۱

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

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

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

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

<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>

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

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

نظرات کاربران

leila

یه سوال دیگه اینکه چطور میتونیم از این تم هایی که توی فایل css فایل دانلودی هست استفاده بکنیم؟ یعنی باید جایی که از تایتل استفاده میکنیم یه کلاس بهش بدیم و از اون کلاسهای css استفاده بکنیم؟

leila

سلام خسته نباشید من از این کد استفاده کردم عین کد خودتون و گذاشتم فقط همونطور که گفتید آدرس 2 3 4 و مطابق آدرس خودم گذاشتم ولی کار نمیکنه مثل شکل 1 نشون میده میشه راهنماییم کنید که مشکل از کجاست؟ممنون میشم

moshi98

آموزش ساخت اینجور چیز ها را با استفاده از سی اس اس بذارید.عالیه 😛 😳

نت نیک

لینک دانلود ارور 404 میده !

لقمان آوند

ممنون از گزارش مشکل . تصحیح شد …

MoHaMmAd10

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

[email protected]

من 14 ساله از مشهد هستم هر چقدر مطالبتان را می خوانم متوجه میشم برای راهنمایی جواب را به ایمیلم ارسال کنید

لقمان آوند

توی خبرنامه سایت عضو شو . مطالب برات میل میشه .

مای چاپ

ممنون مفید بود

بهناز

سلام
ممنون از توضیح جامعتون
ولی میخوام توی تول تیپ عکس بیارم
چطور باید این کارو کرد؟

لقمان آوند

سلام
احتمالا باید از کدهای دیگر مخصوص ساخت تولتیپ استفاده کنید . مثلا این . اینم یه لیست از کدهایی برای این منظور .

محمد

سلام آقای معراجیان .
بله مراحل درست کردن یا آموزش آن فرستاده شود

محمدسینا معراجیان

چشم

محمد

سلام آقای معراجیان .
نه منظورم این نبود.
منظورم این بود که مثلا یه فرمی را بشود طراحی کرد که بتوان شماره ، نام و نام خانوادگی و چند سوال برایش طراحی کرد

محمدسینا معراجیان

بعد این اطلاعات به ایمیلتون فرستاده شه؟

ندا

سلام اگه بخوایم خودتون برام وبسایت بسازین امکانش هست

محمد

سلام،
میشود شما ابزار ایجاد عضو گیری در وبلاگ را بگذارید؟
به خصوص بلاگفا.
زیرا بیشتر وبلاگ ها در آرزوی این هستند که مچین قابلیتی در وبلاگشان داشته باشند.باتشکر

محمدسینا معراجیان

دوست عزیز برای سیستم های مثل بلاگفا نمیشه جوری عضویت طراحی کرد که اعضابه وبلاگ وصل باشند فقط میشه خبنامه گذاشت که تو اون عضو شن و شما بتونید بهشون ایمیل بدید همینو می خواید؟

ali abc

بخاطر آموزش ها باز هم ممنون
جالب بود
می دونم خیلی از دوستان اینها رو نمی دونستند!

mohsenmir

با سلام و درود
به جای خط اول ، خط زیر رو جایگزین کردم مشکلش حل شد

 &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js&quot;&gt;&lt;/script&gt;

موفق باشین 😳

pooya

اینبار کار کرد خیلی ممنون 🙂

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :