Dec 28

jquery Hover Sub Tag Cloud

Tag clouds When, used properly, they can provide visitors with an instant illustration of the main topics of the site’s content. And although we don’t have that much choice in designing them, we can still find our way to come up with new design approaches and solutions.

Here is a new approach: Using jQuery  to reduce the size of the tag cloud that you have on your sites, so our demo will introduce "Hover Sub Tags" under each main Tag, for example if you have Ajax as a tag, you can have jquery, mootools, etc… as sub-tags.  A Sub Tag  Cloud will appear when hovering over the main Tag links.

Check out the link below to see it in action.
[LIVE EXAMPLE]
Tagcloud in jquery Hover Sub Tag Cloud


[Download the code here]

The hover code is by Dave Cohen’s Hovertips.

36 Responses, Add Comment +

  1. Spencer 1 January 2008

    Wow, very cool… I really like how you can style these. Excellente indeed.

  2. Polo 2 January 2008

    Cool work, I do it in my blog (later ^^).

  3. baboosh 7 January 2008

    usefull , i’ll try it!

    http://www.baboosh.fr

  4. pascal 21 January 2008

    Thank you, I’s very good, but for modifificade the css I’s very difficulte.

  5. Tanveer 23 January 2008

    Can it possible to have a multi-level tag-cloud?

  6. Noupe 27 January 2008

    Tanveer,
    Yes you can use multi level tag cloud if you have many tags and you are looking to reduce the space it take. Its a matter of personal preference and a new way to display your tag cloud.

  7. Looks like an awful lot of code for something as simple as

    $(document).ready(function(){
    $(ul li ul).hide();
    $(ul li ul).mousover(function(){
    $(ul li ul).show();
    }
    }

    Not my actual code of course but you get the idea.

  8. LDe 22 July 2008

    cool, cant wait to try it

  9. erd 14 August 2008

    thanks ? can use it new site:D

  10. Szczecinianin 12 September 2008

    Very nice :-) Thanks

  11. SASWAT [DILU] 21 September 2008

    Very good.

  12. exboy 26 October 2008

    thank you wery much

Trackbacks