2

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

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

我将 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 } });​

我最初的假设是添加这样的函数（在此处找到）：

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/

回答

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

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

1 回答 1

2

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

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

看起来您实际上正在做的只是为onMouseOver事件提供对您的函数的引用，这与告诉它调用函数不同。添加括号应该会有所帮助。

我去了您的 jsFiddle 尝试进行一些编辑，但loadImg在您的 JavaScript 中看不到该功能。我不想做任何伤害，所以我没有做任何改变。希望这可以帮助 -

于 2012-05-03T17:19:39.867 回答