ロールオーバーの作成方法：物欲日記：SSブログ

	ブログをはじめるログイン

ロールオーバーの作成方法　[雑感・その他] [編集]

本文表示後にマウスポインタを乗せると尻羽が動きます

当ブログでも時々お遊び的に使っている「ロールオーバー」の作成方法についてご紹介します。

画像を使ったロールオーバーを組み込むと、動かない写真にもちょっとした変化を付けられます。用意するのは2枚の画像。Javaスクリプトを埋め込みますので、リッチテキストエディッタは「使用しない」にしてください。

まずは2種類の画像をアップロードします。そして、試しに画像を選択してファイル名を確認してください。今回のサンプルの場合、最初に表示したい画像が ojiro_a.jpg マウスオーバー時に表示したい画像が ojiro_b-77007.jpg となりました。

エディッタで次の命令を全て貼り付けてください。

↓ ここから
<script language="JavaScript" type="text/javascript">
// イメージ配列
var SwImg1; SwImg1 = new Array;

// 画像先読み ImgPreload('imgタグのid', '最初に表示する画像', 'マウスオーバー時の画像')
ImgPreload('ChImg', '/_images/blog/_e0d/mitsunari/ojiro_a.jpg', '/_images/blog/_e0d/mitsunari/ojiro_b-77007.jpg');

// プリロード
function ImgPreload() {
var N = ImgPreload.arguments[0];
SwImg1[N] = new Image();
SwImg1[N][0] = new Image();
SwImg1[N][0].src = ImgPreload.arguments[1];
SwImg1[N][1] = new Image();
SwImg1[N][1].src = ImgPreload.arguments[2];
}

// ロールオーバー
function ImgChenge() {
var ID = ImgChenge.arguments[0];
var N = ImgChenge.arguments[1];
document.images[ID].src = SwImg1[ID][N].src;
}
</script>
<a href="http://mitsunari.sakura.ne.jp/img/080309_ojirobitaki9.jpg" target="_blank" onmouseout="ImgChenge('ChImg', 0)" onmouseover="ImgChenge('ChImg', 1)">
<img src="/_images/blog/_e0d/mitsunari/ojiro_a.jpg" width="660" height="440" name="ChImg" id="ChImg" /></a>
↑ ここまで

水色の部分は、実際の画像のファイルパスに合わせて書き換えます。（数字は画像サイズです）
赤色の部分は、クリックされたら表示させる画像ですが、必要なければこの部分をそっくり削除してください。

以上で命令の埋め込みと修正が終了しました。続けてコメントを入力するなりして保存すれば記事の完成です。リッチテキストエディッタで本文を作成してから一旦保存し、リッチテキストエディッタを「使用しない」に設定してから、このスクリプトを適当な位置に埋め込んでも構いません。

2008-04-02 12:30 nice!(56) コメント(39) トラックバック(0)
共通テーマ：趣味・カルチャー

nice! 56

勉強させていただきました。　(._.)
しかしほとんど三脚を使わないので構図が変わりすぎてしまいます～　(; ;)

by ガンバルおやじ (2008-04-02 12:44)

わーい。この記事待ってたんですよー
(^_^)
今度よい素材が撮れたらやってみますね。
by ジョルノ飛曹長 (2008-04-02 12:55)

へえ～　　ロールオーバーってのですか・・
しっぽが動く、別の位置へ動くとか遊べそうですね。
三脚使って準備しないとダメですね。

by イチロー (2008-04-02 16:35)

尾羽ひこひこがおもしろくて繰り返しちゃいますね～＾＾

by ころくま (2008-04-02 18:06)

シッポがかわいいゾ〜
by 青いヒゲ (2008-04-02 18:50)

オジロビタキはやっぱり尻尾がカワイイなぁ＾＾

by Decole (2008-04-02 18:59)

平面で動かない画像に、更に面白味が加えられて
BLOGも一層楽しくなりますね。
尾羽が動くと可愛いです。私の食い倒れネタでも
何か使えないかな～（笑）
（SIGMA150mmMACRO F2.8一緒にハモリませんか？
重さだけ我慢したら愛着が湧きました）
by chichiの母 (2008-04-02 19:52)

