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的工具 - 选项卡鼠标悬停 - 添加链接

回答

相关问题