Q. |
マウスを合わせると、絵が変わるロールオーバー、は、単品では、作り方はわかるのですが、このサイトのように、バックの背景があり、単体で、ロールオーバーさせるのは、同様にしたらよいかわかりません。すごくカッコよく見えるので、お教えいただけるとうれしいです。http://www.rakuten.ne.jp/gold/ohiokids/ |
A. |
背景ごとロールオーバーしている、と考えると分かりやすいです。たとえば、ロールオーバーでつかう2枚の画像をまったく同一にすれば、マウスカーソルを載せても変化していないように見えますよね。でも実際にはロールオーバーが効いて画像が入れ替わっているのですが、人間の目には同じように(つまり画像が変わっていないように)見えます。ですので、背景も含めて「1つの画像ファイル」として扱うのです。2枚の画像の全体を変えるのではなく、画像の一部分だけを変えたファイルを2つ作ってロールオーバーにすれば、背景は変わらないけれど、太陽の画像部分だけは変わる、ように見せることが可能です。実際には背景ごと入れ替わっているのですが、2枚の背景が同じなのでそれが見えないだけです。なおこのサイトの場合、額縁内の画像は1つではなく、複数の画像をパズルのように組み合わせて作られています。ためしに、画像の一部にマウスカーソルを合わせて右クリックして「画像をコピー」を選んでウェブアートデザイナーに貼り付けてみてください。画像が部分的に切り取られてコピーされます。つまり1枚の画像のように見えて、実際には複数の画像を組み合わせて1つの画像に見せているのです。かなり手が込んで、手間がかかったと思いますが、地道にやれば通常のロールオーバーの機能だけで実現可能なページです。
回答者 大和賢一郎 |
関連する質問
関連する動画
[V08des04] [デザイン][画像] 画像のロールオーバー効果で視覚的に見せる技術 (V8) [V08des05] [デザイン][画像] ボタンにロールオーバー効果をつける方法 (V8)
関連する用語
関連する解説
その他の関連情報
|
|
FAQ(よくある質問と回答)を検索する
Loading
|