3

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

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

[插入 ' 仅显示源代码。]

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

提前感谢您的帮助！

4

4 回答 4

1

最简单的解决方案：确保所有图像都包含在<a>. IE：

<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>而不是第三个，则鼠标悬停仅适用于前两个。

于 2010-02-03T07:35:45.580 回答
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 功能在鼠标悬停时正常​​启动。

于 2010-02-01T14:25:38.447 回答
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 回答
0

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

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

于 2010-02-01T14:27:45.230 回答