javascript - How to specify location of image on hover -


i have code display image directly on hyperlinks. unfortunately, if image populates directly on cursor, there seems conflict:

website

you can see code works small images. large images flicker. how can images stop flickering. think location of displayed image needs away hyperlink.

jquery(document).ready(function() {        jquery("<div id='player-image-hover'></div>").appendto("body").css("position", "absolute").css("z-index", "1000").css("padding", "2px").css("backgroundcolor", "#666");        jquery("a[href^='http://thepoolscene.com/player-profile']").each(function() {          var title = jquery(this).attr("title");          title = title.tolowercase();          title = ucwords(title);          var url = "http://" + window.location.host + "/wp-content/gallery/playerphotos/" + escape(title) + ".jpg";          // var o = jquery(this).offset();          var = this;          jquery.ajax({              url: url,              type: 'head',              error: function() {                   console.log('doesnt exist: ' + url);              },              success: function() {                  //var image_preload = new image(100,25);                   //image_preload.src = url;                  if (jquery("#player-image-hover").find("img[src='" + url + "']").length == 0) {                      jquery("#player-image-hover").append("<img src='" + url + "' height='220' style='display:none'>");                  }                  jquery(that).hover(                      function() {                        var o = jquery(this).offset();                        jquery("#player-image-hover").css("left", o.left).css("top", o.top-222).css("display", "block").find("img[src='" + url + "']").css("display", "block");                      },                      function() {                        jquery("#player-image-hover").css("display", "none").find("img").css("display", "none");                      }                  );              }          });      });    });    function ucwords (str) {    // http://kevin.vanzonneveld.net    // +   original by: jonas raoni soares silva (http://www.jsfromhell.com)    // +   improved by: waldo malqui silva    // +   bugfixed by: onno marsman    // +   improved by: robin    // +      input by: james (http://www.james-bell.co.uk/)    // +   improved by: kevin van zonneveld (http://kevin.vanzonneveld.net)    // *     example 1: ucwords('kevin van  zonneveld');    // *     returns 1: 'kevin van  zonneveld'    // *     example 2: ucwords('hello world');    // *     returns 2: 'hello world'    return (str + '').replace(/^([a-z\u00e0-\u00fc])|\s+([a-z\u00e0-\u00fc])/g, function ($1) {      return $1.touppercase();    });  }

i believe happening due fact when hover on link has image covering it, onmouseout event fires on link , hides image. onmouseover triggered again , loop continues.

the following plugin may solve problem. http://cherne.net/brian/resources/jquery.hoverintent.html

this can add timeout before handlerout fired. plus supports event delegation in case decided add 2 types of hovers.


Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -