- ベストアンサー
マウスオーバーで画像の一部を切り替え html
- みんなの回答 (1)
- 専門家の回答
質問者が選んだベストアンサー
7つの全ての部分が1枚の画像の中にあるのでしたら、イメージマップで対応することになると思います。 確実なのは、元の画像+切り替わった後の画像(7枚)を作って、javascriptのマウスイベントで処理するといいと思います。 切り替わる物体のみの画像ではなく、各1つずつの物体が切り替わった後の元のサイズの画像が7枚です。 (元の画像、1つめの物体だけが切り替わった画像、2つめの物体だけが切り替わった画像…… 7つめの物体だけが切り替わった画像、という感じで同じサイズの画像が合計8枚) javascriptは自信がないのでコードは書きませんが、onClick, onMouseover, onMouseoutを使うと思います。 例えば、もともとの画像があり、1つめの画像にマウスが乗ると(onMouseover)1つめの画像だけが切り替わった画像に変り、そこからマウスが離れると(onMouseout)元の画像に戻る。クリックすると(onClick)リンク先へ移動。
関連するQ&A
- マウスオーバーして画像を入れ替えたい
YahooのジオシティーズでHPを作成していますが、教えていただきたいことが2つあります。 1.javaスクリプトを使ってマウスオーバー、マウスアウトした時に写真を入替えたいと思っていますが、全くの初心者でどこにタグを入れていいのかわかりません。 どなたか下記URLのページの写真(1)にマウスオーバーした場合に写真(2)に変わり、マウスアウトすると写真(1)に戻るよう、下記URLのソースをすぐに使えるように手直ししていただけませんか?http://sky.geocities.jp/hokuto5131/test.html 2.Yahooのジオシティーズでマウスオーバーして画像を入替えるHPを見てみると、入替える画像のURLはimg.1のようになっていますが、私がYahooのジオシティーズに画像データを送ると上記のURLのソースのように『http://sky.geocities.jp/hokuto5131/~』になってしまいます。なぜでしょうか?またそのページに貼り付けていない画像データをどうやってYahooのジオシティーズのサーバーに送るのでしょうか? 以上よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- リンクのマウスオーバーについて
はじめまして。 現在、ホームページビルダー9でホームページを作成中です。スタイルシートを使って、リンクが挿入されている文字は下線無し、マウスが上に来たときに下線・太字が出るようにしていますが、ページの中の一部分だけは、普段は下線有り、マウスが上に来たときに文字の色が変わるようにしたいです。 このようなことはできるのでしょうか?他のサイトや質問を見てやってみましたが、うまくいきませんでした。 宜しくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- マウスオーバー:一つの画像だけを変えるには?
javascript初心者です。マウスオーバーの記述について教えてください。 3つのリンクボタンがあるのですが、このうち、一つだけ画像が変わるようにしたいと思っています。 ※リンク先は、3つもと同じです。 例:A・B・Cのリンク画像 A~CのどれをオンマウスしてもAの画像だけが変わるようにしたい。 また、マウスアウトした時には、元の画像に戻るようにしたいです。 以上、よろしくお願い致します。
- ベストアンサー
- JavaScript
- マウスオーバーイベントで画像表示
こんにちわ。 JavaScriptについて質問があります。 あるリンクの上にマウスを重ねると、テーブルのある場所にイメージを表示させることはJavaScriptで可能でしょうか? やりたい事としては、リンク部分にマウスを重ねると、そのリンクの説明を記した画像をテーブル中に表示させたいと思ってます。 ネットを探しまくったのですが、参考になりそうなページが無かったので質問してみました。 参考になるページでも構いませんので、知っている方がいらっしゃったら宜しくお願いします。
- ベストアンサー
- JavaScript
- サムネイル画像をマウスオーバーすると写真が切り替わる方法
htmlでホームページを作っているのですが、大きな写真の横に小さなサムネイル画像(前面、背面など角度の違う写真)を載せて、サムネイルをマウスオーバーすると同一のページで大きな写真が切り替わる仕組みを作りたいのですが、やり方がわかりません。 比較的簡単な方法での作り方を教えてください。宜しくお願いします。
- ベストアンサー
- JavaScript
- HPで画像の一部にマウスがのった時に画像を変えたい
現在、自社のホームページの作成を行っております。 そこで、以下のようなことを実現したいのですが、わからないので教えてください。 ----------- | | | ● | | | ----------- 上記のような、四角い枠の中に●がある画像があります。 この●にマウスをのせたときに、この四角い枠と丸の画像全体を変えたいと思っております。 画像上の●以外のとこにマウスをのせても画像は切り替わらないようにしたいと思っております。 四角い画像上にマウスをのせたときにhoverで画像を切り替えるようなことはできるのですが、 画像の一部(●部分)にマウスをのせたときにだけ画像を切り替える方法がわからないので困っております。 教えて頂けないでしょうか。
- ベストアンサー
- HTML
- マウスオーバーで透明の白い幕をかけたい
CSSか画像でやっているのかわかりませんが、 リンク画像をマウスオーバーすると、白い幕が張られる 方法があったら教えてください。CSSで実現したいです。 http://toyota.jp/ トヨタホームページのトップページ左側にそのような 感じの白い透明のスクリーンがあります。 そのような感じで実現したいと思います。 よろしくお願いします。
- ベストアンサー
- HTML
- javascriptでマウスオーバー時に画像を切り替える方法を教えてください
例でいうと、下記のページのような施設案内を作りたくて四苦八苦しております。 http://takasaka.ueda-gakuen.ed.jp/shisetu/index.htm 単純に文字や、画像からのマウスオーバーの画像切り替えはできます。 ただ、施設の地図の中に文字をリンクさせる方法がわからず、困っています。 地図の画像を、文字を含めた部分ごとにスライスして、そこにリンク指定でいいのでしょうか?その際、リンクの指定先を、変化する画像部分にどう指定するかもわかりません。勉強不足なのは百も承知ですが、取り急ぎこのようなものをつくる必要があり、どなたか助けていただけないでしょうか? どうぞ、よろしくお願い致します
- 締切済み
- JavaScript
- あるテキストリンクにマウスオーバーしてる時に画像が
あるテキストリンクにマウスオーバー(マウスのカーソルが乗ってる状態)している時に となりにある画像が替わるように(ロールオーバー時みたいに)したいのですが、可能でしょうか? 画像対画像だったらできるのですが、 テキストリンクでも可能なのでしょうか? こちらの環境は Dream weaver CS5 を使用しております。 宜しくお願い致します。
- ベストアンサー
- HTML
- マウスオーバーでリンク
・フレームページ.html ・メニューページ.html ・メインページ.html ・リンク先ページ.html 上記のようにページを用意しメニューページには画像を設置。 画像はイメージマップを使用し、マウスオーバーでメインページをリンク先ページにリンクし、マウスアウトでメインページに戻る、クリックでリンク先ページ。 というふうにしたいのです。 可能かどうかもわかりませんが、よろしくお願いします。
- ベストアンサー
- JavaScript