ロール・オーバー

ときどき見かけます「写真のロール・オーバー」の方法について尋ねられましたので、調べてみたことを書き留めておきます。

【ロール・オーバーの例】（写真の上にマウス・カーソルを持っていくと別の写真に替わります。）



尋ねられた方は「リッチテキストエディタ」で記事を編集していますので、その画面で説明します。

まず使う写真を2枚貼り付けます。

上部に並んでいます編集ボタンの中から、右から2つめの「HTML」ボタンをクリックして、ソースを出します。

写真１と写真２のソースを確認します。



次のコードをコピー・貼り付けして、「写真１」と「写真２」の部分を実際のソースに置き換えます。（「写真１」は2ヶ所です。）

<img src="写真１" onMouseover="this.src='写真２'" onMouseout="this.src='写真１'">

置き換えましたら、元の写真のソースを消します。



次に、左下にある「挿入」ボタンをクリックすると、編集画面には写真１だけが表示された状態になりますが、これで完成です。

画面だけの説明では分かりにくいと思いますので、今度行ったときに一緒にやってみましょう。

先ずは報告まで。

本日の練習："The Art of the Lute in Renaissance Italy Volume II : Dances"のNo.11 "Padoana alla francese"、No.12 "Padoana belissima"（以上Capirola）とFrancesco da MilanoのFantasia（Ness #82）。

（注2009.1.4.）確かめたいことがありましたので下書きにしていましたが、確認できましたので本日公開します。

コメント 18

xml_xslさん
niceありがとうございます♪
by nyankome (2009-01-05 00:18) 

うわ～。こんなわざが出来るようになるとブログももっと楽しくなるな～。素晴らしいです。
by かあか (2009-01-05 11:35) 

かあかさん
nice&コメントありがとうございます♪
是非挑戦してみて下さい。
一層楽しいblogになりますね。
by nyankome (2009-01-05 20:39) 

菊地一也さん
niceありがとうございます♪
by nyankome (2009-01-05 22:19) 

どうやってやるのかな、とおもっていましたが、、、私にはむずそう。。（・_・　
by duke (2009-01-06 00:33) 

dukeさん
nice&コメントありがとうございます♪
スキンを触るよりは簡単なのですが、説明するって難しいですね。(^_^;)
by nyankome (2009-01-06 00:39) 

私も暇な日に挑戦してみます！！
ありがとうございます！
by Cecilia (2009-01-06 10:37) 

Ceciliaさん
nice&コメントありがとうございます♪
一度やってみれば難しくはないと思います。
是非お試し下さい。
by nyankome (2009-01-06 23:07) 

ホムペ作りに熱中していた頃､この機能を多用してました。
やりすぎるとうるさいんですけどね。(^_^;)
by Papalin (2009-01-10 09:02) 

Papalinさん
nice&コメントありがとうございます♪
>ホムペ作り
やり過ぎると重くなりますし、見て頂く方にも「うるさい」ですね。
by nyankome (2009-01-10 10:16) 

初めまして。
父ちゃんさんのところから
おじゃましました。
私も方法が気になっていたので
勉強させて頂きました。
ありがとうございました。
by sou (2009-06-03 13:14) 

ｓｏｕさん
nice&コメントありがとうございます♪
割と簡単にできるのですが、説明は分かりにくくなかったでしょうか？
効果的に使えば面白いですね。
お役に立ててよかったです。
by nyankome (2009-06-03 22:07) 

私が「ロールオーバーが出来な～い」とブログで叫んでいたら
父ちゃんさんがこちらを紹介してくれました。
お陰様で、あんな悩んでたことが、即出来ました。
感激です。丁寧な説明ありがとうございます。
むちゃくちゃ嬉しいです。感謝です！
by がり (2009-06-13 15:23) 

がりさん
nice&コメントありがとうございます♪
ご丁寧にありがとうございます。
お役に立てて何よりです。
by nyankome (2009-06-13 15:58) 

がりさんに教えていただいて、私も参考にさせていただき、
挑戦したら出来ました。
ちょっと迷った部分もあったけど、ご説明はとっても分かりやすかったです。
ありがとうございました！
by hana* (2009-06-16 01:43) 

hana*さん
nice&コメントありがとうございます♪
もともとある人に尋ねられて書いた記事ですが、お役に立てて嬉しいです。
記事の紹介、ありがとうございます。
by nyankome (2009-06-16 05:52) 

はじめまして♪
すごく分かりやすい説明でロールオーバー、成功しました（*^_^*）
有難うございます☆


by La_vbl_kok (2009-06-24 23:00) 

La_vbl_kokさん
ご成功おめでとうございます。
リッチ・テキスト・エディタを使われていない方には、分かりにくい説明だったのでは、と思います。
でも、お役に立てて嬉しいです。
by nyankome (2009-06-24 23:28)