grooweb

現在、某メーカーのブランドサイトの案件でコーディングを担当していますが、そこでこんな仕様がありました。

1. サイト内の文言には、商品名が多く記載されている。それを全てアンカーテキストにして、商品詳細ページにリンクさせる。（つまりサイト内導線の強化）
2. そのアンカーテキストの横に「商品詳細ページへ」という画像を配置したいが、そうするとデザイン的に「やかましい」ことになってしまう。
3. なので、アンカーテキストにマウスオーバーした時に画像がポップアップし、その画像もアンカーとする

つまり、結果的にこういうこと↓

で、着手前に考えたのが「jQueryでなんとかなるだろう」ということ。最近jQueryの実装にハマっていて「すげー、何でもできちゃうじゃーん」と盛り上がっていたから。もちろんディレクターには「できまーす」との安請け合い。

そうして都合のいいPluginをサクっと見つけようと「jquery」「マウスオーバー」「ポップアップ」のKWでググってみますと・・・やはり、あるある！　だけど・・・あれ？　ナンカチガウ。。

見つかるのは、リンク先の画像をプレビュー的に表示するものだったり、A要素のtitle値のテキストを表示するものだったり・・

よくお世話になる本家サイトでも見つからず。

そんなこんなで「そうじゃない！シンプルにimg要素をポコっと表示してくれればいいのに！」と焦り始めました。

そして、検索範囲を広げようと、KWを「マウスオーバー」「ポップアップ」「画像」に変更。そこで見つけたのがこのページ。↓

CSSだけで画像のポップアップ

難しく考えすぎていた僕を助けてくれたページです。もうね、やってることがシンプル！そうなんです。考えてみりゃこれでいいんです。フェイドインなどのアニメーションも必要じゃないので、jQueryなんていらないのです。

もちろん実装も簡単でした。この案件はサイト内のほぼ全ページが対象となりますがこれだと簡単に導入できそう。よく考えたらそんなたくさんのページにjQueryのpluginやconfigファイルをインクルードさせるのって大変だよな・・

良い勉強になりました。「難しく考えずにシンプルでラク〜に実装する方法を柔軟な思考で探してみよう」ってことですね。