昨日の朝、初めてジョウビタキのつがいを見ました!!
とても綺麗でした!!
カメラを持ちに行っている間にどこかへ・・・・・・・・次回は何とか撮りたいです!!
by TOU (2008-04-02 20:34)

凄いですねぇ～！　小鳥の頭が動きませんね！　三脚が絶対必要なんでしょうね。　HTMLでしたっけ？　勉強したいと思っています。
やってみて、不具合が起きたら怖そうです（笑）　
by m-kurata (2008-04-02 20:48)

よい写真が２枚も準備できない～。
by こけもも： (2008-04-02 20:51)

おぉーーーーーーーーーー
これは凄い！
D3の連写との相性も良いかもです＾＾
by ぴんぽん (2008-04-02 22:16)

タグの技術もさることながら、楽しいネタがnice!ですね♪
そうそうマネできませんねぇ
by まるよ (2008-04-02 22:17)

よし！
by ゴーパ1号 (2008-04-02 23:21)

タグの使い方が難しく、いつも試行錯誤です。
今日のお写真、尾っぽが立つのですね。
うふふふ。
by michan (2008-04-03 00:11)

おはようございます。

家庭教師が必要ですね！！
私には・・・・
by BPノスタルジックカーショー (2008-04-03 07:03)

尻尾が動きますね～。
でも爺にこの作業は無理です。
by 旅爺さん (2008-04-03 09:22)

婆にも無理です。↑
by YOUR-MOM (2008-04-03 09:24)

面白いなぁ

by gillman (2008-04-03 09:29)

みつなりさんのブログはいろんなことが勉強できます(*^^*)
今度試してみよう♪
その前に位置が変わらないよう三脚が必要ですね(^▽^;)
by ナーリー (2008-04-03 17:44)

わぁ～こんなこともできちゃうんですね♪
試せる画像があるかなぁ・・うずうずしてきた～♡＾＾
by kimiko (2008-04-03 17:48)

面白くて何度も繰り返して見ちゃいますね。
by かわもっちゃん (2008-04-03 18:58)

かわいい！！
ロールオーバー、今度試してみようかな〜
ためになります＾＾
by asahama (2008-04-03 21:43)

難しそうですぅ〜^^;
なんだかnice!を何度押しても登録されなくて(-.-;)
by kone (2008-04-03 23:41)

後でゆっくり読もう(^_-)-☆
by ハギマシコ (2008-04-04 01:51)

面白いですね、いつまでもやっちゃいます（笑
by ヨモギ団子 (2008-04-04 09:18)

みなさん、nice! & コメントありがとうございます。

＞ガンバルおやじさん
たまには三脚使ってじっくり撮りましょう＾＾

＞ジョルノ飛曹長さん
CGでアニメGIFの方が面白そうですが＾＾

＞イチローさん
本当はビデオで撮れば良いのですが＾＾

＞ころくまさん
ビデオに残しておけばよかったです。

＞青いヒゲさん
かわいいですよね～＾＾

＞Decole さん
また来年も会えるかな。

＞chichiの母さん
食前食後の写真なんかどうでしょう？

＞TOU さん
こちらではもう見れないです。まだ鳴き声は聞こえますが。

＞m-kurata さん
三脚を使っていて微妙にブレているのが分かります。

＞こけもも：さん
カワホバでお願いします＾＾

＞ぴんぽんさん
大砲導入お願いします＾＾

＞まるよさん
わたしも素人なので結構試行錯誤してました。

＞ゴーパ1号さん
おっ！

＞michan さん
この尾羽が特徴的な鳥ですね。

＞BPノスタルジックカーショーさん
これを貼り付けてちょっといじるだけなので簡単ですよ！

＞旅爺さん
そんなことないですよ～

＞YOUR-MOM さん
挑戦してみてください＾＾

＞gillman さん
おもしろいでしょ＾＾

＞ナーリーさん
三脚は一つあったほうがいいですよ～

＞kimiko さん
完成したら見せてくださいね＾＾

＞かわもっちゃんさん
自分でも面白くて繰り返してしまいます＾＾

＞asahama さん
ネタ切れの際はどうぞ＾＾

＞kone さん
簡単ですよ～

＞ハギマシコさん
分からないことがあれば聞いてくださいね。

＞ヨモギ団子さん
姫の画像で遊んでみてください＾＾

by みつなり (2008-04-04 10:36)