رفتن به مطلب

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


پست های پیشنهاد شده

سلام

من نمی دونستم عنوان مطلب رو چی بنویسم ، اگر اسم این کار رو می دونستم مزاحم شما دوستان نمیشدم

تو بعضی سایت ها دیدم که وقتی نشانه گر موس رو روی لینکی می برم اون لینک رو به صورت بک گراند و رنگی نشون میده

نمونه زیر گذاشتم:

مثلا در این عکس موس رو که روی غروب SLS AMG می برم این نوشته با بک گراند مشکی نشون میده

post-1740-0-74216900-1384709701_thumb.pn

یا تو این سایت وقتی موس رو روی ادامه مطلب می برم متن عنوان پست را با بک گراند آبی نشون میده

post-1740-0-94459900-1384709704_thumb.pn

برای نمونه به این سایت سر بزنید :


soft98.ir

اگر افزونه یا هرچیزه دیگه ای هست معرفی کنید ممنون میشم

لینک به ارسال

این کار با جاوا اسکریپت و جی کوئری هم امکان پذیره بهش میگن تولتیپ .

افزونه های تولتیپ وردپرس

http://wordpress.org/plugins/simple-tooltips/

http://wordpress.org/plugins/wordpress-tooltips/

لینک به ارسال

سلام به اين خاصيت تولتيپ tooltip !

اين افزونه هست :

http://wordpress.org/plugins/wordpress-tooltips/screenshots

به صورت دستي هم ميتونيد از پلاگين هاي جيكوئري استفده كنيد :

http://vandelaydesign.com/blog/tools/jquery-tooltip-scripts

لینک به ارسال

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


<script>

var qTipTag = "a,label,input,img,textarea";
var qTipX = 0;
var qTipY = 15;
tooltip = {
name : "qTip",
offsetX : qTipX,
offsetY : qTipY,
tip : null
}
tooltip.init = function () {
var tipNameSpaceURI = "http://www.w3.org/1999/xhtml";
if(!tipContainerID){ var tipContainerID = "qTip";}
var tipContainer = document.getElementById(tipContainerID);
if(!tipContainer) {
tipContainer = document.createElementNS ? document.createElementNS(tipNameSpaceURI, "div") : document.createElement("div");
tipContainer.setAttribute("id", tipContainerID);
document.getElementsByTagName("body").item(0).appendChild(tipContainer);
}
if (!document.getElementById) return;
this.tip = document.getElementById (this.name);
if (this.tip) document.onmousemove = function (evt) {tooltip.move (evt)};
var a, sTitle, elements;

var elementList = qTipTag.split(",");
for(var j = 0; j < elementList.length; j++)
{
elements = document.getElementsByTagName(elementList[j]);
if(elements)
{
for (var i = 0; i < elements.length; i ++)
{
a = elements[i];
sTitle = a.getAttribute("title");
if(sTitle)
{
a.setAttribute("tiptitle", sTitle);
a.removeAttribute("title");
a.removeAttribute("alt");
a.onmouseover = function() {tooltip.show(this.getAttribute('tiptitle'))};
a.onmouseout = function() {tooltip.hide()};
}
}
}
}
}
tooltip.move = function (evt) {
var x=0, y=0;
if (document.all) {//IE
x = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
y = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
x += window.event.clientX;
y += window.event.clientY;

} else {//Good Browsers
x = evt.pageX;
y = evt.pageY;
}
this.tip.style.left = (x + this.offsetX) + "px";
this.tip.style.top = (y + this.offsetY) + "px";
}
tooltip.show = function (text) {
if (!this.tip) return;
this.tip.innerHTML = text;
this.tip.style.display = "block";
}
tooltip.hide = function () {
if (!this.tip) return;
this.tip.innerHTML = "";
this.tip.style.display = "none";
}
window.onload = function () {
tooltip.init ();
}
</script>

و البته قسمت سی اس اسش هم اینه :


div#qTip {
border:1px solid #A0A0A0;
z-index: 3000;
background:#4f4f4f;
min-width:40px;
min-height:14px;
text-direction:rtl;
text-align:center;
padding:5px 5px;
filter:alpha(opacity=80);
opacity:0.9;
-moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
color:#fff;
shadow:5px 5px 0 #FFF;
font-size:12px;
font-family: byekan,tahoma;
text-shadow:0px 0px 6px #000;
display:none;
-moz-box-shadow: 0px 0px 2px #fff;
position:absolute;
margin-top:10px;
margin-bottom:10px;
margin-left:10px;
max-width: 200px;
background-color: #0b0504;
color: 000;
}

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

البته دلیل اینکه این کد رو گذاشتم هم اینه که از اکثر افزونه هایی که استفاده کردم کداش با کوئری های سایت تداخل پیدا میکرد و بهترین گزینه برام همین کد بالاست

موفق باشی

یاعلی

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...