Jquery tools - mouseover tabs - add link

Question

I like this tool to display text when moving the mouse around the pixel:

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

Now I am trying to open a link when I click on one of the pixels. I tried like this:

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

["Paste" to show only the source.]

Using this link, mouseover no longer works. Does anyone know what to do there?

Thanks in advance for your help!

Answer 1

I have not used this jQuery tool. But I would think that a tool would need a 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>

img div ( , , ). 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>

. , , , . ( :))

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

,

, , . , , , .

pageload , 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 .

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 Tools , .

EDIT: , , , . <a>, , .

Answer 3

, , , , . , , , . URL-, .

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

, , .

The advantage of this is that it will be indexed as a real link, the javascript approach will not.