:: خوب شاید قبل از همه چی بهتر باشه واسه اونایی که نمیدونن تولتیپ چیه یه توضیح کوتاهی بدم. تولتیپ (tooltip) یه ابزاری هست برای زیباسازی وبسایت یا وبلاگهای شما . حالا دقیقا چیکار میکنه این تولتیپ؟ یکی از گزینههای تنظیمات هر لینک یا تگ در صفحات وب بخش توضیحات یا title اون تگ هست یعنی اگر تو صفحتون یه کدی مثل کد زیر داشته باشید
<a href="https://7learn.com" title="معراجيان">Sina</a>
وقتی روی لینکتون نشانگر ماوس رو نگه دارید یه چیزی مثل شکل 1 به شما نمایش داده میشه . حالا بعد از آموزش زیر میتونید توضیحات لینک خودتون رو به حالت 2 که در عکس زیر نشون داده شده در بیارید .
:: توی اینترنت تولتیپهای زیادی وجود داره که تقریبا توی همه ی اونا یه کدی رو به استایل خودتون اضافه میکنید و برای هر لینکی یه کلاس تعریف میکنید(اگر متوجه نمیشید نگران نباشید در ادامه متوجه میشید) اما در این آموزش تنها چندتا فایل به قالبتون اضافه میکنید اونا رو فراخونی میکنید و علاوه بر اینکه نیازی به تعریف کلاس در هر لینک نیس امکان تعیین رنگ آن در هر لینک نیز وجود دارد چیزی که در تولتیپهای دیگر نمیبینیم!!!
حالا چطوری این تولتیپ رو اضافه کنیم؟
ابتدا فایل زیر را دانلود کنید و در صفحه اصلی سایت خود یا اصطلاحا روت خود آپلود کنید بعد از خارج کردن فایل از حالت فشرده باید یک فولدر به اسم 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>
یه سوال دیگه اینکه چطور میتونیم از این تم هایی که توی فایل css فایل دانلودی هست استفاده بکنیم؟ یعنی باید جایی که از تایتل استفاده میکنیم یه کلاس بهش بدیم و از اون کلاسهای css استفاده بکنیم؟
سلام خسته نباشید من از این کد استفاده کردم عین کد خودتون و گذاشتم فقط همونطور که گفتید آدرس 2 3 4 و مطابق آدرس خودم گذاشتم ولی کار نمیکنه مثل شکل 1 نشون میده میشه راهنماییم کنید که مشکل از کجاست؟ممنون میشم
آموزش ساخت اینجور چیز ها را با استفاده از سی اس اس بذارید.عالیه 😛 😳
لینک دانلود ارور 404 میده !
ممنون از گزارش مشکل . تصحیح شد …
عزیز می شود تمامی آموزش های موجود در سایت مانند html و جاوا اسکریپ و فتوشاپ را به ایمیلم ارسال کنی؟
[email protected]
من 14 ساله از مشهد هستم هر چقدر مطالبتان را می خوانم متوجه میشم برای راهنمایی جواب را به ایمیلم ارسال کنید
توی خبرنامه سایت عضو شو . مطالب برات میل میشه .
ممنون مفید بود
سلام
ممنون از توضیح جامعتون
ولی میخوام توی تول تیپ عکس بیارم
چطور باید این کارو کرد؟
سلام
احتمالا باید از کدهای دیگر مخصوص ساخت تولتیپ استفاده کنید . مثلا این . اینم یه لیست از کدهایی برای این منظور .
سلام آقای معراجیان .
بله مراحل درست کردن یا آموزش آن فرستاده شود
چشم
سلام آقای معراجیان .
نه منظورم این نبود.
منظورم این بود که مثلا یه فرمی را بشود طراحی کرد که بتوان شماره ، نام و نام خانوادگی و چند سوال برایش طراحی کرد
بعد این اطلاعات به ایمیلتون فرستاده شه؟
سلام اگه بخوایم خودتون برام وبسایت بسازین امکانش هست
سلام،
میشود شما ابزار ایجاد عضو گیری در وبلاگ را بگذارید؟
به خصوص بلاگفا.
زیرا بیشتر وبلاگ ها در آرزوی این هستند که مچین قابلیتی در وبلاگشان داشته باشند.باتشکر
دوست عزیز برای سیستم های مثل بلاگفا نمیشه جوری عضویت طراحی کرد که اعضابه وبلاگ وصل باشند فقط میشه خبنامه گذاشت که تو اون عضو شن و شما بتونید بهشون ایمیل بدید همینو می خواید؟
بخاطر آموزش ها باز هم ممنون
جالب بود
می دونم خیلی از دوستان اینها رو نمی دونستند!
با سلام و درود
به جای خط اول ، خط زیر رو جایگزین کردم مشکلش حل شد
موفق باشین 😳
اینبار کار کرد خیلی ممنون 🙂