ロールオーバーで隣の画像の表示を変える方法は？
- ロールオーバーで隣の画像の表示を変える方法について調べています。特に、以下のサイトのナビゲーションバーの下のメインイメージ部分のような効果を実現したいと考えています。
- ナビゲーションバーの特定のボタンにカーソルを合わせると、隣の画像が切り替わります。また、オンマウス時にはバーにアニメーションが発生し、色が一色に統一されます。
- Flashを使用せず、CSSやJavascriptを使用して左横の画像を変える方法や参考になるサイトや書籍についての情報をお探しです。
- ベストアンサー
ロールオーバーで隣の画像の表示を変えるには。
まずは以下のサイトのナビゲーションバーの下のメインイメージ部分をご覧ください。 http://panasonic.co.jp/excelstaff/ 「事務系派遣・紹介予定派遣」や「エンジニア派遣・紹介予定派遣」にカーソルを合わせると、 左横の画像が変わります。 更にオンマウス時にバーにアニメーションが発生します。 [アニメーション内容] 半分半分だった色が一色に統一されます。 これはFlashによるものだと思いますが、 参考になるサイトや書籍等ございましたら、是非ご教授ください。 なお、Flashは使用せず、つまりアニメーションは使用せず、 CSSやJavascript等を使用して、 左横の画像を変えるやり方も調べています。 併せて、参考になるサイトや書籍等、ご紹介願います。
- mark28
- お礼率64% (44/68)
- Flash
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
どちらの方法も結構簡単ですよ。 ↓flash勉強用サイト http://flashmovie.client.jp/02-tech.html ↓おすすめ書籍 Webデザイン＆スタイルシート逆引き実践ガイドブック 境 祐司 2008年初版で少し古いのですが、Webデザインの勉強の仕方や、デザインの基本なんかも載せられていて面白かったです。 まるまるこのサイトをコピーして作ってみたりしたらいいと思います。
関連するQ&A
- ロールオーバーで切り替えられるのは出来るの画像だけ？
リモートロールオーバーで、サイトの更新情報を表示しようと思っています。 テーブルを組んで、サイトの各コンテンツの名前をオンマウスすると、横のセルに画像が表示されるようにしました。 更新情報だけは、画像が半分のサイズで、もう半分にテキスト（更新情報）を表示したいのです。 （以前はインラインフレームでこの方法を取っていたので、フレームを組んだページを表示させていたので問題なかったのですが、オンマウス表示にしたくて、悩んでいます） ロールオーバーの機能では画像だけしか切り替えが出来ないのでしょうか？ また、テーブルの一つのセルの中に、画像とテキストの２種類をオンマウスで表示させる事は可能でしょうか？ 御回答頂けると嬉しいです。
- ベストアンサー
- JavaScript
- ナビゲーションバーの画像表示について
あるリンクを貼ろうとして、ナビゲーションバーをHPに貼り付けるまではできたのですが、その中の画像がどうしても表示されません。 「まずこのハートのアニメーション（画像１）とタイトル画像（画像２）をご自分のサイト上にコピーしてください。ナビゲーションバーを設置するファイルと同じ場所にコピーしてください。」と書いてあるのですが、私は自分のパソコンのマイピクチャに登録したのですが、登録のフォルダが間違っているのでしょうか？HPの中のファイルのアップロードの所にも画像をアップしたんですが、やはり画像が出ません。 どなたかアドバイスよろしくお願いします。
- ベストアンサー
- ブログ
- オンマウスで画像表示＋表示した画像にリンク
オンマウスで画像表示＋表示した画像にリンク はじめまして。 今サイトを作っています。 ↓このサイトの中央部分に大きな画像とその上に タブが並んでいるのがお分かりになりますでしょうか？（参考サイト） http://www.rakuten.ne.jp/gold/han-world/ タブにふれると大きな画像が変わり、なおかつ大きな画像にもリンクが貼られるというものです。 こういうものとジャバスクリプトで同じ風にしたいです。 （参考サイトはフラッシュで作成されています） タブに触れると大きな画像が変わり、タブにリンクを貼ることはできたのですが 大きな画像にリンクさせるほうほうがよくわかりませんでした。 どこかのタグ素材サイトさんのソースをいじってなんとか触れるようなジャバの超初心者です。 どうぞお力をお貸しください 宜しくお願いいたします！
- ベストアンサー
- JavaScript
- 初心者です。画像の奇麗に切り替わるサイトが作りたいです。
初心者です。画像の奇麗に切り替わるサイトが作りたいです。 dreamweaverで自力でサイトを作っています。 オンマウスでpng画像が切り替わらるのはできたのですが、 メイン画像などが自動に切り替わるようにするにはどうしたらよいかわかりません。 メイン画像は、今のところ、背景画像の上に重なっており、角丸で、PNG形式です、 フラッシュも、javaもまるで初心者の私にはまだ無理でしょうか？ また、長方形で美しくフェードアウトしながら切り替わるJPEGは、 どのようにしたらよいでしょうか？ 参考サイト、書籍などあれば教えていただきたいです。
- ベストアンサー
- JavaScript
- ホームページで画像を動かしたい
こんにちは。 動くホームページを作成したいのですが、作成方法がわかりません。 というより、何で動いているのかがわかりません。 （Flashとか、アニメーションgifとか、cgiとか？？？の分類） 動きとしては、この様に動かしたいです。 http://www.sekisuihouse.co.jp/ (1) 植物を持った手 (2) 女優さん (3) 日本地図 (4) 建物 の様にメインの画像をいろいろな変えて表示させたいのです。 付随してくる文字や、絵は不要です。 この様な動きは何で動いて、どの様にして作るのでしょうか？ お金を掛けることはできませんので、無料ソフトなどご紹介頂けると助かります。 また、よく見かけるような 「New」等の画像が点滅しているだけの物も着けたいです。こちらは無料でDLできるサイトをご紹介いただければ、自力で何とかなりそうです。 動かないホームページは作成済みで、そこに載せたいのです。 どなたかご教授ください。 使用ソフトは「HTML Project2」参考書籍は「できるホームページHTML入門」です。その他、ネット上での皆様のアドバイスです。 宜しくお願いします。
- 締切済み
- その他（インターネット・Webサービス）
- javascriptに関して
オンマウスで画像が大きくなり、そのうえリンクが張れるサンプルのソースを教えてください。 フラッシュなどは使用できずjavascriptで制作しなければなりません。 参考サイトなどもございましたらあわせてご教授下さい。
- ベストアンサー
- その他([技術者向] コンピューター)
- formのsubmitボタンを画像にして、オンマウスで画像を切り替えた
formのsubmitボタンを画像にして、オンマウスで画像を切り替えたい。 HTMLとCSSでHP制作しています。 formのsubmitボタンを自作のボタン画像に変えて、ボタンにマウスを乗せると 画像の色を変えるという事をやりたいと思っています。 例えば赤ボタンをオンマウスで青ボタンにするという感じです。 ネット検索してボタンを画像に変える事は出来ました。 ですが、オンマウスで画像を切り替えるやりかたがよくわかりません。 javascriptを使ったものを見かけたように思うのでこちらで質問してみました。 CSSで普通のリンクボタンの画像切り替えは出来るのですが、 formではそういうわけにはいかないのでしょうか？ javascriptがよくわかならいのですが、そんな私にも出来るでしょうか？ どこか参考サイトがありましたら、紹介して頂けるとありがたいです。 アドバイスよろしくお願い致します。
- ベストアンサー
- JavaScript
- 外部から読み込んだ画像を動かすことはできますか？
FLASHのみでホームページを作ろうと思ってます。 そのトップに使用する画像を定期的に変更したいので、 変更が楽なように画像は外部から読み込ませることにしました。 そこで質問なのですが、外部から読み込んだ画像って、 モーショントゥイーンを使って動かすことは出来ますか？ FLASHを勉強しているというより、HPを作るのに必要なスクリプトを探し出して組み立ててるので・・・ アクションスクリプトの知識はあまりありません。 アニメーションを作るのに特に困らないくらいの知識はあるつもりです。 参考URLでも教えていただけるとありがたいです。 よろしくお願いします。
- ベストアンサー
- Flash
- ボタン画像の下のFlashにポインタを移動するとロールオーバーのまま（IE以外）
例として、三洋電機と三菱電機のサイトをあげます。 http://www.sanyo.co.jp/ http://www.mitsubishielectric.co.jp/index.html これらのサイトは、メニューにボタン画像を使用しており ロールオーバーの効果をもたせています。 そして、ボタン画像のすぐ下にページのメイン要素となるFlashが配置されています。 私もこのような構造のサイトを作っているのですが、 ひとつ解決できない問題があり悩んでいます。 私の作ったサイトでボタン画像にポインタを乗せるとロールオーバーするのですが、 ロールオーバー状態でポインタをFlashに移動させると ボタン画像が通常の画像に戻らずロールオーバーのままなのです。 ポインタをFlashの領域から外すと通常のボタン画像に戻ります。 この現象は、Win IE以外のブラウザ（FirefoxやSafari）で起こります（Macではまだ検証していません）。 しかし、先述の三洋や三菱のサイトでは、 ボタン画像にポインタを乗せロールオーバー状態でポインタをFlashに移動させても、 ボタン画像が通常の画像に戻ります。 ちなみに、私のサイトでは、ボタン画像をJavaScriptの「rollover.js」を、 Flashは「SWFObject」を使って配置しています。 何か解決策をご存知の方いらっしゃいましたら どうぞ宜しくお願いします。
- 締切済み
- HTML
- リロードで違うムービーを出したい
サイトのメイン画像などをリロードするたびに ランダムに違う画像にするというのをよく見かけるのですが それをFLASHで表現することは可能でしょうか？ 800px × 650pxのFLASHアニメーションを作成する予定なのですが、 3種類のFLASHアニメーションを作成してページをリロードするたびに ランダムに3種類のアニメーションを呼び出すということは可能なのでしょうか？ どなたかお知恵を拝借できませんでしょうか。 よろしくお願いします！
- ベストアンサー
- Flash
お礼
ご返答ありがとうございます。 特にhttp://flashmovie.client.jp/02-tech.htmlから発見した。 http://www2.netwave.or.jp/~light/index.htmlですが、 とてもためになりそうです。