ویدئو های پربازدید سایت

دانلود ابزار tooltip برای وبسایت و وبلاگ ها و آموزش استفاده

ابزار تول تیپ برای وبلاگها و وبسایت ها

همان tooltip ای که در همین سایت مورد استفاده قرار گرفته شده است

که با این شکل است کافی است موس خود را بر روی این متن قرار دهید



نحوه استفاده از این Tooltip ساده است

فقط کافی است بر روی هر تگی که میخواهید تول تیپ به نمایش در آید یک خاصیت _title اضافه و متن خود را درون ان اضافه کنید

گفتنی است این خاصیت مقادیر html نیز میپذیرد

برای مثال میخواهیم بر روی تگ span این ابزار نمایش داده شود :



<span _title="this is hypersource tooltip"> My Text</span>



برای فعال شدن این ابزار برای وبلاگ و یا وبسات شما کافی است کد زیر را در بخش هدر سایت یعنی بین تگ ها <head> قرار دهید  داخل تگ <script>

$(document).ready(function(){

// HyperSOurce Tooltip Start

$('[_title]').mousemove(function (e) {

        var text = $(this).attr('_title');

        $('.NormalTool').show().html(text).css({ top: e.clientY + 10, left: e.clientX + 15 });

    }).mouseout(function () {

        $('.NormalTool').hide();

        $(this).fadeTo(100, 0.7);

    });

});

همچنین باید Jquery را هم در سایت خود داشته باشید

در صورتی که ندارید کد زیر را در بالای این کد قرار دهید
<script src="http://wwwHypersource.ir/js/jquery-2.0.3.min.js"></script>



در پایان درون تگ Head تگ<style> را ایجاد کرده و استایل زیر را داخل ان کپی کنید :



><style>/*HyperSource ToolTip Style*/

.NormalTool { background-position: left center;width: auto;max-width: 320px; height: auto; max-height: 220px; padding: 14px; background-color: rgba(0,0,0,0.7); display: none; position: fixed; z-index: 999999; color: white; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; background-image: url('../Image/Help.png'); background-repeat: no-repeat; padding-left:29px; text-align:right; direction:rtl; }

</style>




برای مشاهده فایل نمونه اینجا کلیک کنید
در صورتی که سوالی راجع به این آموزش دارید در بخش نظرات همین پست مطرح و از ارسال ان از بخش ارتباط با ما خود داری نمائید


;

ddd پاسخ

11s 1936

بهنام پاسخ

سلام
فایل نمونه باز نمیشه.
pet prescription discount card blog.suntekusa.com cialis discount coupons
cleocin cream mattnichols.co.uk cleocin ovuli
celebrex eureka read celebrex prix maroc
1393/6/15 11:25

admin پاسخ

یادم رفت اینو بگم
کاش بحث ای جکس رو تو کتاب استفاده میکردید
جاش خالیه (اون موقع کاملتر بود) 1393/6/16 12:47

ویدئو هایی که شاید بپسندید!

هم اکنون نـــظر بدهید

HyperSourCe.ir

info@hypersource.ir

کلیه حقوق برای وب سایت هایپر سورس محفوظ است
CopyRight ©2014-2024
ارتباط با ما
نام شما
ایمیل
موبایل
رمز عبور را فراموش کرده ام

چگونه میتوانم این محصول را با تخفیف دریافت نمایم ؟

لطفا منتظر بمانید. . .

پیام سیستم