Dec 28

Posted in: Ajax, CSS, Freebie | 58 Comments

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]


[Download the code here]

The hover code is by Dave Cohen’s Hovertips.


Posted in: Ajax, CSS, Freebie | Leave a Comment | 58 Comments
devsnippets- Code snippet Gallery
What others said...

58 Comments, Add Comment or Ping


  1. Spencer says:

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

  2. Polo says:

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

  3. pascal says:

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

  4. Tanveer says:

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

  5. Noupe says:

    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.

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

  7. left it blank says:

    Your link is malformed.

    Links to:
    http:///noupe.com/examples/tagcloud/hover_sub_tags.zip

    one too many forward slashes

  8. hit says:

    thank you :)

  9. isim hakki says:

    thank for you

  10. otogaz says:

    thanks you

  11. zzc10 says:

    thanks you

  12. asansör says:

    thank you wery much

  13. thank you wery much

  14. LDe says:

    cool, cant wait to try it

  15. safagas says:

    danke

  16. ebook says:

    Thanks But I cannot download code Why ?

  17. erd says:

    thanks ? can use it new site:D

  18. SASWAT [DILU] says:

    Very good.

  19. exboy says:

    thank you wery much

SPONSORS