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 将图像的点击绑定(bind)到重定向:

$("#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 功能会在鼠标悬停时正常​​启动。