鼠标滑在标题上显示图片的JS代码

复制代码 代码如下:

  <SCRIPT type=text/javascript src="js/jquery.tooltip.v.1.1.js"></SCRIPT>

  <SCRIPT type=text/javascript src="js/jquery.tooltip.execute.js"></SCRIPT>

  机型:<a href="#nogo" class="with-tooltip" title="<img src='images/plane/${air.aircrafttype}.jpg'/>" >${air.aircrafttype}</a>

  jquery.tooltip.execute.js:

  $(document).ready(function(){

  $(".with-tooltip").simpletooltip();

  });

  tooltip.v.1.1.js: www.glzy8.com

  /**

  *

  * simpleTooltip jQuery plugin, by Marius ILIE

  * visit  for details

  *

  **/

  (function($){ $.fn.simpletooltip = function(){

  return this.each(function() {

  var text = $(this).attr("title");

  $(this).attr("title", "");

  if(text != undefined) {

  $(this).hover(function(e){

  var tipX = e.pageX + 12;

  var tipY = e.pageY + 12;

  $(this).attr("title", "");

  $("body").append("<div id='simpleTooltip' style='position: absolute; z-index: 100; display: none;'>" + text + "</div>");

  if($.browser.msie) var tipWidth = $("#simpleTooltip").outerWidth(true)

  else var tipWidth = $("#simpleTooltip").width()

  $("#simpleTooltip").width(tipWidth);

  $("#simpleTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");

  }, function(){

  $("#simpleTooltip").remove();

  $(this).attr("title", text);

  });

  $(this).mousemove(function(e){

  var tipX = e.pageX + 12;

  var tipY = e.pageY + 12;

  var tipWidth = $("#simpleTooltip").outerWidth(true);

  var tipHeight = $("#simpleTooltip").outerHeight(true);

  if(tipX + tipWidth > $(window).scrollLeft() + $(window).width()) tipX = e.pageX - tipWidth;

  if($(window).height()+$(window).scrollTop() < tipY + tipHeight) tipY = e.pageY - tipHeight;

  $("#simpleTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");

  });

  }

  });

  }})(jQuery);