outils jquery - onglets mouseover - Ajout d'un lien

Question

J'adore cet outil pour afficher le texte lors du déplacement de la souris sur le pix:

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

Maintenant, je suis en train d'ouvrir un lien, lorsque l'un des pix est cliqué par la souris. J'ai essayé de cette façon:

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

[Le 'sont insérés pour montrer la seule source.]

Avec ce lien mouseover ne fonctionne plus. Est-ce que quelqu'un sait ce qu'il faut faire là-bas?

Merci d'avance pour toute aide!

Answer 1

Je n'ai pas utilisé cet outil jQuery. Mais je pense que l'outil nécessiterait la 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> 

L'outil chercherait un img dans un div (encore une fois, je ne l'ai pas vu le code, c'est donc une hypothèse). Beaucoup de plugins jQuery nécessitent un certain format.

je ferais ceci:

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

Ajout des ids à chaque étiquette. Je l'ai essayé et il ne semble pas briser le plugin. (Excusez la convention terrible dénomination :))

lient ensuite le clic des images à une redirection en utilisant 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'; 
}); 

espoir qui aide

EDIT

Pour répondre à votre question montrer le contenu de la deuxième image sur le chargement de la page, j'ai la solution suivante. Cela ressemble un peu à une solution de contournement pour moi, mais j'espère que cela fonctionne.

Sur votre pageload, ce qui se passe est que flowplayer cache toutes les images sauf la première en utilisant des styles en ligne. Donc, ce que nous devons faire est de supprimer ce style de la première image, et l'ajouter à la deuxième image. Rappelez-vous que cela ne doit se produire qu'une seule fois sur le chargement de la page, vous devrez donc l'ajouter à la fonction 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'); 

Il est important que cela ne se produise qu'une fois, puis la fonctionnalité FlowPlayer intervient normalement lors des survols.

Answer 2

Je pense que vous avez besoin d'oublier ce plugin, parce que ce n'est pas fait pour faire ce que vous voulez. Ce plugin sert à créer des onglets, et ce que vous montrez est en fait un onglet dans une autre veste. Et les onglets n'ouvrent pas les URL, ils montrent le contenu de leur volet.

Ce dont vous avez besoin, c'est d'une sorte d'infobulle. Voici une liste d'info-bulles pour commencer avec: http://speckyboy.com/2009/09/16/25-useful-jquery-tooltip-plugins-and-tutorials/

Answer 3

Si vous collez le lien avec l'image dans une durée, cela fonctionnera.

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

Vous devez avoir coller toutes les images dans une période de sorte que la structure est la même, même si vous ne liez pas toutes les images. L'avantage de le faire de cette façon est qu'il sera indexé comme un vrai lien, ce qui n'est pas le cas d'une approche javascript.

Answer 4

Solution SIMPLEST: assurez-vous que tous les les images sont enveloppées dans <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> 

Cela fonctionne très bien; Je l'ai juste essayé. Je suppose que les onglets Outils jQuery ne fonctionnent que si tous les enfants du conteneur que vous spécifiez sont du même type.

EDIT: oui, il semble fonctionner uniquement avec le premier type d'étiquette rencontré. par exemple. Si vous mettez les deux premiers liens en <a> et non le troisième, le survol ne fonctionne que pour les deux premiers.