رفتن به مطلب
iMajid7

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

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

سلام

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

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

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

مثلا در این عکس موس رو که روی غروب 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

به اشتراک گذاری این ارسال


لینک به ارسال

من اصلا نتوستم با این افزونه ها کار کنم

:( :(

به اشتراک گذاری این ارسال


لینک به ارسال

سلام، فقط کافیه این افزونه رو نصب کنید auto-tooltip .

به اشتراک گذاری این ارسال


لینک به ارسال

اين افزونه خيلي قديميه

با وردپرس ٣.٧.١ مشكلي ندارد ؟ كار ميكنه ؟

به اشتراک گذاری این ارسال


لینک به ارسال

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


<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 قرار دهید.


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