2

検索パラメーターに基づいて大量の写真をロードするページの自動車ショッピング Web サイトの動的ツールチップを作成しています。読み込まれた画像は、ローカルでホストされているサムネイルです。

私が問題を抱えているのは、機能を追加することです。誰かがサムネイルの上にマウスを置くと、ツールチップに車の大きな画像、年、メーカー、モデル、価格が表示されます。これらの画像は外部ドメインでホストされています。

コア機能に 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 に答える