ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > スポンサー広告 > title - ロールオーバーTOP > 大きな疑問コーナー > title - ロールオーバー

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ

ロールオーバー

ロールオーバーとはマウスのカーソルを画像の上に置くと、画像を切り替える機能の事を言います。メニューなどのリンクによく使われてるので皆さんも機能の名前を知らないけど見たことはあるのではないでしょうか?


一度も見たことがなくてよくわからない人のために見本を作ってみました。

ロールオーバーのつくり方

1.まずマウスを乗せる前の画像と乗せたあとの画像の2枚を用意します。自分で画像をつくれない人はロールオーバー 素材で検索するとたくさんのフリー素材サイトがあるのでお好みの画像を探してください。

2.次に、ファイルアップロードを使って画像をアップします。その時に画像ファイルのアドレス名を覚えておきます。(アドレス名はアップした時に表示を押すなどするとわかります。)

3.アップできたら画像を表示したい所に・・・
<img src="http://blog数字.fc2.com/最初の画像/.jpg" onMouseover="this.src='http://blog数字.fc2.com/マウスオンの画像/.jpg'" onMouseout="this.src='http://blog数字.fc2.com/最初の画像/.jpg'">
を記入します。小さいので間違えて「"」や「'」を消さないで下さい。
赤字の方に先ほど覚えたマウスが乗る前の画像ファイルのアドレスを記入して、青字の方にマウスが乗った時の画像ファイルのアドレスを記入して下さい。

これでロールオーバーの出来上がりです。

ロールオーバオーでリンクを作りたい時はこの様にします。
<A href="リンク先のアドレス">
<img src="http://blog数字.fc2.com/最初の画像/.jpg" onMouseover="this.src='http://blog数字.fc2.com/マウスオンの画像/.jpg'" onMouseout="this.src='http://blog数字.fc2.com/最初の画像/.jpg'">

ロールオーバーの色々な見本

マウスオンの画像にgifアニメを使うと、さらに動きがある物がつくれておもしろいですよね。



メニューをロールオーバーで作るとおしゃれなメニューが作れます。






◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
メニューに使うロールオーバーで上の(カーソルを合わせると開くやつ)
を使いたいなと思ってるんですが、どこにあるんですか?
ジョーさんへ
「素材屋 千客万来」さんにあります。 http://www.h5.dion.ne.jp/~totem/materialside/button.html
わざわざありがとうございます!
親切な解説でわかりやすく、お世話になっています。

それにしても初心者には最高の場所ですよ。

テーブルタグ自動作成を活用させてもらいますwb
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/596-7bc7b67e   

Template Designed by DW99

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。