I love jQuery and the way it makes developer's life easier. Although it took me a while to accept it and I still prefer to write my own stuff, I can't deny its advantages. Recently I had a project that demanded a rollover image preview. You know, one of those tooltip-like bubble popups that appears when you roll over link or a thumbnail. Since we were already using jQuery on that project I decided to take it easy and investigate what can be done with that extraordinary library. So I came up with a script so simple it hurts! The best thing yet is that it can be applied for a variety of purposes. Today I will show you 3 examples of using the same very, very simple script.
Download all 3 tricks in a bundle
Features and Principle
What this script does is adds an element to the body when you roll over a certain object. That element's appearance is predefined with css (positioned absolute and styled) so all we need to do is fill the element with content, calculate mouse position and make it move accordingly. When cursor is moved over he object, element moves with it and when cursor roll out, the element is deleted.
Here are couple of examples where you can see this script in action.
Example 1: The Simplest jQuery Tooltip Ever
The script takes a title attribute of an A tag and place it inside the popup element.
Html looks like this:
<a href="http://cssglobe.com" class="tooltip" title="Web Standards Magazine">Roll over for tooltip</a>
Example 2: Image Preview Gallery
Here we have a bunch of thumbnails. When each thumbnail is rolled over, script will load an image that we have linked in HREF attribute of an A tag. That makes this method accessible as well, because user can still access the target image even with disabled JavaScript.
Html:
<a href="1.jpg" class="preview"><img src="1s.jpg" alt="gallery thumbnail" /></a>
or if you want to use caption add a title attribute:
<a href="image.jpg" class="preview" title="Great looking landscape">Roll over to preview</a>
Example 3: Links With URL Preview
This demands a bit more effort but it might be worth it as an extra feature to add to your sites. What you'll need here is a small size screenshot of the target url. You'll put screenshot image location in in REL attribute of the A tag and script will do the rest.
Like so:
<a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg">Css Globe</a>
again, if you wish to use caption add a title attribute:
<a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg" title="Web Standards Magazine"> Css Globe</a>
Designer, developer and a passionate standardista. Long time web professional with huge experience in all types of front-end work. Founder of Css Globe and creator of
David Appleyard on 8 May, 2008 wrote:
Steph on 8 May, 2008 wrote:
Boris on 8 May, 2008 wrote:
YellowLlama on 9 May, 2008 wrote:
Janko on 9 May, 2008 wrote:
Ivan on 9 May, 2008 wrote:
Dragon on 10 May, 2008 wrote:
Josh Darville on 10 May, 2008 wrote:
www.TheMediaZoo.com
my name is Josh
JoshD@themediazoo.com
Subash on 11 May, 2008 wrote:
Thanks Alen.
webpixelkonsum on 11 May, 2008 wrote:
Thank you for your nice work.
Ralph
AndreiZ on 11 May, 2008 wrote:
Senko on 12 May, 2008 wrote:
http://blog.senko.net/static/jquery.csstooltip.js
Osvaldo on 13 May, 2008 wrote:
Juan on 14 May, 2008 wrote:
Sorry as I'm a newbie with Javascript: How could I make the big image displaying on top or to the left instead of to the right of the small image?
paul on 16 May, 2008 wrote:
snetcher on 17 May, 2008 wrote:
ana gomez on 20 May, 2008 wrote:
payastr on 22 May, 2008 wrote:
Andrew Cornett on 22 May, 2008 wrote:
Vlad on 26 May, 2008 wrote:
There is one problem with this script - for some reason if the script is outside of an UpdatePanel (Ajax.net) it sometimes "gets confused" and removes the title value but never returns it or shows title value of one link on other one (because this.t is never gets erased for some reason)
did anyone encounter these issues?
does anyone have a fix?
Thanks again
evodesign on 28 May, 2008 wrote:
Thanks
limitless86 on 29 May, 2008 wrote:
Masey on 29 May, 2008 wrote:
Any help here would be greatly appreciated.
intelligenc on 1 Jun, 2008 wrote:
Charles on 3 Jun, 2008 wrote:
Is there a way to simply show the content of a hidden div in this tooltip ?
Thank you
Charles
Cameron on 9 Jun, 2008 wrote:
Dalain on 10 Jun, 2008 wrote:
I used the id tag as my href to allow a preview and also the ability to link to another page.
Useful if you have a thumbnail of an image, and you want to link to an actual page.
Still working on an image map solution.
Jonathan Concepcion on 14 Jun, 2008 wrote:
Sun on 14 Jun, 2008 wrote:
Nice code!I like it very much.
Sorry for my poor English .
Alex on 19 Jun, 2008 wrote:
Thank you, Thank you, Thank you!!
Dave on 20 Jun, 2008 wrote:
Muneef Hameed on 20 Jun, 2008 wrote:
i like it!
Olivia Bell on 21 Jun, 2008 wrote:
Ravi on 21 Jun, 2008 wrote:
Ravi.
Abayomi Oyewumi on 23 Jun, 2008 wrote:
u just added to a life
greeeeeeeeeee
Albano on 24 Jun, 2008 wrote:
Fred Riley on 27 Jun, 2008 wrote:
<a href="index.php" title="This is the home page">Home</a>
Both IE7 and Firefox 2 render this as a tooltip on mouseover. Ok, it's not strictly what the title attribute should be used for, but it's fairly common practice these days. Think of it as 'off-label' tagging ;-)
Fred
Umer Tahir on 4 Jul, 2008 wrote:
http://jim-murray.ca/shows.html
Just hover over some of the underlined shows.
Enrique Espinosa on 8 Jul, 2008 wrote:
LJ on 8 Jul, 2008 wrote:
cyberbuff on 10 Jul, 2008 wrote:
James Breen on 10 Jul, 2008 wrote:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fcssglobe.com%2Flab%2Ftooltip%2F01%2F
Thanks
Jim
Mark Abucayon on 13 Jul, 2008 wrote:
gnysek on 13 Jul, 2008 wrote:
I don't belive that it's so easy!
Alex on 15 Jul, 2008 wrote:
$("#preview")
.fadeIn("fast",function(){
$("#preview")
.css("left",(e.pageX + xOffset) + "px")
.css("top",(e.pageY - $("#preview").height()) + "px");
yOffset = $("#preview").height();
});
Maybe there Is a better way?
People Search Dude on 17 Jul, 2008 wrote:
Clean implementation too!
Toxane on 20 Jul, 2008 wrote:
Em on 21 Jul, 2008 wrote:
Unfortunately, there are no instructions, so I'm not quite sure how to connect the js files in the download with the textarea cut and paste code.
steve on 23 Jul, 2008 wrote:
steve on 23 Jul, 2008 wrote:
Ranjit on 24 Jul, 2008 wrote:
mark on 27 Jul, 2008 wrote:
Has anyone figured this out? I don't want to have to resize my rollover images but so far I can't think of any other way to keep the images inside the window.
HELP!!!
Firebubble Design on 27 Jul, 2008 wrote:
Sander Houttekier on 28 Jul, 2008 wrote:
because your images are perfectly the same width you dont have a problem, but as soon as there are images with other proportions it gives troubles... i did already make sure that no image went over the given width... but smaller images now have lots of whitespace around them...
is it possible to make the width of the preview div, automaticaly use the width of the image itself?
josef on 30 Jul, 2008 wrote:
can anyone help me how to fix it? i'd like the image to open upwards - thanks!
Website Designer Perth on 31 Jul, 2008 wrote:
raminhos on 6 Aug, 2008 wrote:
Many tks for this must :)
Keep the good work
moshe on 6 Aug, 2008 wrote:
great script
has anyone managed to solve the issue that mark mentioned above - that the tooltip sometimes appears off screen>?
thanks!
josh on 8 Aug, 2008 wrote:
Fiyat on 8 Aug, 2008 wrote:
sjl on 11 Aug, 2008 wrote:
Thanks for the post.
rob on 12 Aug, 2008 wrote:
All the best and thanks for sharing your knowledge.
disenando on 12 Aug, 2008 wrote:
I had the same problem but I do know the minimum pagesize and the large image size and its position to the right, in my case 400px for the image and 758px for the page. What I did is set yOffset = -430; i.e. 30 pixels lower than the image because Firefox has a bug if the image is displayed "below" the pointer cursor (the hand). This works.
If we are to find the solution to a dynamic setting so it automatically detects whether the image will be out to the right, we have to set a condition to show (e.pageX - yOffset > $(document).width()) = align to the cursor's left.
By the way, yOffset and xOffset should be reverted.
Dave on 12 Aug, 2008 wrote:
Hasan Tayyar BEŞIK on 14 Aug, 2008 wrote:
But you must add this line before $("body").append("<p id='tooltip'>"+ this.t +"</p>"); :
if(this.t!="")
egypt on 18 Aug, 2008 wrote:
coderbari on 19 Aug, 2008 wrote:
Poppy on 21 Aug, 2008 wrote:
Eddie on 22 Aug, 2008 wrote:
PS. This would be a realy good WordPress Plugin :)
BLACK SHARK MEDIA on 24 Aug, 2008 wrote:
We've fnd a solution to that:
At x axis put the value 400
At the y axis put the value - 400
So the image will be aligned starting from the top left corner not bottom right corner.
Cheers.
Günther on 26 Aug, 2008 wrote:
web design los angeles on 4 Sep, 2008 wrote:
Anthony on 16 Sep, 2008 wrote:
James Wigger on 17 Sep, 2008 wrote:
Thanks again,
James
mastr3s on 19 Sep, 2008 wrote:
please i really need it i already try many time using this kinda script and put it on php code but work not really nice the image preview wont go away so if anyone one please response to mastr3s@gmail.com
Andrew on 25 Sep, 2008 wrote:
ERROR: Array length must be assigned a finite positive number
gnaffetto on 12 Oct, 2008 wrote:
i've tried immediatly and this is my example (i'm from italy): http://censuralegale.helloweb.eu/docu/
i try: are you interesting to write a mediawiki extension of this script? wikipedia with this feature will be GREAT!! (i've seen an extension that take data from a database:http://www.mediawiki.org/wiki/Extension:WoWItem)
thanks.
gnaffetto
Alexandre on 17 Oct, 2008 wrote:
this is really the easiest tooltip example.
Alexandre
Mark on 20 Oct, 2008 wrote:
cheers
Bruno on 20 Oct, 2008 wrote:
To position the tooltip depending where you are, you need to rewrite some of the code using the offset() property of jQUERY.
var toolTipPosition = $(this).offset(); //Declare the Offset object
var offsetX = 0;
var offsetY = 0;
//Then in the hover property
$("#tooltip")
.css("top",( toolTipPosition.top - posiY) + "px")//Will set where the link/thumbnail is horizontally
.css("left",( toolTipPosition.left + this.offsetWidth/2 + posiX) + "px") /*Will be positioned to the middle of the link/thumbnail, you can alway remove this.offsetWidth/2 to remove the middle placement thing.*/
//Remove the mouseover function and your set!
.fadeIn("fast");
weblover on 2 Dec, 2008 wrote:
Mahmoud M. Abdel-Fattah on 2 Dec, 2008 wrote:
how can I fix this ??
Here's a demo of the problem :
http://alia.hdeya.com/projects/
scott on 9 Dec, 2008 wrote:
Say theres a broken link in main.js " + this.rel + "
any ideas
Webagentur on 2 Jan, 2009 wrote:
Gustavo Baldera on 9 Jan, 2009 wrote:
A.P on 13 Jan, 2009 wrote:
vuelos on 14 Jan, 2009 wrote:
Emanuelle on 14 Jan, 2009 wrote:
Tau on 21 Jan, 2009 wrote:
xaer8 on 22 Jan, 2009 wrote:
Hiral Thaker on 23 Jan, 2009 wrote:
I have the same problem. But don't know how to solve this.
What about this z-index. Please let me know. I am not good to design
thanks
Hiral
Chris Barnett on 23 Jan, 2009 wrote:
Thank you so much for this tutorial and effort you put into the script. I am going to try and implement the tooltip now. Hoping it is as easy as you say it is. Wonderful work and always enjoy your posts. Keep up the great work..
Cheers!
Tibor on 26 Jan, 2009 wrote:
T on 27 Jan, 2009 wrote:
Just what I was looking for!
Thanks :)
fesh on 27 Jan, 2009 wrote:
Manny Calavera on 3 Feb, 2009 wrote:
this.tooltip = function(){
/* CONFIG */
xOffset = 10;
yOffset = 20;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$(".tooltip").hover(function(e){
this.t = this.title;
this.title = "";
$(this).append("<p id='tooltip'>"+ this.t +"</p>");
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#tooltip").remove();
});
$(".tooltip").mousemove(function(e){
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
Hiral Thaker on 5 Feb, 2009 wrote:
I am using this utility and working fine. But one problem..
When I move the cursor on the image some images which are at last displaying the tooltip image after the actual screen. So I can see only half image. I tries to change xOffset and yOffset but still not solved
Please help
Thanks in advance
Milind Ghatkamble on 7 Feb, 2009 wrote:
Xboy on 11 Feb, 2009 wrote:
Edward on 15 Feb, 2009 wrote:
modoko on 22 Feb, 2009 wrote:
karacabey on 22 Feb, 2009 wrote:
Fedeweb on 25 Feb, 2009 wrote:
one question: how can i use a tooltip with different offset in the same page?
Artevideo on 26 Feb, 2009 wrote:
Thanks
Tobias on 26 Feb, 2009 wrote:
Your script is great, I just included it and it works perfectly. I'm using Script #2, the Tooltip for pictures.
But as I'm not too much of an expert, please allow this question:
Is there any way to link to a path instead to the picuture? I mean some kind of workaround maybe?
I would like to use this script for a shop-like application, but of course the clients are supposed to see the detail-page when they click on the picture, instead of a bigger version of this picture.
Thanks in advance for clarifying, and of course thanks for the great script.
All the best from germany!
Tobias
Jim on 28 Feb, 2009 wrote:
Ischia on 2 Mar, 2009 wrote:
Alistair on 3 Mar, 2009 wrote:
peter on 5 Mar, 2009 wrote:
Thank you so much! This was driving me crazy for the last two weeks!
MegaFill on 9 Mar, 2009 wrote:
Anton on 11 Mar, 2009 wrote:
Rafael N Samapio on 11 Mar, 2009 wrote:
Sfondi on 16 Mar, 2009 wrote:
Chanie on 16 Mar, 2009 wrote:
John on 18 Mar, 2009 wrote:
the text display under the next pic or flash object
any idea how to solve??
thanks
zahid on 24 Mar, 2009 wrote:
lamuy on 31 Mar, 2009 wrote:
web design norwich on 31 Mar, 2009 wrote:
GadElKareem on 1 Apr, 2009 wrote:
GadElKareem on 1 Apr, 2009 wrote:
tooltip = function(){
/* CONFIG */
xOffset = 15;
yOffset = 10;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a[title]").live('mouseover', function(e){
this.t = this.title;
this.title = "";
$("body").append("<p id='tooltip'>"+ this.t +"</p>");
$("#tooltip")
.css("top",(e.pageY + xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
});
$("a[t]").live('mouseout',function(){
this.title = this.t;
$("#tooltip").remove();
});
$("a[t]").live('mousemove', function(e){
$("#tooltip")
.css({ top: (e.pageY + xOffset) + "px", left: (e.pageX + yOffset) + "px"} );
});
};
// starting the script on page load
$(function(){
tooltip();
});
still need a way to move the tooltip up when it reaches the page adges
Steven on 2 Apr, 2009 wrote:
joe on 7 Apr, 2009 wrote:
http://www.kriesi.at/archives/create-simple-tooltips-with-css-and-jquery-part-2-smart-tooltips
gino on 8 Apr, 2009 wrote:
Mahboob ISLAM on 16 Apr, 2009 wrote:
peter on 17 Apr, 2009 wrote:
Ryan on 19 Apr, 2009 wrote:
Emil on 19 Apr, 2009 wrote:
ArthasMX on 23 Apr, 2009 wrote:
Luca Barbonaglia on 24 Apr, 2009 wrote:
I've dowload Links With URL Preview it's beautiful but I've a little problem, the image is on the right of mouse and I would like on the left. This is possible ? If yes tell me about please.
Thank you so much
Luca from Principaute of Monaco
robert on 28 Apr, 2009 wrote:
Anand on 30 Apr, 2009 wrote:
Thank You
Aashish Singh on 1 May, 2009 wrote:
R Valdez on 1 May, 2009 wrote:
zhuge on 4 May, 2009 wrote:
K Nambissan on 5 May, 2009 wrote:
Jason Grant on 6 May, 2009 wrote:
LP on 8 May, 2009 wrote:
Ale on 8 May, 2009 wrote:
thank u
me , myself and i on 12 May, 2009 wrote:
tool tip shows on alt="this.t"
$('#tooltip').html($(this).attr('alt')).show();
i tryed this but i cant get it work
Derek on 12 May, 2009 wrote:
Darthslade on 14 May, 2009 wrote:
P.S. on 16 May, 2009 wrote:
This function looks awesome, but I am completely green at this jQuery or .js thing, so I have no idea how to add this to my website.
I tied this:
I uploaded all the files from 03 folder to my theme files main folder, then in my theme file between <head> tags I added this:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="main.js"></script>
Then in my site I posted link witch looks like this:
<a href="http://www.cssglobe.com" class="screenshot" rel="full link to img">Css Globe</a>
But it is no good... Then I rollover it img does not appear...
What could be the cause of this malfunction?
May be .xml file need so editing?
Please help me I would be very grateful :)
Dale Larsen on 19 May, 2009 wrote:
Which license is it filed under?
TheRose on 21 May, 2009 wrote:
Very fluid and easy to use.
Thanks again for sharing.
XiShaN on 22 May, 2009 wrote:
keep going...
Tim on 23 May, 2009 wrote:
Tim on 24 May, 2009 wrote:
Example #2: I want to adjust the x and y offset.
Example #1: I want to keep the default offsets.
For some reason its reading the offsets in the last js file listed on the page and applying to both. It would seem like you can have a different offset for each kind of tip. Is this a bug?
<script src="js/ss-pview.js" type="text/javascript"></script>
<script src="js/tooltip.js" type="text/javascript"></script>
PiYU on 27 May, 2009 wrote:
This is simplest and easiest method to do it!
Sam on 27 May, 2009 wrote:
mousemove(function(kmouse){
var border_top = $(window).scrollTop();
var border_right = $(window).width();
var left_pos;
var top_pos;
var offset = 15;
if(border_right - (offset *2) >= my_tooltip.width() + kmouse.pageX){
left_pos = kmouse.pageX+offset;
} else{
left_pos = border_right-my_tooltip.width()-offset;
}
if(border_top + (offset *2)>= kmouse.pageY - my_tooltip.height()){
top_pos = border_top +offset;
} else{
top_pos = kmouse.pageY-my_tooltip.height()-offset;
}
my_tooltip.css({left:left_pos, top:top_pos});
Sam on 27 May, 2009 wrote:
x_Offset =10;
y_Offset =20;
And change all instances of xOffset/yOffset to x_Offset/y_Offset too
Dain on 28 May, 2009 wrote:
Anyway, here's my code:
//tooltip refactor with live so i don't have to reinit and break stuff
$("a.tooltip").live('mouseover', function(e){
/* CONFIG */
var xOffset = 40;
var yOffset = 0;
/* END CONFIG */
this.t = this.title;
this.title = "";
$("body").append("<p id='tooltip'>"+ this.t +" <img src='_images/tooltiparrow.png' /></p>");
var tipWidth = ($("#tooltip").width() / 2) + 10 ;
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.css("margin-left", "-"+ tipWidth +"px")
.fadeIn(100, function() {
});
$(this).mousemove(function(e){
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
});
});
$("a.tooltip").live('mouseout', function(e) {
this.title = this.t;
$(this).die("mousemove", "mouseout");
$("#tooltip").remove();
});
Dain on 28 May, 2009 wrote:
Gabriel Verdejo on 28 May, 2009 wrote:
asad on 29 May, 2009 wrote:
Thomas Svensson on 29 May, 2009 wrote:
SLA80 on 1 Jun, 2009 wrote:
1. Fixed a BUG. Please, fix it too: Place "if (this.t)" just before "this.title = this.t;". It is possible to reproduce the bug at least in Chrome browser: press "Reload", and then move your mouse pointer FAST to the place, where element with tooltip will appear. The next moment after page reload, standard (non-decorated) tooltip will appear. Move mouse away (TOOLTIP TEXT IS DESTROYED RIGHT NOW), and back to the element. Deporated tooltip appears, but its text is "undefined", because its text was destroyed forever.
2. Replaced $("a.tooltip") with $(".tooltip") , so not only links, but any other element with tooltip (<img>, <span>, etc.) will display decorated tooltips.
Marko Vierimaa on 3 Jun, 2009 wrote:
$(".imageTooltip").mousemove(function(e){
var posY;
if (e.pageY - $(window).scrollTop() + $('#tooltip').height() >= $(window).height() ) {
posY = $(window).height() + $(window).scrollTop() - $('#tooltip').height() - 15 ;
} else {
posY = e.pageY - 15;
}
$("#tooltip")
.css("top",(posY) + "px")
.css("left",(e.pageX + 15) + "px");
});
Eddie on 3 Jun, 2009 wrote:
great script thanks.
I am trying to scale the image that is previewed, however the first time the mouseover event occurs on the image link my pop-up is empty, then the next time it's fine. I know it is the way I am populating the width value of the image that is causing it, but I dont understand why, I thought it processed the code from top to bottom, so it should always get the image size first. All my images are different dimensions that need to be scaled correctly. I decrement by 3% each time until dimensions are under max. Any help (from anyone reading this) would be greatly appreciated.
here's my code:
$("a.preview").hover(function(e){
this.t = this.title;
this.title = "";
var newImg = new Image();
newImg.src = this.href;
var picheight = '';
var picwidth = '';
for (i=100;i>1;)
{
picheight = newImg.height * (i/100);
picwidth = newImg.width * (i/100);
i=i-3;
if (picheight < 700 && 500 < maxWidth)
i=1;
}
var c = (this.t != "") ? "<br/>" + this.t : "";
if (picwidth > 0){
$("body").append("<p id='preview'><img width="+picwidth+" src='"+ this.href +"' alt='No Image' />"+ c +"</p>");
$("#preview")
.css("top",xOffset + "px")
.css("left",yOffset + "px")
.fadeIn("fast");
}
},
Eddie on 3 Jun, 2009 wrote:
for (i=100;i>1;)
{
picheight = newImg.height * (i/100);
picwidth = newImg.width * (i/100);
i=i-3;
if (picheight < 700 && picheight < 500)
i=1;
}
and the problem is: on mouseover of image link, first time - image is not loaded, pop-up is empty, why?; second time - works fine.
Conrad on 6 Jun, 2009 wrote:
Great little script. Was wondering if it is possible to add a graceful fadeIn/fadeOut effect when hovering over a link?
Mottie on 11 Jun, 2009 wrote:
I love this script, but I needed it to replace the cool DHTML tooltip script from Dynamic Drive. I also fixed the tooltip to stay inside the viewport as well as added a few other features which include setting a background color, font color and tooltip width for each tooltip (and any additional CSS you want). I also made it so you can get the tooltip contents from any object on your page (like a div).
It was a little too long to post here so I posted it on a blog I just started. Please be kind, I only code as a hobby :)
http://wowmotty.blogspot.com/2009/06/new-and-improved-jquery-tooltips.html
Krishan Rodrigo on 15 Jun, 2009 wrote:
yans on 15 Jun, 2009 wrote:
matur thankyou maz ....
webmas on 15 Jun, 2009 wrote:
wptidbits on 16 Jun, 2009 wrote:
Katherine on 17 Jun, 2009 wrote:
Muhammad Usman Arshad on 20 Jun, 2009 wrote:
JC on 23 Jun, 2009 wrote:
Rúbel Mujica on 25 Jun, 2009 wrote:
The script for image preview is great, in fact I'm using it in my webpage, but the xOffset and yOffset variables are inverted when setting the position of the div.
The original code has (in the mouseover and mousemove events):
.css("top",(e.pageY - xOffset) + "px") // should use yOffset for the top
.css("left",(e.pageX + yOffset) + "px") // should use xOfset for the left
and should be:
.css("top",(e.pageY - yOffset) + "px")
.css("left",(e.pageX + xOffset) + "px")
Once I changed this, after configuring this two parameters, everything went just fine.
Thanks!
Allen on 28 Jun, 2009 wrote: