3

pixの上にマウスを移動したときにテキストを表示するこのツールが大好きです。

http://flowplayer.org/tools/demos/tabs/mouseover.htm

pixの1つがマウスでクリックされたときに、リンクを開こうとしています。私はこの方法を試しました：

original: <'img src="http://static.flowplayer.org/img/commerce/commercial.png" alt="Commercial version" />'

adding link: <'a title="Mylink" href="http://mylink.com" target="_blank"><'img src="http://static.flowplayer.org/img/commerce/free.png" alt="Free version" /></a>''

['はソースのみを表示するために挿入されます。]

このリンクを使用すると、マウスオーバーは機能しなくなります。誰かがそこで何をすべきか知っていますか？

助けてくれてありがとう！

4

4 に答える 4

1

この jQuery ツールは使用していません。しかし、ツールには構造が必要だと思います

<div id="products">
    <img src="http://static.flowplayer.org/img/commerce/free.png" alt="Free version" />
    <img src="http://static.flowplayer.org/img/commerce/commercial.png" alt="Commercial version" />
    <img src="http://static.flowplayer.org/img/commerce/multidomain.png" alt="Multidomain version" />
</div>

ツールは div 内の img を探します (繰り返しますが、コードを見ていないので、これは仮定です)。多くの jQuery プラグインには、特定の形式が必要です。

私はこれをします：

 <div id="products">

        <img src="http://static.flowplayer.org/img/commerce/free.png" alt="Free version" id="image1" />
        <img src="http://static.flowplayer.org/img/commerce/commercial.png" alt="Commercial version" id="image2" />
        <img src="http://static.flowplayer.org/img/commerce/multidomain.png" alt="Multidomain version" id="image3" />
    </div>

各タグに ID を追加します。試してみましたが、プラグインが壊れているようには見えません。（ひどい命名規則を許してください:)）

次に、JavaScript を使用して画像のクリックをリダイレクトにバインドします。

$("#image1").click(function() {
    window.location = 'http://www.google.co.za';
});

$("#image2").click(function() {
    window.location = 'http://www.google.co.za/somwhereelse';
});

$("#image3").click(function() {
    window.location = 'http://www.google.co.za/helloworld';
});

それが役立つことを願っています

編集

ページの読み込み時に 2 番目の画像のコンテンツを表示するという質問に答えるには、次の解決策があります。これは私にとっては回避策のように感じますが、うまくいくことを願っています。

ページロード時に、flowplayer はインライン スタイルを使用する最初の画像を除くすべての画像を非表示にします。

したがって、最初の画像からこのスタイルを削除し、2 番目の画像に追加する必要があります。これはページの読み込み時に一度だけ発生する必要があるため、document.ready 関数に追加する必要があることに注意してください。

//make the display attribute of the style none. This will render it invisible
$("#free").css('display','none');
//make the display attribute of the style block (as what Flowplayer does)
$("#commercial").css('display','block');

これが 1 回だけ発生することが重要であり、マウスオーバーで FlowPlayer 機能が正常に開始されます。

于 2010-02-01T14:25:38.447 に答える
1

最も簡単な解決策:すべての画像が でラップされていることを確認して<a>ください。すなわち:

<div id="products"> 
    <a href="#"><img src="http://static.flowplayer.org/img/commerce/free.png" alt="Free version" /></a>
    <a href="#"><img src="http://static.flowplayer.org/img/commerce/commercial.png" alt="Commercial version" /></a>
    <a href="#"><img src="http://static.flowplayer.org/img/commerce/multidomain.png" alt="Multidomain version" /></a>
</div>

これは正常に機能します。試してみました。指定したコンテナのすべての子が同じタイプである場合にのみ、jQuery Tools Tabs が機能すると想定しています。

編集:はい、最初に遭遇したタイプのタグでのみ機能するようです。たとえば、最初の 2 つのリンクを配置し<a>、3 番目のリンクを配置しない場合、マウスオーバーは最初の 2 つのリンクに対してのみ機能します。

于 2010-02-03T07:35:45.580 に答える
0

私はあなたがこのプラグインを忘れる必要があると思います、なぜならそれは実際にはあなたが望むことをすることを意図していないからです。このプラグインはタブを作成するためのものであり、表示されるのは実際には別のジャケットのタブです。また、タブはURLを開かず、ペインのコンテンツを表示します。

必要なのは、ある種のツールチップです。最初に使用するツールチップのリストは次のとおりです。http：//speckyboy.com/2009/09/16/25-useful-jquery-tooltip-plugins-and-tutorials/

于 2010-02-01T14:27:45.230 に答える
0

スパン内の画像とのリンクを貼り付けると、機能します。

<span><a href="http://yourlink"><IMG src="./jQuery Tools standalone demo_files/free.png" alt="Free version" class=""></a></span>

すべての画像をリンクしなくても、構造が同じになるように、すべての画像をスパンに貼り付ける必要があります。

この方法の利点は、実際のリンクとしてインデックスが作成されることですが、JavaScriptのアプローチではインデックスが作成されません。

于 2010-02-01T14:28:13.533 に答える