jQuery的工具 - 選項卡鼠標懸停 - 添加鏈接

我喜歡這個工具來顯示移動鼠標在PIX當文字：jQuery的工具 - 選項卡鼠標懸停 - 添加鏈接

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

現在我試圖打開一個鏈接，當一個pix被鼠標點擊。我想是這樣的：

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>''

[在'被插入到顯示源只。隨着這個鏈接鼠標懸停

不再工作。有人知道該怎麼做嗎？

提前感謝您的幫助！

來源

2010-02-01 New_user

我還沒有使用這個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'; 
});

希望幫助

編輯

要回答你的問題顯示頁面加載中的第二個圖像的內容，我有以下解決方案。這感覺有點像我的解決方法，但希望它有效。

在您的頁面上，發生什麼事是流水遊戲會隱藏除使用內聯樣式的第一個圖像之外的所有圖像。

所以我們需要做的是從第一個圖像中刪除這種風格，並將其添加到第二個圖像。請記住，這隻能在頁面加載時發生，因此您需要將其添加到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');

重要的是，這隻發生一次，然後FlowPlayer功能通常在鼠標懸停時啓用。

來源

2010-02-01 14:25:38 Kamal

感謝您的幫助 - 它適合我！你是否有一個想法，以及如何強制打開演示頁面而不是第一張圖片的上下文時顯示第二張圖片的「上下文」？ – 2010-02-01 14:58:53

請參閱編輯。我希望這給你你正在尋找的 – Kamal 2010-02-01 16:00:33

再次感謝 - 你的第二個建議也在工作。沒有恐懼，這是我的最後一個問題;-) – 2010-02-01 16:59:59

我覺得你需要忘記這個插件，因爲它實際上並不是要做你想做的。這個插件用於創建標籤，而你顯示的內容實際上是另一件夾克中的標籤。而標籤不打開網址，它們顯示其窗格的內容。

你需要的是某種形式的提示。這裏是一個開始的工具提示列表：http://speckyboy.com/2009/09/16/25-useful-jquery-tooltip-plugins-and-tutorials/

來源

2010-02-01 14:27:45 Natrium

有沒有人有一個想法如何強制打開演示頁而不是第一個圖片的上下文顯示第二個圖片的「上下文」？ – 2010-02-01 15:00:56

如果你堅持鏈接與跨度內的圖像它會工作。

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

即使您沒有鏈接所有圖像，您也必須將所有圖像粘貼在一個範圍內，因此結構相同。

這樣做的好處是，它將被索引爲一個真正的鏈接，JavaScript方法不會。

來源

2010-02-01 14:28:13

最簡單的解決方案：確保全部圖像被包裹在<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工具選項卡只有在您指定的容器的所有子項都是相同類型時纔有效。

編輯：是的，它似乎只適用於它遇到的第一種類型的標記。例如如果你把前兩個鏈接放在<a>而不是第三個，mouseover只適用於前兩個。

來源

2010-02-03 07:35:45 lawrence

jQuery的工具 - 選項卡鼠標懸停 - 添加鏈接

回答

相關問題