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

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;
  }

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

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

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

我也有一个 jsfiddle，其中包含我当前的代码设置:

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

回答

所以我让它工作了，这是我的功能代码:

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 事件一个对您的函数的引用，这与告诉它< em>调用函数。添加括号应该会有所帮助。

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