تایتلز

افزونه های بسیاری هست که به کمک جی کوئر کار می کنند یکی از این افزونه ها tool tip هست. طراحان وب با tool tip اشنا هستم و افزونه های بسیاردر این رابطه  وجود یکی از این افزونه این هست , آموزش رو هم اکنون دارید می خونید هست

tool tip یک پنجره شناور هست که معمولا با حالت hover به نمایش در میاد . و مناسب جهت جلوگیری از بهم ریخته گی صفحه هست و یا می توان جهت نماش توضیحات بیشتر از ان استفاده کرد

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

خب اول از همه بگردین و کتاب خونه جی کوئری رو پیدا کنید (دانلود)

سپس کد زیر رو در تگ script قرار دهید و زبان جاوااسکریپت رو قرار دهید

$(document).ready(function(){

$(".rss-popup a").hover(function() {
$(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
});

خب هر جا که خواستید از این پلاگین استفاده کنید مثلا :

<div>
<a href="feed-link" id="rss-icon">RSS Feed</a>
<em>Subscribe to our RSS Feed<em>
</div>

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

.rss-popup {
margin: 100px auto;
padding: 0;
width: 100px;
position: relative;
}

div.rss-popup em {
background: url(bubble.png) no-repeat;
width: 100px;
height: 49px;
position: absolute;
top: -70px;
left: -0px;
text-align: center;
text-indent: -9999px;
z-index: 2;
display: none;
}

#rss-icon {
width: 42px;
height: 42px;
background: url(icon.png) no-repeat 0 0;
text-indent: -9999px;
margin: 0 auto;
display: block;
}

توجه : در فایل استایل ادرس عکس ها رو تغییر بدهید

پیش نمایش |دانلود کامل |jQuery

پ.ن : به دلیل مشکلی که برام پیش اومده بعدا فایل های “دانلود کامل” و لینک “پیش نمایش” رو قرار می دم

پسورد : www.titles.ir