• 締切済み

マウスオンして画像の別の場所の1部分を変化させる

初めまして。かなり調べたのですが、わからないので質問させて頂きます。 一枚の画像をトップページにしたいです。 その画像の中にメニュー(板に文字が書いてあるようなもの)があって、そこにマウスオンすると、その画像の別の場所が変化する(窓に明かりが灯るなど)ということは出来ますでしょうか。 イメージマップで絵の1部分からリンクを貼る方法はわかります。

みんなの回答

noname#140971
noname#140971
回答No.2

<img class="map" src="・・・" usemap="#navi" hspace="0" ・・・・> <map name="nvai" id="navi"> <area shape=rect coords="654,3,707,34" onMouseOver="update_src(・・・);return true"> ・・・・ </map> function update_src(objects, img) {   objects.src = img.src; } まあ、実際に切り替わりましたが、コードのコピペ段階でかなり消しています。 ですから、大体のイメージだけを受け取って下さい。

YASNSK
質問者

お礼

どうもありがとうございます! やってみます!

全文を見る
すると、全ての回答が全文表示されます。
noname#39970
noname#39970
回答No.1

希望のものだと作り方に工夫が要るができる。 基本的にはid属性やname属性によってタグを識別できるようにして操作する。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • マウスオンで画像を切り替える(パズルのな画像の組み合わせ)

    マウスオンで画像を切り替える(パズルのな画像の組み合わせ) 添付画像のようにパズルのような複数の画像の組み合わせを フラッシュを使わずにマウスオンで切り替える事はできますか? イメージマップでできるのなら一番嬉しいのですが。 参考になりそうなサイトでもかまいませんので教えてください。

    • ベストアンサー
    • HTML
  • マウスオンで画像を切り替える(パズルのな画像の組み合わせ)

    マウスオンで画像を切り替える(パズルのな画像の組み合わせ) 添付画像のようにパズルのような複数の画像の組み合わせを フラッシュを使わずにマウスオンで切り替える事はできますか? イメージマップでできるのなら一番嬉しいのですが。 参考になりそうなサイトでもかまいませんので教えてください。

    • ベストアンサー
    • HTML
  • HP 画像の一部にリンクでその部分のみ画像変化

    ホームページを勉強し始めたものですが、今ヘッダーの画像の一部に”問い合わせ”ボタンのようなのがある状態ですが、マウスオーバーさせるとそのボタンの絵だけを画像変化させるようにするのにつまずいています。自分でやるとどうしてもヘッダーの画像にすこしでもマウスオンするとボタンがすでに変化用の画像に切り替わってしまいます。<AREA>を使ってみてもやはりリンクの部分だけでなく、画像全体に反応してしまいます。周りのホームページ詳しい人に聞いても、分かりませんでした。。。 実際のHTMLは下記の通りです。 <div id="header_pic"> <img border="0" src="../../img/元の画像.png" onMouseOver= "this.src='../../img/画像変化後.png'" onMouseOut="this.src='../../img/元の画像.png'" alt="事務所" width="980" height="130" usemap="#Map" /> <map name="Map"> <area shape="rect" coords="743,40,917,74" href="../contact/index.html" alt="問い合わせ"> </map> 画像の一部にリンクを設置し、その部分に乗った時だけ、その部分のみを画像変化させることはできないのでしょうか? どなたかご教示お願いいたします。

  • HP作成の画像について

    HPの素材となる画像でMenuやTopなどボタンの画像をつくったんですが、 そのボタンなどを置く下地の画像に重ねようとしたところうまくいきませんでした。 そこで色々調べた結果、ボタンや下地の画像を一つの画像にしてクリッカブルマップというものを使った方がいいというのを見ました。 これで一つの画像で複数のリンクに飛ぶことができるということはわかったのですが、 マウスオンなどでTOPならTOPボタンの部分の画像が変わり他のボタンであれば他のボタンの画像が変わるという風にしたい時、一つの画像にまとまっているという状況でこの場合どういう方法をとればいいのでしょうか? 下手な説明でもうしわけありませんが何かいい方法があればどなたかお願いします。

  • オンマウスでクリック後の画像を変化させたままにする方法

    たびたびお世話になります。 以前にも同じような質問をしたのですが・・ 状況が変わり、それとHP作成を進めて行くうちに色々解って来た事もあるので、もう一度質問させて下さい。 フレームで、上/左/右に区切っています。 上と左のフレームにメニューがあり、右のフレームにメインコンテンツがあります。 上のメニューも左のメニューもtarget属性のリンクで右フレームに 表示させるようにしたいと思っています。 まだページを作っているところなのでリンクは飛ばしてないですが。 メニューは文字ではなく、上も左も画像を作ってボタンにしました。 JAVAではなく、HTMLで、オンマウスにより画像を変化させるようにもしてあります。 それを、リンクを張り、クリックした後もオンマウスで変化したままの画像にしたいのです。リンク先を表示している間だけ、です。 タグはこうなっています。 <img alt="" src="image/MENU1.jpg" onmouseover="this.src='image/MENU1_1.jpg'" onmouseout="this.src='image/MENU1.jpg'" style="width: 119px; height: 33px;"> やり方はありますでしょうか? それと、上のフレームからメニューをクリックした後、 左のフレームの中身も変化させる、というのはJAVAですか? また、やり方はあるのでしょうか。 こんな風にやりたいのですが↓ http://www.dreampower-jp.com/index.html

  • javaを使ってマウスオンでの画像切替について

    javaを使って、ある1つの画像にマウスを乗せると、 他の場所にある画像2つが同時に入れ替わるという事を行いたいのですが どうしても上手くいきません。 例えば・・・ ┌─────┐ │◇画像A◇ │ └─────┘ ┌─────┐ │○画像B○ │ └─────┘ ┌─────┐ │☆画像C☆ │ └─────┘ とあるとしたら、 画像Aにマウスを乗せた場合、画像Cと画像Dが 他の画像になるようにしたいのです。 ┌─────┐ │◇画像A◇ │←これにマウスオン └─────┘ ┏━━━━━┓ ┃●画像B● ┃ ┗━━━━━┛←画像Bと画像Cが ┏━━━━━┓←同時に他の画像に変わる ┃★画像C★ ┃ ┗━━━━━┛ 画像Aはマウスを乗せても変化は無いままで、 画像Bと画像Cは異なる画像です。 マウスを画像Aから放したら、元の画像に戻るようにしたいと考えています。 さらに、同ページ内に複数使用したいのです。      ~~~~~~~~~~~~~~~~~~~~~ if (document.images) { var img0 = new Image(); img0.src = "○画像B○"; var img1 = new Image(); img1.src = "●画像B●"; function On(name) { if (document.images) { document.images['ネーム'].src = eval(name + '.src');}} function Off() { if (document.images) { document.images['ネーム'].src = img0.src;}} を応用して、どうにかならないかな…と思ったのですが、 どうにもなりませんでした。 もしかしたら、応用のやり方が間違えているのかもしれません。 あまり詳しくないので・・・。 どこを探してもサンプル等見つからず、困っています。 どなたか教えて下さい。どうぞ宜しくお願いします。

  • 背景固定画像にイメージマップ

    今、ホームページ・ビルダーver6でHPを作ってるんですが、 アイフレームの外に画像を置いて、その画像をイメージマップにしてメニューリンクを張りたいです。 普通に画像の挿入で入れた画像にはイメージマップが出来るんですが、 背景固定で背景として設置した画像にはイメージマップが出来ません。 どうやったら、背景固定で設置した画像にイメージマップでリンクを入れられるんでしょうか?? 是非とも教えて下さい!!!!!

    • ベストアンサー
    • HTML
  • イメージマップで画像変え

    イメージマップで作成したリンクボタンを使って別の場所の画像を変えることはできるのでしょうか? またイメージマップを使っている画像を上の方法で変えることはできますか?

  • マウスオンでのリンク先表示について

    IEで表示したwebページ内でリンクが貼られた文字の上にマウスオンすると リンク先情報がテキストで表示されるにはどのような設定をすればよいのでしょうか? テキストのリンク先情報は、表示されるPCと表示されないPCがありPC側の何らかの設定、ソフトの導入が原因だと思われます。 よろしくお願い致します。

  • 画像にリンクの文字を重ねる方法

    こんにちは。 ブログのトップページの上段に画像を配置して、右上に文字でメニューのようなものを配置したいと思っています。 画像に文字を重ねて、文字をクリックするとジャンプするようなイメージです。 一つの文字を重ねる事はできたのですが、複数の文字を右へ増やしていく事ができません。 画像の右上に | リンク1; | リンク2; | リンク3; | のようなイメージです。 現状のHTMLは以下です。 <a href="飛ばすURL" style="display:block; text-align:right; width:910px; height:100px; background: url(http://画像のURL); no-repeat;">リンク先1;</a> お手数ですがご教授お願いします。