http://blog.mizzy.org/articles/2005/11/23/tagRelationVisualization02 en-us 40 <p class="entryBody"> <a href="http://mizzy.org/web/tagRelationVisualization01.html" target="_blank">前回のエントリ</a>に対して、<a href="http://blog.7style.org/index.cgi/20050531130621.html" target="_blank">Blog Room - タグのデザイン</a>で良いアイデアを頂きましたので、ちょいと実装してみました。(Blog Roomのdbさん、ありがとうございます！) </p> <p class="entryBody"> タグの上にマウスオーバーすると、関連するタグだけを表示して、色の濃さで関連の強さを表現し、関連しないタグは非表示にする、といったことをJavascriptでやってます。 </p> <p class="entryBody"> ちょっと動きがbuggyだったり、見せ方には工夫の余地がまだまだありますが、前回のポップアップ表示よりはるかに良さげな感じですね。 </p> <p class="entryBody"> <strong>06/04 追記</strong><br /> Takaさんから頂いたご意見をもとに、関連のないタグは消すのではなく、白くするようにしてみました。 </p> <p class="code" onmouseout="tag_out();"> <span onmouseover='tag_over("ajax");' onmouseout='tag_out();' style='font-size: 3.10258509299405em;cursor: pointer;' id='ajax'>ajax</span> <span onmouseover='tag_over("alpha geeks");' onmouseout='tag_out();' style='font-size: 0.8em;cursor: pointer;' id='alpha geeks'>alpha geeks</span> <span onmouseover='tag_over("blog");' onmouseout='tag_out();' style='font-size: 1.49314718055995em;cursor: pointer;' id='blog'>blog</span> <span onmouseover='tag_over("bloglines");' onmouseout='tag_out();' style='font-size: 1.89861228866811em;cursor: pointer;' id='bloglines'>bloglines</span> <span onmouseover='tag_over("blosxom");' onmouseout='tag_out();' style='font-size: 3.74443897916644em;cursor: pointer;' id='blosxom'>blosxom</span> <span onmouseover='tag_over("catalyst");' onmouseout='tag_out();' style='font-size: 1.49314718055995em;cursor: pointer;' id='catalyst'>catalyst</span> <span onmouseover='tag_over("category");' onmouseout='tag_out();' style='font-size: 0.8em;cursor: pointer;' id='category'>category</span> <span onmouseover='tag_over("cgi::application");' onmouseout='tag_out();' style='font-size: 1.49314718055995em;cursor: pointer;' id='cgi::application'>cgi::application</span> <span onmouseover='tag_over("daapd");' onmouseout='tag_out();' style='font-size: 0.8em;cursor: pointer;' id='daapd'>daapd</span> <span onmouseover='tag_over("db");' onmouseout='tag_out();' style='font-size: 0.8em;cursor: pointer;' id='db'>db</span> <span onmouseover='tag_over("dbx");' onmouseout='tag_out();' style='font-size: 0.8em;cursor: pointer;' id='dbx'>dbx</span> <span onmouseover='tag_over("del.icio.us");' onmouseout='tag_out();' style='font-size: 1.89861228866811em;cursor: pointer;' id='del.icio.us'>del.icio.us</span> <span onmouseover='tag_over("entries_in_this_page");' onmouseout='tag_out();' style='font-size: 0.8em;cursor: pointer;' id='entries_in_this_page'>entries_in_this_page</span> <span onmouseover='tag_over("firefox");' onmouseout='tag_out();' style='font-size: 0.8em;cursor: pointer;' id='firefox'>firefox</span> <span onmouseover='tag_over("greasemonkey");' onmouseout='tag_out();' style='font-size: 0.8em;cursor: pointer;' id='greasemonkey'>greasemonkey</span> <span onmouseover='tag_over("hackers");' onmouseout='tag_out();' style='font-size: 0.8em;cursor: pointer;' id='hackers'>hackers</span> <span onmouseover='tag_over("html::prototype");' onmouseout='tag_out();' style='font-size: 1.49314718055995em;cursor: pointer;' id='html::prototype'>html::prototype</span> <span onmouseover='tag_over("itunes");' onmouseout='tag_out();' style='font-size: 0.8em;cursor: pointer;' id='itunes'>itunes</span> <span onmouseover='tag_over("javascript");' onmouseout='tag_out();' style='font-size: 2.59175946922806em;cursor: pointer;' id='javascript'>javascript</span> <span onmouseover='tag_over("jkl.parsexml");' onmouseout='tag_out();' style='font-size: 0.8em;cursor: pointer;' id='jkl.parsexml'>jkl.parsexml</span> <span onmouseover='tag_over("json");' onmouseout='tag_out();' style='font-size: 1.49314718055995em;cursor: pointer;' id='json'>json</span> <span onmouseover='tag_over("linux");' onmouseout='tag_out();' style='font-size: 0.8em;cursor: pointer;' id='linux'>linux</span> <span onmouseover='tag_over("mac");' onmouseout='tag_out();' style='font-size: 0.8em;cursor: pointer;' id='mac'>mac</span> <span onmouseover='tag_over("mobile");' onmouseout='tag_out();' style='font-size: 1.49314718055995em;cursor: pointer;' id='mobile'>mobile</span> <span onmouseover='tag_over("perl");' onmouseout='tag_out();' style='font-size: 2.59175946922806em;cursor: pointer;' id='perl'>perl</span> <span onmouseover='tag_over("plugin");' onmouseout='tag_out();' style='font-size: 3.69037175789616em;cursor: pointer;' id='plugin'>plugin</span> <span onmouseover='tag_over("rast");' onmouseout='tag_out();' style='font-size: 1.89861228866811em;cursor: pointer;' id='rast'>rast</span> <span onmouseover='tag_over("redirect_permalink");' onmouseout='tag_out();' style='font-size: 0.8em;cursor: pointer;' id='redirect_permalink'>redirect_permalink</span> <span onmouseover='tag_over("relationship");' onmouseout='tag_out();' style='font-size: 1.49314718055995em;cursor: pointer;' id='relationship'>relationship</span> <span onmouseover='tag_over("rendezvous");' onmouseout='tag_out();' style='font-size: 0.8em;cursor: pointer;' id='rendezvous'>rendezvous</span> <span onmouseover='tag_over("rss");' onmouseout='tag_out();' style='font-size: 1.89861228866811em;cursor: pointer;' id='rss'>rss</span> <span onmouseover='tag_over("sack of ajax");' onmouseout='tag_out();' style='font-size: 0.8em;cursor: pointer;' id='sack of ajax'>sack of ajax</span> <span onmouseover='tag_over("safari");' onmouseout='tag_out();' style='font-size: 0.8em;cursor: pointer;' id='safari'>safari</span> <span onmouseover='tag_over("same_topic");' onmouseout='tag_out();' style='font-size: 0.8em;cursor: pointer;' id='same_topic'>same_topic</span> <span onmouseover='tag_over("shelf");' onmouseout='tag_out();' style='font-size: 0.8em;cursor: pointer;' id='shelf'>shelf</span> <span onmouseover='tag_over("sitebar");' onmouseout='tag_out();' style='font-size: 0.8em;cursor: pointer;' id='sitebar'>sitebar</span> <span onmouseover='tag_over("sledge");' onmouseout='tag_out();' style='font-size: 1.89861228866811em;cursor: pointer;' id='sledge'>sledge</span> <span onmouseover='tag_over("tagging");' onmouseout='tag_out();' style='font-size: 3.36494935746154em;cursor: pointer;' id='tagging'>tagging</span> <span onmouseover='tag_over("technorati");' onmouseout='tag_out();' style='font-size: 0.8em;cursor: pointer;' id='technorati'>technorati</span> <span onmouseover='tag_over("template toolkit");' onmouseout='tag_out();' style='font-size: 1.49314718055995em;cursor: pointer;' id='template toolkit'>template toolkit</span> <span onmouseover='tag_over("visualization");' onmouseout='tag_out();' style='font-size: 1.49314718055995em;cursor: pointer;' id='visualization'>visualization</span> <span onmouseover='tag_over("xbel");' onmouseout='tag_out();' style='font-size: 1.49314718055995em;cursor: pointer;' id='xbel'>xbel</span> <span onmouseover='tag_over("xml");' onmouseout='tag_out();' style='font-size: 0.8em;cursor: pointer;' id='xml'>xml</span> <span onmouseover='tag_over("xmlhttprequest");' onmouseout='tag_out();' style='font-size: 2.18629436111989em;cursor: pointer;' id='xmlhttprequest'>xmlhttprequest</span> <span onmouseover='tag_over("ウェブサイト");' onmouseout='tag_out();' style='font-size: 0.8em;cursor: pointer;' id='ウェブサイト'>ウェブサイト</span> <span onmouseover='tag_over("ウェブメール");' onmouseout='tag_out();' style='font-size: 1.49314718055995em;cursor: pointer;' id='ウェブメール'>ウェブメール</span> <span onmouseover='tag_over("オンラインブックマーク");' onmouseout='tag_out();' style='font-size: 0.8em;cursor: pointer;' id='オンラインブックマーク'>オンラインブックマーク</span> <span onmouseover='tag_over("サイドバー");' onmouseout='tag_out();' style='font-size: 0.8em;cursor: pointer;' id='サイドバー'>サイドバー</span> <span onmouseover='tag_over("ソーシャルブックマーク");' onmouseout='tag_out();' style='font-size: 1.89861228866811em;cursor: pointer;' id='ソーシャルブックマーク'>ソーシャルブックマーク</span> <span onmouseover='tag_over("ブログ");' onmouseout='tag_out();' style='font-size: 1.49314718055995em;cursor: pointer;' id='ブログ'>ブログ</span> <span onmouseover='tag_over("モジュール");' onmouseout='tag_out();' style='font-size: 1.49314718055995em;cursor: pointer;' id='モジュール'>モジュール</span> <span onmouseover='tag_over("文字化け");' onmouseout='tag_out();' style='font-size: 0.8em;cursor: pointer;' id='文字化け'>文字化け</span> </p> Wed, 23 Nov 2005 18:32:33 +0900 urn:uuid:74CFF9C8-FB43-11DB-B19E-9689BF6E4193 Gosuke Miyashita http://blog.mizzy.org/articles/2005/11/23/tagRelationVisualization02 web http://blog.mizzy.org/articles/trackback/327