ایمان مدائنی
دوشنبه 13 خرداد 1392, 16:17 عصر
سلام دوستان
در بعضی از سایت ها دیدید که وقتی ماوس روس تصویر میره یک توضیح در رابطه با عکس نمایش داده میشه
البته زیبا و کاربر پسند
امروز براتون یک نمونه ساده از این کار درست کردم
http://madaeny.com/ImagesArticle/9dcbe139abd746dc90ca1c5546dfea0c.jpg
تکه کد زیر این کار را انجام میدهد
<mce:script type="text/javascript"><!--
$(function () {
var info = $("#info");
if (info.length == 0) {
info = $("<span />").addClass("info");
$("body").append(info);
}
info.hide();
$(".hover_text").bind("mouseenter", function () {
var p = GetScreenCordinates(this);
info.html(this.alt);
info.show();
info.css("width", $(this).width());
info.css({ "left": p.x, "top": p.y + this.offsetHeight - info[0].offsetHeight });
});
$(".hover_text").bind("mouseleave", function () {
info.hide();
});
});
function GetScreenCordinates(obj) {
var p = {};
p.x = obj.offsetLeft;
p.y = obj.offsetTop;
while (obj.offsetParent) {
p.x = p.x + obj.offsetParent.offsetLeft;
p.y = p.y + obj.offsetParent.offsetTop;
if (obj == document.getElementsByTagName("body")[0]) {
break;
}
else {
obj = obj.offsetParent;
}
}
return p;
}
-></mce:script>
البته درسته این مورد مربوط به این بخش نیست ولی خب نمونه رو با asp ایجاد کردم و به همین دلیل در این بخش مطرح شد
امیدوارم خوشتون بیاد
نمونه ضمیمه شد
موفق و پیروز باشید
منبع : Madaeny.com (http://www.madaeny.com/)
در بعضی از سایت ها دیدید که وقتی ماوس روس تصویر میره یک توضیح در رابطه با عکس نمایش داده میشه
البته زیبا و کاربر پسند
امروز براتون یک نمونه ساده از این کار درست کردم
http://madaeny.com/ImagesArticle/9dcbe139abd746dc90ca1c5546dfea0c.jpg
تکه کد زیر این کار را انجام میدهد
<mce:script type="text/javascript"><!--
$(function () {
var info = $("#info");
if (info.length == 0) {
info = $("<span />").addClass("info");
$("body").append(info);
}
info.hide();
$(".hover_text").bind("mouseenter", function () {
var p = GetScreenCordinates(this);
info.html(this.alt);
info.show();
info.css("width", $(this).width());
info.css({ "left": p.x, "top": p.y + this.offsetHeight - info[0].offsetHeight });
});
$(".hover_text").bind("mouseleave", function () {
info.hide();
});
});
function GetScreenCordinates(obj) {
var p = {};
p.x = obj.offsetLeft;
p.y = obj.offsetTop;
while (obj.offsetParent) {
p.x = p.x + obj.offsetParent.offsetLeft;
p.y = p.y + obj.offsetParent.offsetTop;
if (obj == document.getElementsByTagName("body")[0]) {
break;
}
else {
obj = obj.offsetParent;
}
}
return p;
}
-></mce:script>
البته درسته این مورد مربوط به این بخش نیست ولی خب نمونه رو با asp ایجاد کردم و به همین دلیل در این بخش مطرح شد
امیدوارم خوشتون بیاد
نمونه ضمیمه شد
موفق و پیروز باشید
منبع : Madaeny.com (http://www.madaeny.com/)