iMajid7

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

7 پست در این موضوع قرار دارد

سلام

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

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

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

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

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

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

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

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


soft98.ir

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

0

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


لینک به پست

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

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

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

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

4

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


لینک به پست

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

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

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

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

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

3

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


لینک به پست

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

:( :(

0

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


لینک به پست

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

4

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


لینک به پست

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

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

0

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


لینک به پست

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


<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;
}

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

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

موفق باشی

یاعلی

3

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


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری