ظاهر شدن تصوير شاخص پست، پس از نگه داشتن موس روي لينك پست!

Hesab Yar Co · مرداد 92

سلام دوستان، بنده به افزونه و يا كدي احتياج دارم كه وقتي مثلا بازديد كننده اي روي لينك يك پست موس را نگه مي دارد، تصوير شاخص آن پست به صورت كوچك كنار موس نمايان شود!!!

ممنون

mohsen670 · مرداد 92

درود. این کار با jquery به راحتی قابل انجام هست. شما jquery 1.2.3 رو توی هدر فراخوانی کنید و این کد رو داخل فایلی مثل main.js بریزید و توی هدر فراخوانی کنید:


this.screenshotPreview = function(){
/* CONFIG */

  xOffset = 10;
  yOffset = 30;

  // these 2 variable determine popup's distance from the cursor
  // you might want to adjust to get the right result

/* END CONFIG */
$("a.screenshot").hover(function(e){
  this.t = this.title;
  this.title = "";
  var c = (this.t != "") ? "<br/>" + this.t : "";
  $("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>");		
  $("#screenshot")
   .css("top",(e.pageY - xOffset) + "px")
   .css("left",(e.pageX + yOffset) + "px")
   .fadeIn("fast");	 
    },
function(){
  this.title = this.t;
  $("#screenshot").remove();
    });
$("a.screenshot").mousemove(function(e){
  $("#screenshot")
   .css("top",(e.pageY - xOffset) + "px")
   .css("left",(e.pageX + yOffset) + "px");
});  
};

// starting the script on page load
$(document).ready(function(){
screenshotPreview();
});

حالا یک صفحه html مثل:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>URL Screenshot Preview with jQuery</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
</meta>

<style>
body {
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
h1{
font-size:180%;
font-weight:normal;
color:#555;
}
h2{
clear:both;
font-size:160%;
font-weight:normal;
color:#555;
margin:0;
padding:.5em 0;
}
a{
text-decoration:none;
color:#f30;
}
p{
clear:both;
margin:0;
padding:.5em 0;
}
pre{
display:block;
font:100% "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}
img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
}
/*  */
#screenshot{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
/*  */
</style>
</head>
<body>
<h1>URL Screenshot Preview with jQuery</h1>

<p>this <a href="http://www.prosite.ir" class="screenshot" rel="thumbnail.jpg">Prosite</a> link.</p>
<p>this <a href="http://www.prosite.ir" class="screenshot" rel="thumbnail.jpg" title="Prosite">Prosite</a> link with caption.</p>

</body>
</html>

آدرس thumbnail.jpg آدرس تصویر مربوط به لینکتون هست.

اگر فایل jquery رو نتونستید پیدا کنید یا کار نکرد بفرمایید تا ارسال کنم.

موفق باشید.

ورود

ظاهر شدن تصوير شاخص پست، پس از نگه داشتن موس روي لينك پست!

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

Hesab Yar Co 3

لینک به ارسال

mohsen670 123

لینک به ارسال

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

فهرست بخش ها

فعالیت ها