2009 Sep 25

いままでのロールオーバーイメージの猫的なやり方は、
CSSを用いたをずっと書いてたのですけど、
ちょっとソースが強引な上に、
閲覧者側の回線・PCスペック等に依存しちゃうので...

設置が楽で、なにか良いものないかにゃ〜

あー設置が楽ってことなら、Dreamweaver等のソフトを使えば良いジャン!
って事になりそうなんですけど、余計なソースが多いので邪道だな〜論外(;´ρ`)

まー捜してみたら外部プログラムファイルを読み込ませて、
ロールオーバ前と後の画像を用意するだけでOKっていうプログラムをみつけたので、自分のメモ用にカキカキ。
ですので、興味のない方は見なかった事にしてください(/ω\)

参考サイト様:
◎Sapphirus.Biz 簡単ロールオーバーイメージ - Javaスクリプト
http://www.sapphirus.biz/javascript/rollover/

こちらのページより「rollover.zip」をダウンロードして
『rollover.js』のみ使用します。

設置手順は、

(1)『rollover.js』の任意のフォルダに設置。(今回は、jsフォルダ)
HTMLファイル側のヘッダー箇所に以下の構文を入力し外部ファイルとして読み出す。

<script src="ドメイン名/js/rollover.js" type="text/javascript"></script>

(2)ロールオーバーさせたい画像をロールオーバ前と後の2種類用意する。
それで、ファイル名を

◎ロールオーバー前の画像 → ○○○_off.jpg
◎ロールオーバー後の画像 → ○○○_over.jpg

という風に、ロールオーバー前なら「_off」、
ロールオーバー後なら「_over」を名称に加え、フォルダ内に設置。
※画像ファイルの拡張子はどれでもOK

(3)HTML上にロールオーバー前の画像をimgタグで呼び出せば完了!

画像に関しては、違うフォルダでも読み込んで来るので、
いくつも違うパターンのメニューを用意するときは、名称に注意してください。

『rollover.js』さえ読み込ませておけば、あとは画像を用意するだけなので、
すっごい楽じゃないでしょうか?(=ω=)

気になる読み込みの速度とかは、まだ検証してないので、にんともかんともですが(´ー`;)
たくさんロールオーバーイメージを設置しないといけない!
というときは、利用してみてはどうでしょうか。

TrackBack

このエントリーのトラックバックURL; http://mtw.cocotte.jp/cgi-bin/mt4/mt-tb.cgi/462
このエントリーのリンクURL: http://mtw.cocotte.jp/blog/diary/html/2009/09/25-2201.php

Comment