jquery 工具 - 选项卡鼠标悬停 - 添加链接

Question

我喜欢这个工具，当将鼠标移动到像素上时显示文本：

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

现在，当鼠标单击其中一个像素时，我尝试打开一个链接。我尝试了这种方式：

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

[插入'仅显示源。]

使用此链接，鼠标悬停不再起作用。有人知道那里可以做什么吗？

预先感谢您的帮助！

Answer 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';
});

希望这有助于

编辑

要回答您的问题以在页面加载时显示第二个图像的内容，我有以下解决方案。这对我来说有点像一种解决方法，但希望它能起作用。

在页面加载时，Flowplayer 会使用内联样式隐藏除第一个图像之外的所有图像。

所以我们需要做的就是从第一张图片中删除这个样式，并将其添加到第二张图片中。请记住，这只能在页面加载时发生一次，因此您需要将其添加到 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 功能会在鼠标悬停时正常​​启动。

Answer 2

最简单的解决方案：确保所有图像都包含在中。即：

<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 工具选项卡仅在您指定的容器的所有子项都是同一类型时才起作用。

编辑：是的，它似乎只适用于它遇到的第一种类型的标签。例如，如果您将前两个链接放在 中而不是第三个链接中，则鼠标悬停仅适用于前两个链接。

Answer 3

我认为你需要忘记这个插件，因为它实际上并不意味着做你想做的事。
该插件用于创建选项卡，您显示的实际上是另一件夹克中的选项卡。
选项卡不会打开网址，它们会显示窗格的内容。

您需要的是某种工具提示。以下是开始的工具提示列表： http://speckyboy.com/2009/09/16/25-useful-jquery-tooltip-plugins-and-tutorials/

Answer 4

如果您将带有图像的链接粘贴在跨度内，它将起作用。

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

即使您不链接所有图像，您也必须将所有图像粘贴在一个跨度中，以便结构相同。

这样做的好处是它将被索引为真正的链接，而 javascript 方法则不会。