jQuery を利用して、画像にマウスオーバーすることで見出しをスライド表示するスクリプトを仕事で使う機会があったので、より便利にする改造も含めてご紹介します。
jQueryで画像にマウスオーバーした際見出しをスライド表示する | CSS Lecture

デモページでは様々なバリエーションがありますが、今回仕事で使ったのは2項目の「マウスオーバー時に残りを表示」というもの。
JavaScript は

$(‘.boxgrid.captionfull’).hover(function(){
$(“.cover”, this).stop().animate({top:’220px’},{queue:false,duration:160});
}, function() {
$(“.cover”, this).stop().animate({top:’350px’},{queue:false,duration:160});
})

と書かれており、2行目の

$(“.cover”, this).stop().animate({top:’220px’},{queue:false,duration:160});

の部分はマウスオーバー時の見出しブロックの表示位置（高さ）、4行目の

$(“.cover”, this).stop().animate({top:’350px’},{queue:false,duration:160});

はマウスオーバー解除時のブロックの表示位置（高さ）になります。

ちなみにこのサンプルはミスだと思いますが、初回表示時には見出しの1行目が見えていて、マウスオーバーを解除すると見出しが全て隠れるようになっています。ここの top: '350px' の部分を CSS で設定されている top プロパティの数値を入れてあげると、マウスオーバーを解除しても1行目の見出しを残すことが出来ます。

このスクリプトを利用していて問題になる箇所としては、マウスオーバー時の見出しブロックの表示位置を直接数値で指定しているため、見出しの下の説明文の長さによっていちいち数値を指定しなおさなければならないという欠点があります。そこでロールオーバー時の表示位置を jQuery で計算させることにしました。

jQuery では height() プロパティで指定したブロックの高さを取得することが出来ます。デモでは見出しと説明文を入れているブロックに cover クラスを指定しており、$(".cover", this).height() でイベントの発生したボックスの中にある cover クラスが指定されたボックスの高さを取得します。あとは画像の高さから取得したボックスの高さを引けば、自動的にボックスの高さに合わせた位置にスライドさせることが出来ます。

デモスクリプトの2行目は次のようになります。

$(“.cover”, this).stop().animate({top: 300 – $(“.cover”, this).height()},{queue:false,duration:160});

ここでは画像の高さを直接指定していますが、これも jQuery を使って自動的に取得すればより汎用性の高いものに出来るのではないでしょうか。

日産自動車が公開しているゼロ・エミッションのプロモーションサイト「THE PLANET ZERO」。フル Flash の Web サイトでゲームコンテンツもあるのですが、これが Android タブレット（ICONIA A500、ASUS TF101）でもとても快適に動作しました。

THE PLANET ZERO

当然ですが PC ではマウスを使って操作をすることになりますが、タブレットのタッチパネル操作でも違和感のないように作られています。むしろタブレットでの操作の方がしっくりくるくらいでした。

3Dの描画などを多用していて初代プレイステーションを彷彿とさせるクオリティが、ブラウザと Flash プラグインを通しても快適に動くことに Flash はまだまだやれるという底力を感じさせられます。Android タブレットを持っている人は一度見に行ってみて下さい。

Pogoplug を導入して3日経ちました。

オンラインストレージにしているのは MacBookPro 本体と、それに繋いでいる外付けハードディスクたちで、これらは Pogoplug の設定画面で簡単に設定することができました。MacOS X ではシステム環境設定から Pogoplug の設定画面に行くことができます。
続きを読む

PCのハードディスクを簡単にクラウド化できる Pogoplug Premium Software で販売が開始されたので、早速購入してみました。

更に TF101 を購入した際についてきた ASUS Web Storage のオンラインバックアップも加えて完璧な体勢が整いましたよ！
続きを読む

Facebookページの需要がどんどん増えているようですが、どうやって作るかがしっかりと紹介されているサイトはなかなか見付けられませんでした。しかしつい先日 @IT で「WordPressでFacebookページを作ろう」という連載が始まり、開発者登録などの初期段階での手続きから順番に説明してくれていてとても参考になるので紹介したいと思います。
続きを読む