سوال: ساخت Image tooltip مثل همونی که تو سایت templatemonster.com هست؟ [بایگانی]

mostafa_shoakry

چهارشنبه 17 مهر 1392, 08:44 صبح

سلام خدمت دوستان محترم.
من می خوام یه Image tooltip مثل همونی که تو سایت templatemonster.com هست که وقتی موس رو تمپلیت می بره یه نمونه عکس از تمپلیت در کنار موس نشون داده میشه.
من یه نمونه ساختم از اون ولی مزیت اونی که در تمپلیت مانستر هست اینه که وقتی جا برای نمایش در سمت چپ وجود نداشته باشه tooltip رو در سمت راست نمایش می ده. من یه همچین چیزی می خوام.
کسی می تونه بهم کمک کنه پلیززز :ناراحت:

jalil_gh

چهارشنبه 17 مهر 1392, 09:47 صبح

شما میتونید تو رویداد hover و mousemove مقدار screenX رو از شی event بگیرید و با حساب کردن طول window میتونید مشخص کنید که تصویر سمت چپ نشون داده بشه یا سمت راست.
البته اگه صفحه شما به سمت چپ و راست اسکرول میشه باید مقدار pageX و طول document رو هم در نظر بگیرید.

mostafa_shoakry

چهارشنبه 17 مهر 1392, 13:53 عصر

شما میتونید تو رویداد hover و mousemove مقدار screenX رو از شی event بگیرید و با حساب کردن طول window میتونید مشخص کنید که تصویر سمت چپ نشون داده بشه یا سمت راست.
البته اگه صفحه شما به سمت چپ و راست اسکرول میشه باید مقدار pageX و طول document رو هم در نظر بگیرید.
یه مثال دارین واسه این؟

jalil_gh

پنج شنبه 18 مهر 1392, 09:40 صبح

یه چیزی تو این مایه‌ها:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html, body {
margin:0; padding:0;
position: relative;
}

#div1 {
width: 800px;
height: 100px;
background-color: blue;
display: block;
}

#div2 {
width: 300px;
height: 400px;
background-color: red;
display: none;
position: absolute;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>

<script src="lib/jquery.js"></script>
<script>
// store width of the window
var winWidth = $(window).width();

// the distance between the mouse pointer and the image
var dist = 40;

$('#div1').hover(
function(e) {
var top = $(this).scrollTop();
var left = 0;
var $div2 = $('#div2');

// calculate the left according to the mouse position.
if (e.screenX > ($div2.outerWidth() + dist)){
left = e.screenX - dist - $div2.outerWidth();
} else {
left = e.screenX + dist;
}

// set css properties and then show
$div2
.css({
left: left,
top: top
})
.fadeIn();
},

function() {
$('#div2').fadeOut();
}
);

$('#div1').mousemove(function(e) {
var $div2 = $('#div2');

// calculate the left according to the mouse position
if (e.screenX > ($div2.outerWidth() + dist)){
left = e.screenX - dist - $div2.outerWidth();
} else {
left = e.screenX + dist;
}

// set the css left property
$div2.css({
left: left
})
});

</script>
</body>
</html>

Kurdia

سه شنبه 23 مهر 1392, 00:28 صبح

ممنون نیاز من هم همین بود