I need help in making my image tooltip work.

Question

0.00/5 (No votes)

See more:

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]:

C#

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:

XML

<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):

JavaScript

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.

Posted 26-May-13 21:45pm

Chris N.P.

Updated 26-May-13 22:53pm

Kenneth Haugland

v4

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Zafar Sultan · Accepted Answer · 2013-05-26T22:30:00

Solution 1

The problem is that your code is passing "object" as argument whereas it should be passing string. When I replaced

HTML

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

with

HTML

$ ("body"). append("<p id="lFilename"><img src="http://thecodeplayer.com/uploads/media/iphone.jpg" alt="url preview" />" + c + "</p>");

it worked fine. I hope it helps you.

Posted 26-May-13 22:30pm

Zafar Sultan

Comments

Chris N.P. 27-May-13 4:38am

Thank you for your response. It's really working specially if the file is located on the web folder. However what I want to do is to show a preview of a file located on a local drive. In this case the server's D: drive.

Zafar Sultan 27-May-13 4:51am

Means your image folder is outside your project folder. In that case you will have to create a virtual directory that will point to the physical directory(D:/Images or whatever). This way you can access it from your project.

Chris N.P. 27-May-13 4:53am

That's interesting. Can you show me how to create this virtual directory?

Zafar Sultan 27-May-13 4:56am

http://www.advancedinstaller.com/user-guide/tutorial-iis.html

Chris N.P. 27-May-13 4:57am

Thank you. Let me check this.

Chris N.P. · Accepted Answer · 2013-05-27T15:33:00

Solution 2

I manage to resolve this. Thank you Zafar Sultan for your advice without it, I will not be able to make this work!

Cheers!

Posted 27-May-13 15:33pm

Chris N.P.