Question

我喜欢这个工具，当鼠标移动到pix上时显示文字：

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>

将ids添加到每个标签。我已经尝试过它并没有打破插件。（请原谅可怕的命名惯例:)）

然后使用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功能正常在鼠标移动时启动。

Answer 2

SIMPLEST解决方案：确保所有图片都包含在<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>而不是第三个链接中，则鼠标悬停仅适用于前两个链接。

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方法不会。

jquery工具 - 标签鼠标悬停 - 添加链接

4 个答案: