1mouke.com [東京ウェブ制作] - サイト内を検索する  
ドローンの疑問が解決するQ&A【ドローン・アンサー】
FAQ(よくある質問と回答)
Q. マウスを合わせると、絵が変わるロールオーバー、は、単品では、作り方はわかるのですが、このサイトのように、バックの背景があり、単体で、ロールオーバーさせるのは、同様にしたらよいかわかりません。すごくカッコよく見えるので、お教えいただけるとうれしいです。http://www.rakuten.ne.jp/gold/ohiokids/ 

A. 背景ごとロールオーバーしている、と考えると分かりやすいです。たとえば、ロールオーバーでつかう2枚の画像をまったく同一にすれば、マウスカーソルを載せても変化していないように見えますよね。でも実際にはロールオーバーが効いて画像が入れ替わっているのですが、人間の目には同じように(つまり画像が変わっていないように)見えます。ですので、背景も含めて「1つの画像ファイル」として扱うのです。2枚の画像の全体を変えるのではなく、画像の一部分だけを変えたファイルを2つ作ってロールオーバーにすれば、背景は変わらないけれど、太陽の画像部分だけは変わる、ように見せることが可能です。実際には背景ごと入れ替わっているのですが、2枚の背景が同じなのでそれが見えないだけです。なおこのサイトの場合、額縁内の画像は1つではなく、複数の画像をパズルのように組み合わせて作られています。ためしに、画像の一部にマウスカーソルを合わせて右クリックして「画像をコピー」を選んでウェブアートデザイナーに貼り付けてみてください。画像が部分的に切り取られてコピーされます。つまり1枚の画像のように見えて、実際には複数の画像を組み合わせて1つの画像に見せているのです。かなり手が込んで、手間がかかったと思いますが、地道にやれば通常のロールオーバーの機能だけで実現可能なページです。

回答者 大和賢一郎

関連する質問

関連する動画
[V08des04] [デザイン][画像] 画像のロールオーバー効果で視覚的に見せる技術 (V8)
[V08des05] [デザイン][画像] ボタンにロールオーバー効果をつける方法 (V8)

関連する用語

関連する解説

その他の関連情報

FAQ(よくある質問と回答)を検索する

Loading


IT外注のトラブルを解決する
起業家のための、損しないIT外注テクニック
ITエンジニア 大和賢一郎 による技術サポート(ヘルプデスク)です。ウェブ制作に関する情報提供・オンライン個別相談・直接面談・立ち会い・トラブル解決・座学セミナー・スキルアップ個別指導などを無料または有料でご提供いたし ... 続きを読む
東京ウェブ制作 東京HTMLスクール クラウドソーシング 基礎からわかる!HTML超入門 東京ウェブ制作 - 拡販パートナー募集中 フリーランスITエンジニアのエージェント比較 【日本語版】ZendFramework2(ZF2)逆引き辞典 人間ドックの日本最大級口コミサイト「人間ドックサーチ」人間ドックの情報満載 クラウドソーシングの日本最大級口コミサイト【東京ウェブ制作】 あなたの月収が70万円になる 無料WordPress - kyblog(ケーワイブログ) フリーランスITエンジニアの案件検索エンジン「オメガ・サーチ」OMEGA_SEARCHフリーランスITエンジニアのエージェント比較「agentism(エージェント・イズム)」 ドローンの疑問が解決するQ&A【ドローン・アンサー】


今すぐ質問する(無料)
ホームページ作成に関するご質問をお寄せください。無料で回答いたします。回答は よくある質問FAQ にアップされます。今すぐ質問する