• ベストアンサー

画像の重なりの順序を代える方法を教えてください。

画像の重なりの順序を代える方法を教えてください。 HTML <IMGで複数の画像を表示し、重なった部分があります。 INPUTボタンなどでJavaScriptを起動し、JavaScriptで背面にある画像を前面に表示 する方法を教えてください。 画像1：背面 画像2：前面 　　↓ ボタンAをクリック 　　↓ 画像1：前面 画像2：背面 　　↓ ボタンBをクリック 　　↓ 画像1：背面 画像2：前面 サンプルなどがあれば助かります。 よろしくお願いいたします。

質問者が選んだベストアンサー

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

要素のstyle属性のzIndex値を変えると重なりの順序が変わります。 (zIndex値が大きなものほど前面に表示されます。) <img id="img1" src="img1.jpg" alt="画像1" style="z-index:200"> <img id="img2" src="img2.jpg" alt="画像2" style="z-index:100"> <button onclick="document.getElementById("img1").style.zIndex=document.getElementById("img2").style.zIndex+1;">ボタンA</button> <button onclick="document.getElementById("img2").style.zIndex=document.getElementById("img1").style.zIndex+1;">ボタンB</button> でどうでしょう

watton2007
質問者

お礼

本当に助かりました ばっちりうまくいきました。 ありがとうございます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • UIImageViewの重なり順序について

    Objective-C、iPhone 開発です。 現在、StoryBoardを使用して、一画面の簡単なプログラムを作成しています。 StoryBoard上で貼付けた、複数画像(UIImaveView)の重なり順序を変更したいのですが どこを操作すれば良いのか分からずにおります、、、 この状態のUIImageView、下記のどちらかで 重なり順序を制御することは可能なのでしょうか？ ・Xcode上で重なり順序を再設定する ・プログラム実行時に再設定する ご存知の方おりましたらご教授ください。 （参考URLなどでも結構です） 宜しくお願いします。

  • Windows7のペイントで、複数の画像の重なりの順序を設定するにはど

    Windows7のペイントで、複数の画像の重なりの順序を設定するにはどうするのですか？ 万一、どうでもいいような新機能が増えて、必要な機能が消えたのでは意味がありませんけれど・・。

  • ドラッグできる画像

    こんにちは。２回目の質問です。 またJavaScriptについての質問なんですが、 HTMLページに画像が複数あって、マウスで自由にドラッグして好きな場所に配置したいです。これはHPで解説してくれているページを見つけたんですが、ちょっと違います。 どこが違うかというと、画像の重なり具合が調節できないこと。参考までにつぎのHPをみてください。（注：ポップアップの広告が出ます） http://holden.hp.infoseek.co.jp/sample/c_img5.html ここのお地蔵さんは、招き猫の上に表示することはできません。ただしドラッグしている間は別ですが。 このお地蔵さんと招き猫のようにドラッグで移動できて、さらに画像の上下（前後）をマウスクリックで変えるようにするにはどうしたらいいでしょうか? また２つ以上の画像を配置したい場合はどうしたら良いですか? JavaScriptの記述は私が参考に出したHPのもの意外でもかまいません。できればJavaScriptの記述を書いてほしいです。 お願いします。

  • javascriptによる画像切り替えについてわからなくて困っています

    javascriptによる画像切り替えについてわからなくて困っています。 初心者ですので説明もわかりにくいかもしれませんが、ぜひご指導をお願いします。 添付画像のように、サイドバーにボタン数個、大きな画像（#main_img)とあって、ボタンにオンマウスで#main_imgが切り替わり、ボタンをクリックするとリンク先に移動できるようにしたいのです。 「javascript ロールオーバー　切り替え　クリック　リンク」といったキーワードで検索したのですが、ロールオーバー切り替えはできるけれどリンク先に移動できなかったり、ボタン画像画像そのものが切り替わるものだったり、なかなか思ったとおりのサンプルを見つけることができません。 カスタマイズするだけの知識もないので、大変困っています。 このようなサンプルスクリプトを紹介しているところがあったら教えていただけないでしょうか？

  • ホームページのCSSの重なり順序の変更の方法を教えてください。

    ドリームウィーバーのＣＳＳのサンプルを使ってHPを作っていますが、z-indexを使って、idやclassの重なり順序を変えようと思いましたが、まったくz-indexが機能しません。z-indexを使うにあたり何か決まりごとがあるのでしょうか？また、他に重なり順序を変えるやり方があれば教えてください。ちなみに僕がやりたいことは、BiglobeさんのＨＰみたいに、１番上の大見出しのメニューの上にマウスオーバーすると、そのカテゴリーの詳細見出しが下にズラズラっと出てくるようにジャバスクリプトを作っているのですが、その下に出てくる詳細の見出しが、大見出しの下に配置してあるidの下に隠れてしまい、見ることもクリックすることもできないので、その詳細見出しを１番上に持ってきたいのです。宜しくお願いします。

  • 画像の表示非表示について質問です

    画像の表示・非表示に関してですが、非表示にしたときその分だけ詰めるように表示はできないのでしょうか？ 下記のサンプルでは、ボタンを押せば画像は消えますが消えた領域だけ不自然に残ります。 消えた領域分ボタンを上げてくることはできないのでしょうか？ 以下サンプル //ここから <html> <head> <title>Sample</title> <script type="text/javascript"><!-- function visImage(vType) { document.images["photo"].style.visibility = vType; } // --></script> </head> <body> <img src="photo.jpg" name="photo"> <form> <input type="button" value="画像を表示する" onClick="visImage('visible')"> <input type="button" value="画像を消す" onClick="visImage('hidden')"> </form> </body> </html> //ここまで

  • HPビルダー８でレイアウトの重なり

    HPビルダー８、標準モードで作ってます。 ワードではオブジェクトを重ねる場合、順序を前面や背面等に変えることができますよね。 あれと同じように、レイアウト枠を使って取り入れた画像を重ねる時に、順序を変えることはできるのでしょうか？ 挿入する段階で順番を変えれば良いのでしょうが、挿入した後に変える方法が必要な状況になってます。 ご存知の方教えて下さい。よろしく願いします。

  • onとoffを画像でチェンジ、チェックボックスと連動させる

    下記は画像をクリックした際に、onとoffに変更し、かつチェックボックスのvalueの値を変更しておりますが、 例えば、Ａ、Ｂ、Ｃ、Ｄ４個のボタンを準備し、それぞれにonとoffの画像を準備し割り当て、それぞれが、単独で、onとoffができるようにしたいのですが、どなたかご教授願います。 これは、１個のボタンを2枚の画像でオンとオフを切り替えていますが、4個のボタンでそれぞれのボタンのオンとオフの画像を準備して、それぞれのボタンのvalue値を変えたいというのがやりたい内容です。 <script type="text/javascript"> function sample(Img,name){ var onImg = 'on.gif'; var offImg = 'off.gif'; var Input = document.getElementsByName(name)[0]; if(Input.value){ Input.value = ''; Img.src = offImg; }else{ Input.value = 'on'; Img.src = onImg; } } </script> <img src="off.gif" alt="" width="" height="" onclick="sample(this,'CBOX1')"> <input type="hidden" name="CBOX1">

  • JavaScriptについて

    サイト作成中なのですが、JavaScriptのところでつまづいています。 ボタンをクリックすると別窓で画像が出てきて表示されるというJavaScriptを作ると、ボタンは表示されていたのですが、ボタンを押しても画像が表示されません。つまり押しても何も反応がありません。 恐らく画像の保存場所が違うのではないかとにらんでみたのですが見当違いかな？？ タグは以下の通りです。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> function cl(){ popwin=window.open(",'img','width=150,height=150'); popwin.document.write('<IMG SRC="image3.jpg">'); } </SCRIPT> </BODY> クリックしてください。 <FROM> <INPUT type="button" VALUE="クリック" onClick="cl()"> </FROM> </BODY> </HTML> 私はここの部分で間違えてると思いました。 popwin.document.write('<IMG SRC="***.jpg">'); デスクトップに置いてるmyhomepageにimageというフォルダを置いてそこに画像を保存しています。 その場合、<IMG SRC="image/***.jpg">かなと思い実行してみましたがダメでした。。 JavaScriptのときは何か特別なファルダを作る必要が あるんでしょうか？？ JavaScriptに関しては最近はじめたばかりでチンプン カンプンなのでわかりやすく説明していただけるとありがたいです。 ちなみに上記のタグは説明本通り記載しました。 よろしくお願いいたします。

  • 画像などの背面前面の設定の仕方

    Word2003を使っています。画像、写真、ワードアートなどを多用するのですが、それらを重ねるときに迷うのが、背面や前面にする方法です。以下の方法はどういう風に使い分けするのでしょうか。 1.図形を選択し右クリック→「図の書式設定」→「レイアウト」タブ→「折り返しの種類と配置」の（前面）とか（背面）。 2.図形の調整→「順序」→（前面へ移動）や（背面へ移動） 　よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する