jquery tools - tabs mouseover - adding a link

Question

I love this tool to show text when moving the mouse over the pix:

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

Now I'm trying to open a link, when one of the pix is clicked by the mouse. I tried this way:

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

[The ' are inserted to show the source only.]

With this link mouseover is no longer working. Does somebody know what to do there?

Thank in advance for any help!

Answer 1

Hi,

I haven't used this jQuery tool. But I would think that the tool would require the structure

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

The tool would look for an img within a div (again, I haven't seen the code, so this is an assumption). Lots of jQuery plugins require a certain format.

I would do this:

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

Adding the ids to each tag. I've tried it and it doesn't appear to break the plugin. (Excuse the terrible naming convention :))

Then bind the click of the images to a redirect using 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';
});

Hope that helps

EDIT

To answer your question to show the content of the second image on page load, I have the following solution. This feels a bit like a workaround to me, but hopefully it works.

On your pageload what happens is that flowplayer hides all the images except the first one using inline styles.

So what we need to do is remove this style from the first image, and add it to the second image. Remember this must only happen once on page load so you will need to add it to the document.ready function.

//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');

It's important that this only happens once, and then the FlowPlayer functionality kicks in normally on mouseovers.

Answer 2

I think you need to forget this plugin, 'cause it actually isn't meant to do what you want. This plugin is for creating tabs, and what you show are actually tabs in another jacket. And tabs don't open urls, they show the content of their pane.

What you need is some sort of tooltip. Here is a list of tooltips to start with: http://speckyboy.com/2009/09/16/25-useful-jquery-tooltip-plugins-and-tutorials/

Answer 3

If you stick the link with the image inside a span it'll work.

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

You have to have to stick all the images in a span so the structure is the same, even if you don't link all the images.

The benefit of doing it this way is that it will be indexed as a real link, a javascript approach will not.

Answer 4

SIMPLEST solution: make sure all the images are wrapped in <a>. i.e.:

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

This works fine; I just tried it. I'm assuming that jQuery Tools Tabs only works if all the children of the container you specify are the same type.

EDIT: yes, it seems to work only with the first type of tag it encounters. e.g. if you put the first two links in <a> and not the third, mouseover only works for the first two.