Question

我正在为汽车购物网站构建一个动态工具提示，以便根据搜索参数加载大量照片。加载的图像是我们本地托管的缩略图。

我遇到麻烦的地方是添加功能，所以当有人鼠标悬停在缩略图上时，工具提示会呈现更大的汽车图像，以及年份，品牌，型号和价格。这些图像托管在外部域中。

我正在使用jQuery Tools Tooltip插件来实现核心功能。对于这些更中间的JavaScript概念，我有点新手，而且我似乎无法在Google上找到任何帮助我的用例的教程。

我的HTML

<div id="tooltip" class="tooltip">
    <img  src="http://placehold.it/320x240" />
    <p>2012 Infiniti GSX $29,800</p>
</div><!-- #tooltip -->
<ul id="thumbs">        
    <li>
        <a href="#">
        <img src="http://www.web2carz.com/images/thumbs/22/80/thumb_large_70364184.jpg" />
        </a>
    </li>               
</ul>

我的JavaScript：

// Image Tooltips
jQuery("#thumbs li a").tooltip({
    tip: '#tooltip',
    effect: 'fade',
    relative: true,
    position: 'bottom center',
    delay: 0,
    offset: [5, 150]
}).dynamic({ top: { direction: 'down', bounce: true } });

我最初的假设是添加这样的函数（found here）：

function loadImg() {
    var img = new Image();
    img.src='http://placehold.it/320x240';
    img.id = 'toolImg';
    return img;
    document.getElementById('tooltip').innerHTML += img;
  }

将事件处理程序添加到我的锚点，如：<a href="#" onMouseOver="loadImg()">，然后将加载的图像附加到工具提示：

document.getElementById('tooltip').innerHTML += 'img';

我似乎无法找到合适的后续步骤来实现我想要的功能。

我还有一个jsfiddle我的当前代码设置：

http://jsfiddle.net/aRJ84/10/

ANSWER

所以我得到了它，这是我的功能代码：

HTML：

<ul id="thumbs">
 <li>
  <a href="#" onMouseOver="loadImg('http://placehold.it/720x480', 'Honda')">
   <img src="http://www.web2carz.com/images/thumbs/22/80/thumb_large_70364184.jpg" />          
  </a>
 </li>
</ul>

JavaScript的：

function loadImg(img, makeName) {
  var bla = "<img src=\"" + img + "\"/>";

  bla += "<br><p>This is  great car</p>" + makeName;

  document.getElementById('tooltip').innerHTML = bla;
}

Answer 1

尝试将事件处理程序定义更改为：

<a href="#" onMouseOver="loadImg()">

看起来你实际上在做的只是给你的onMouseOver事件一个引用到你的函数，这与告诉 调用不一样 这个功能。添加parens应该会有所帮助。

我去了你的jsFiddle尝试一些编辑，但我没有在你的JavaScript中看到loadImg函数。我不想做任何伤害，所以我没有做任何改变。希望这会有所帮助 -

将外部图像加载到工具提示onMouseOver事件处理程序中

ANSWER

1 个答案: