簡単に概要画像のマウスオーバーでポップアップを作成できるimgPreviewが公開されています。



作者のホームページからデモを見ることが出来ます。

imgPreview


以下のコードは<a id=mgpreview-demo>の文字列に概要画像を見せる場合となります。

$('#imgpreview-demo a').imgPreview({
    imgCSS: {
        // Limit preview size:
        height: 200
    },
    onShow: function(link){
        // Animate link:
        $(link).stop().animate({opacity:0.4});
        // Reset image:
        $('img', this).stop().css({opacity:0});
    },
    onLoad: function(){
        // Animate image
        $(this).animate({opacity:1}, 300);
    },
    onHide: function(link){
        // Animate link:
        $(link).stop().animate({opacity:1});
    }
});

ソースコードも非常に軽いですし、非常に使いやすそうな印象です。


超簡単！jQueryを使用した概要画像をポップアップ - imgPreview

40 Icons for your Photo Editing Appにて画像編集アプリに使用できそうな40のフリーアイコンが配布されています。




画像編集アプリだけにきれいなアイコンを使用したいところですよね。
Illustrator CS2とsvgの二つの種類で配布されているので使い勝手も非常に良いです。



うまく使ってきれいなアプリを作りたいものです。


画像編集アプリに使用できそうな40のフリーアイコン - 40 Icons for your Photo Editing App

jQueryを使用してシンプルにポップアップを実現する方法がPop!にて公開されています。



作者のホームページでデモを動かすことが出来ます。

<div class=”pop”><div>中に記述したものが、ポップアップの中身として表示される仕組みのようですね。
この仕組みなら何でも簡単にポップアップさせることが出来そうです。


ポップアップを効果的につかえば、分かりやすく強調できるので、覚えておきたいものです。


Simple is the Best！jQueryでポップアップを表示 - Pop!

自分のサイトをどんな検索ワードで検索すれば上位に表示されるかって気になりますよね？

そんな疑問を解消してくれるブログパーツが検索君です




使い方は簡単です。

まず、自分のURLを入力します。




コードが表示されるので、自分のサイトに貼り付けてください。



貼り付けるとこんな感じ
ただ、何故か今はテキストリンクしか出ませんね・・・。なんでだろう？
今はちゃんと表示されていますね。



大きさは、160px × 160px, 176px × 176px, 200px × 200pxの3つがあるようですね。

データの収集に時間がかかるため、最初は何も表示されないようですね。。。
私のサイトではなにが表示されるのか非常に楽しみです。


検索順位が上位のワードが分かるブログパーツ - 検索君

ウェブ上で塗り絵を楽しめる無料サービスOnline Colorinが公開されています。




使い方は簡単。
好きな絵を選ぶと↓の画面が表示されるので、後は色を塗るだけです。



色を塗り終えた画像はダウンロードしたり、メールに添付したり、そのまま印刷したりすることが出来ます。
ただし、ダウンロードするためには会員登録が必要なようですね。


大人になっても色塗りは楽しいもので、こういうサービスが無料で楽しめるって良いですね。


無料でウェブ上で塗り絵を楽しんじゃおう - Online Coloring