JAVASCRIPTアーカイブ: 大阪 ホームページ制作 Signature! - STUDY STYLE -

2009年11月 6日

IE6用透過png対策 DD_belatedPNG(背景画像リピート可)

WEBデザインをする上で非常に自由度を広げてくれるpng形式の画像。

jpgと違い、アルファチャンネルを利用した透明や半透明の表現を可能としているため、複雑な背景の上に切り抜き文字や画像を配置する場合や、半透明を活かしたレイヤーデザインなど飛躍的にデザイン、レイアウトの幅が広がります。

が、このpng、比較的新しい画像形式のため、IE6ではサポートされておらず透明部分がグレーになってしまいます(IE7以降、その他、firefoxなどのモダンブラウザでは問題ありません)。

まだまだ、最近の統計でもIE6のユーザーは全体の1~2割はいると思われるのでこれを無視するわけにもいきません。

そこで様々な「対IE6用のPNG対策」が用意されています。

様々な方法を探して使ってみましたが、使い勝手が良さそうだったのが

「DD_belatedPNG」
ダウンロード先↓
Drew Diller's blog

JAVASCRIPTファイルなのですが、特長としては
「背景の繰り返し(バックグラウンドリピート)に対応」
「指定が簡単」
「a要素のロールオーバーにも対応・・・ただしCSSでの指定に限る)」
なことです。

細かい使い方等は
ITキヲスク | IE6用透過png対応策、DD_belatedPNGの使用法と注意点
に書いてくださっています。

ヘッダーに下記を読み込み。適応させたい「タグ」「クラス」「ID」を指定します。
下記でいうと「img」と「class=png_bg」に指定が効いています。

<!--[if IE 6]>
    <script src="○○○/DD_belatedPNG.js"></script>
    <script>
        DD_belatedPNG.fix('img, .png_bg');
    </script>
<![endif]-->
と非常に簡単。

その他でpng対策として手軽で優れているのが

「alphafilter.js」
アルファ画像を扱うalphafilter.jsライブラリ[to-R]

です。

これもJAVASCRIPTファイルなのですが、特長としては
「指定が簡単。要素に(class="alphafilter")とつけるだけ」
「a要素のロールオーバーにも対応・・・ただしimg要素の置換指定に限る)」
「背景の繰り返しに未対応」
なことです。

ケース バイ ケースで使い分けですね。
ただ、alphafilter.jsのほうは、とあるサイト制作に使ったのですがa要素の挙動が若干不安定です。

で、これらが正しく動作するのかどうか?を調べるのに必須が

「multiple ie」
http://tredosoft.com/Multiple_IE

です。IE6がない環境下でも仮想でIE6を立ち上げて検証することができます。
ただし、このMultipleIEはVISTAでは動作しません。xpでないと立ち上がりません。

似た趣旨のソフトで「スタンドアローンIE6」がありますが、「png関連の検証」は仕様により、できません。あくまで「CSS関連の挙動を検証」する事しかできないようです。

2009年10月17日

リンク先のサムネイルをプレビュー表示させるjavascript

ツールチップ形式でリンク先やサムネイル画像を拡大表示させることができると、閲覧者はページ遷移なしにリンク先や画像のイメージをつかむことができます。

クリックなしにイメージをつかめるというのは、結果的にクリックへ誘導させることができる可能性もあります。

そこで見つけたのが、リンクや縮小画像にウスオーバーするとそのリンク先のサイトの画像サムネイルや拡大画像ががツールチップのようにポップアップするjQueryのプラグインです。



拡大したときの画像や、リンク先のスクリーンショットの画像は自分で用意しなければなりません。

画像はともかくリンク先のスクリーンショットまで用意するのは面倒です。

そこで、無料のサイトのスクリーンショットのサムネイル作成サイトを利用して連携させると、もっと手軽に導入することができます。

サムネイル作成サービス HeartRails Capture

などを使います。使い方詳細はサイトを見て欲しいのですが、このプラグインで表示させる画像は「rel="ファイル名"」という記述を<a>要素にいれます。

そこで、

rel="http://capture.heartrails.com/180x150(縦横サイズ)/?見せたいリンク先URL"

というような記述を入れると、わざわざスクリーンショットを撮らなくても、サムネイル画像を表示させることができます。
上記サイトは英語なので日本語で解説しているサイトを併記します。


ツールチップとして、デザインもシンプルですし、かなり有効に使えるのではないかと思います。

2009年8月 2日

multibox for mootools1.2 (part2)

この前、multiboxのmootools1.2対応バージョンをメモ書きしましたが、記述方法が異なるなど本家を結構カスタマイズした感じでした。

こっちは完全に本家「phatfusion」に忠実にバージョンアップしたもののようです。

Multibox,overlay for MooTools 1.2

ので、ファイルを入れ替えるだけで済むようです。

試してないのでバグなしで動くかはわかりません。

なんにせよ今から設置するならコチラのバージョンを使った方が機能的にも優れていて不要なものは設定を「false」にすることで省けるので、オススメです。

2009年7月30日

multibox for mootools1.2

mootoolsライブラリを使用した画像ギャラリーのLightbox亜種のMultibox。

動作が滑らかで、ボタン等のデザイン、黒背景など一番気に入っているのですが、対応バージョンがmootools1.1だったため同一ページ内で1.2を使ったスクリプトと併用できない悩みがあったのですが。。。

mootools1.2に対応したmultibox2が開発されたようです。

MultiBox - for MooTools 1.2 の設置方法

開発元 http://www.liamsmart.co.uk/Downloads/

改良もされているようで、同一ページ内に設置するとあれもこれも同一ギャラリーにグルーピングされていましたが、グループを分けることができるようになっています。

あと、様々な機能が付加されていますが、設置時の設定で本家の「multibox http://www.phatfusion.net/multibox/」と同じような機能、見た目で使うことができます。

<追記>
制作時に使いました。
ご参考まで。

http://www.sister-pl.com/sister_gallery.html

続きを読む "multibox for mootools1.2"