我需要帮助才能使我的图像工具提示工作。 [英] I need help in making my image tooltip work.

问题描述

我正在创建一个图像工具提示但由于某种原因我不能按预期工作。



首先这里是jquery文件[mainx.js]：

  this .screenshotPreview = function（）{
 xOffset =  5 ; 
 yOffset =  25 ; 
 
 $（ 。lFilename）。hover（function（e） {
 此 .t = 此 .title; 
  this  .title =  ; 
  var  c =（ this  .t！=  ）？ < br /> + 此 .t： ; 
 $（  body）。append （ < p id ='lFilename'>< img src =' +  this  .CommandArgument +  'alt ='url preview'/> + c +  < / p>）;  
 $（  #lFilename）
 .css（  top ，（e.pageY  -  xOffset）+   px）
。 css（  left，（e.pageX + yOffset）+   px）
 .fadeIn（ 快）; 
}，
 function（）{
  this  .title =  this  .T; 
 $（  #lFilename）。除去（）; 
}）; 
 $（ 。lFilename）。mousemove（function（e）{
 $（  #lFilename）
 .css（  top，（e.pageY  -  xOffset）+   px）
 .css（  left,,e.pageX + yOffset）+   px）; 
} ）; 
}; 
 
 $（document）.ready（function（）{
 screenshotPreview（）; 
}）; 

这里位于gridview内的ASP LinkBut​​ton：

 <   ItemTemplate  >  
 <   asp：LinkBut​​ton     runat   =  server    CssClass   =  lFilename    ID   =  grdlinkFilename   文字  =' < span class =code-keyword> <％ #Eval（  FILENAME）％> '    CommandArgument   ='  < ％ #Eval（  FILEPATH） ％> '      OnCommand   =  grdlinkFilename_click >  <   / asp：LinkBut​​ton  >  
 <   /它emTemplate  >  

当我将鼠标指向任何文件时，会弹出但我所看到的只是url预览，但没有图片。



顺便说一下，这是我正在创建的Web应用程序的一部分，这段代码是其中的一部分页面的递归扫描所有文件夹及其所有子文件夹和服务器的D盘中的文件。因此所有图像文件都位于服务器的D：驱动器中。



请帮我这个。



更新：



我也尝试了这个（添加变量locat并将其用作参数）：

  var  locat =   d：\\ \\ pixample \ android.jpg; 
 此 .screenshotPreview =  function （）{
 xOffset =  5 ; 
 yOffset =  25 ; 
 
 $（ 。lFilename）。hover（ function （e）{
  this  .t =  this  .title; 
  this  .title =  ; 
  var  c =（ this  .t！= < span class =code-string> ）？ < br /> + 此 .t： ; 
 $（  body ）。append（ < p id ='lFilename'>< img src ='  + locat +  'alt ='url preview'/> + c +  < / p>）; 
 $（  #lFilename）
 .css（  top，（e.pageY  -  xOffset）+   px）
 .css（  left，（e.pageX + yOffset）+   px）
 .fadeIn（  fast）; 
}，
  function （）{
  this  .title = 此 .t; 
 $（  #lFilename）。remove（）; 
}）; 
 $（ 。lFilename）。mousemove（ function （e）{
 $（  #lFilename） 
 .css（  top，（e.pageY  -  xOffset）+   px）
 .css（  left，（e.pageX + yOffset）+   px）; 
}）; 
}; 

但仍然没有运气。

解决方案

（ 。lFilename）。hover（function（e）{
this .t = 此 .title;
此 .title = ;
var c =（ this .t！= ） ？ < br /> + this .t： ;

（< span class =code-string> body）。append （ < p id ='lFilename'>< img src =' + this .CommandArgument + 'alt ='url preview'/> + c + < / p> ）;

（ #lFilename ）
.css（ top，（e.pageY - xOffset）+ px）
.css（ left，（e.pageX + yOffset）+ px）
.fadeIn（ fast）;
}，
function（）{
this .title = this .T;

Hi,

I''m creating an image tooltip but for some reason I can''t make it work as expected.

First here is the jquery file[mainx.js]:

this.screenshotPreview = function(){
        xOffset = 5;
        yOffset = 25;

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

$(document).ready(function(){
    screenshotPreview();
});

Here''s the ASP LinkButton located inside a gridview:

<ItemTemplate>
<asp:LinkButton runat="server" CssClass="lFilename" ID="grdlinkFilename" Text='<%#Eval("FILENAME")%>' CommandArgument='<%#Eval("FILEPATH")%>'  OnCommand="grdlinkFilename_click"> </asp:LinkButton>
</ItemTemplate>

When I point my mouse over any file there''s a pop up but all I see is "url preview" but no picture.

By the way this is part of the web application that I''m creating and this code is part of the page that recursively scan all the folders with all its sub-folders and files in the server''s D drive. So all the image files are located in the server''s D: drive.

Please help me with this.

Update:

I also tried this (Added variable locat and use it as an argument):

var locat = "d:\sample pix\android.jpg";
this.screenshotPreview = function(){			
		xOffset = 5;
		yOffset = 25;
		
	$(".lFilename").hover(function(e){
		this.t = this.title;
		this.title = "";	
		var c = (this.t != "") ? "<br/>" + this.t : "";
		$("body").append("<p id='lFilename'><img src='"+ locat +"' alt='url preview' />"+ c +"</p>");								 
		$("#lFilename")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");						
    },
	function(){
		this.title = this.t;	
		$("#lFilename").remove();
    });	
	$(".lFilename").mousemove(function(e){
		$("#lFilename")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});			
};

but still no luck.

解决方案

(".lFilename").hover(function(e){ this.t = this.title; this.title = ""; var c = (this.t != "") ? "<br/>" + this.t : "";

("body").append("<p id='lFilename'><img src='"+ this.CommandArgument +"' alt='url preview' />"+ c +"</p>");

("#lFilename") .css("top",(e.pageY - xOffset) + "px") .css("left",(e.pageX + yOffset) + "px") .fadeIn("fast"); }, function(){ this.title = this.t;

这篇关于我需要帮助才能使我的图像工具提示工作。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！