レイヤー内の画像を変更する方法とは？
- レイヤー内の画像を変更する方法を教えてください。
- レイヤー内の画像を変更するためのJavaScriptコードをご紹介します。
- レイヤー内の画像を変更するためには、要素のIDを指定して画像のsrc属性を変更する必要があります。
- ベストアンサー
レイヤーにある画像を変更したいです。
ボタンを押したらレイヤー内の画像を変更したいのですが 可能でしょうか？ レイヤーでなければできるのですが・・ <html> <head> <SCRIPT language=JavaScript> <!-- function a(fishimg){ document.getElementById('layer1').images[0].src = fishimg; } //!---> </SCRIPT> </head> <body> <form name="form1"> <input type="button" onClick="a('fish2.gif')" value="レイヤーの画像を変えます。"> </form> <DIV id="layer1"> <IMG src="fish.gif"> </DIV> </body></html>
- natsuyori
- お礼率74% (280/378)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
function a(fishimg){ document.getElementById('layer1').src = fishimg; } //!---> </SCRIPT> </head> <body> <form name="form1"> <input type="button" onClick="a('fish2.gif')" value="レイヤーの画像を変えます。"> </form> <DIV> <IMG id="layer1" src="fish.gif"> </DIV> でいいと思います
関連するQ&A
- レイヤー内のフォームの内容を変更するにはどうすれば？
JavaScriptを使って,テキストボックスに書かれている内容を変更できる様にしたいいのですが,フォームがレイヤー内にあるとうまく出来ません。 こちらがソースです。あくまで例です。ボタンをクリックすると書かれている内容が変わります。 <html> <head> <script lauguage="javascript"> function Form_Write(){ document.form.box.value="Click=true"; } </script> </head> <body> <div id=layer style="position:absolute;left:50px;top:50px;"> <form name="form"> <input type="text" name="box" size=20 value="Click=false"> <input type="button" name="button" value="click" onClick="Form_Write()"> </form> </div> </body> </html> これだとIEではうまく作動するのですが,NNだとうまく動きません。 document.layer.form.box.valueにしてもダメです。 document.layer.form has no propertiesというエラーが出ます。 どうすれば出来るのでしょうか？お助け願います。
- ベストアンサー
- JavaScript
- 画像をクリックして別の画像を変えたい
ボタン画像をクリックしたときに同一ページ内にある画像が変わるようにしたいのですが、下のように描くと、ボタン画像（button.gif)自身が2.pngなどの画像に変わってしまいます。 <HTML> <HEAD> <TITLE>スワップイメージ</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function changeImage(imageUrl){ document.images[0].src = imageUrl; } // --> </SCRIPT> </HEAD> <BODY> <A HREF="#" onClick="changeImage('1.png')" ><IMG SRC="button.gif" border="0"></A> <A HREF="#" onClick="changeImage(2.png')" ><IMG SRC="button.gif" border="0"></A> <A HREF="#" onClick="changeImage(3.png')" ><IMG SRC="button.gif" border="0"></A> <TABLE BORDER="0"> <TR> <TD>ボタンを押すと下に画像が表示されます。</TD> </TR> <TR> <TD><IMG SRC="1.png"></TD> </TR> </TABLE> </BODY> </HTML> 原因を私なりに考えたところ、設定した変数mageUrlをボタンを表示させるために使った<img src="button.gif">で受け取ってしまっているというのはわかりました。（確認のため <IMG SRC="1.png"> を<A HREF>～</A>より上に持ってきたら思っていた動きになりました。） けれどそれからどう修正したらもとの順番でもちゃんと動くのかがわかりません。過去ログの似た質問も拝見したのですが、今の自分では理解できませんでした‥。すみませんがよろしくお願いいたします。
- ベストアンサー
- JavaScript
- レイヤーに書き込むには
JavaScript 初心者ですが、 document.write(string); が含まれる関数を呼び出してレイヤーに文字列を書き出したいのですが、ページ全体に書き出されてしまいます。レイヤーの文字のみ変更するにはどうすればよいのでしょうか。 <html> <head> </head> <body> <div id="layer1"> <script type="text/javascript"> <!-- function function1() { document.write("Hello, World!"); } //--> </script> </div> <input type="button" onclick="function1()" /> </body> </html> よろしくお願いします。
- ベストアンサー
- JavaScript
- 画像の表示非表示について質問です
画像の表示・非表示に関してですが、非表示にしたときその分だけ詰めるように表示はできないのでしょうか？ 下記のサンプルでは、ボタンを押せば画像は消えますが消えた領域だけ不自然に残ります。 消えた領域分ボタンを上げてくることはできないのでしょうか？ 以下サンプル //ここから <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> //ここまで
- ベストアンサー
- JavaScript
- ボタンの飛び先を一つにして、押したボタンのプロパティを変更するには？（超初心者）
VBじゃないかもしれませんが・・・ HTMLファイルに、VBScriptで次のように書いたのですが、 <html> <head> ////省略/// <SCRIPT> ////省略/// Sub Button1_OnClick ////省略/// Call XXXX EndSub Sub Button2_OnClick ////省略/// Call XXXX EndSub Sub Button3_OnClick ////省略/// Call XXXX EndSub ： ： ： Sub XXXX ---ここで、押したボタンのいろんなプロパティを 変更したいのですが・・・変更の内容はどのボタンを押しても同じなので、ここでひとつにまとめたいんですが。たとえば、そのひとつとして、ボタンの画像を変えるとして・・・ Button(押したボタンの).Src = "sampleX.gif" End Sub </SCRIPT> </head> <body> <input id="button1" type="button" name="button1" src="sample1.gif"> <input id="button2" type="button" name="button2" src="sample2.gif"> <input id="button3" type="button" name="button3" src="sample3.gif"> ： ： ： つまり、押したボタンが何であったかを判別して、 維持することができないでしょうか？ 素人です。よろしくお願いします。 ボタンは配列にできればしてもかまいません。 見当違いのスクリプトで、ほかにもっとよいスクリプトがあったら教えてください。
- ベストアンサー
- Visual Basic
- <form>タグ内の再読み込みに関して
以下のようなhtmlファイルがあったとします。 ※<body>タグ内以外は省略 ------------------------------------------------- <body onload="bodyload()"> <form> <input id="id_button1" type="image" value="button" name="n_button1" onclick="click();"> </form> </body> ------------------------------------------------- 呼び出されるjavascriptを以下の通りとします ------------------------------------------------- function bodyload() { document.getElementById('id_button1').src = '/images/base.png' } function click() { document.getElementById('id_button1').src = '/images/1.png' } ------------------------------------------------- id_button1のクリックによって、click()が動作し画像が「/images/1.png」に変更されるのですが、 一瞬で「/images/base.png」に戻ってしまいます。色々試したところhtmlファイルの<form>タグを 消してやれば「/images/base.png」に戻ることなく画像を変更することが可能であることに気づき ました。 どうやらformタグがあると再読み込みが行われているようです。 formタグがあると何故このような動きをするのでしょうか？ formタグ内でも再読み込みの有無を 制御することはできないのでしょうか？お分かりになる方がいらっしゃればご教授いただければ と思います。 javascriptというよりhtmlの内容かもしれませんがよろしくお願いいたします。 なお、実行環境はWindows8Pro、VisualStudio2012、Windowsストアアプリ開発プロジェクト内のデバッグです。
- ベストアンサー
- JavaScript
- 折り畳みメニューを使った場合の画像の空きについて
使用ソフトはドリームウィーバーです。 折り畳みメニューを使いたく、以下のとおり書いたのですが、 なぜか、サブメニューの画像が開いたときに微妙に空きがでます。 マージン0にしてあるのですが、どうしても画像と画像の間があいてしまいます。 どうやったら詰められるのでしょうか？ 教えていただけますか？ <script language="JavaScript"> <!-- function msl(idmn){ if(document.getElementById) document.getElementById(idmn).style.display='block' else if(document.all)document.all(idmn).style.display='block' } function kks(idmn){ if(document.getElementById) document.getElementById(idmn).style.display='none' else if(document.all)document.all(idmn).style.display='none' } //--> </script> <style type="text/css"> <!-- .menu{ width : 110px; cursor : pointer; } .sub{ display : none; margin: 0px; padding: 0px; } ul{ margin:0px; padding: 0px; } ul li{ margin:0px; list-style-type: none; padding: 0px; height: 22px; width: 110px; } ul li img{ margin:0px; padding: 0px; } --> </style> </head> <body> <noscript>※JavaScriptを有効にしてご覧下さい。</noscript> <div class="menu" onclick="javascript:msl('sub_a')" ondblclick="javascript:kks('sub_a')"><img src="シモン/html/images/menu01.gif" /></div> <ul class="sub" id="sub_a"> <li><img src="シモン/html/images/menu01_01.gif" /></li> <li><img src="シモン/html/images/menu01_02.gif" /></li> <li><img src="シモン/html/images/menu01_03.gif" /></li> <li><img src="シモン/html/images/menu01_04.gif" /></li> <li><img src="シモン/html/images/menu01_05.gif" /></li> </ul>
- ベストアンサー
- JavaScript
- 画像を並べ替える・・・
質問させていただきます。 下記のようなコードでページを作成しています。 この中でドラックアンドドロップで画像を入れ替える処理を 行っています。 横に入れ替えが出来るようになっているのですが、 右から左に画像を入れ替えようとすると、画像がぶれて、 画像の入れ替えがやりにくい状態になってしまいます。 わかる方いらっしゃいましたらご助言頂けないでしょうか。 http://journal.mycom.co.jp/series/scriptaculous/004/index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META http-equiv="Content-Style-Type" content="text/css"> <title>データ</title> <LINK href="css/detail_style.css" type="text/css" rel=stylesheet> <link rel="stylesheet" type="text/css" href="jslib/demo.css" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" href="jslib/highslide/highslide.css" /> <script type="text/javascript" src="jslib/prototype.js"></script> <script type="text/javascript" src="jslib/scriptaculous.js?load=effects,dragdrop"></script> <script type="text/javascript" src="jslib/demo.js"></script> <script type="text/javascript" src="jslib/highslide/highslide-with-gallery.js"></script> </head> <body> <form name = "imagepic"> <dl id="gloop1"> <dt id="id_2336:8"><div class="highslide-gallery"><table><tr><td>xxxｘ</td><td><input type="checkbox" id ="room" name="room" value="2336:8"></td></tr><tr><td rowspan="2"><a id="thumb1" href="images/noimages.gif" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 1 } )"></td></tr></table><img src="images/snoimages.gif"></a><div class="highslide-caption"><a href="#" onclick="test(2)"><img src="images/search_detail.gif" alt=""></a><br></div></div></dt><dt id="id_2349:4"><div class="highslide-gallery"><table><tr><td>xxxx</td><td><input type="checkbox" id ="room" name="room" value="2349:4"></td></tr><tr><td rowspan="2"><a id="thumb1" href="images/noimages.gif" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 1 } )"></td></tr></table><img src="images/snoimages.gif"></a><div class="highslide-caption"><a href="#" onclick="test(2)"><img src="images/search_detail.gif" alt=""></a><br></div></div></dt><dt id="id_2359,2:"><div class="highslide-gallery"><table><tr><td>xxxx</td><td><input type="checkbox" id ="room" name="room" value="2359,2:"></td></tr><tr><td rowspan="2"><a id="thumb1" href="images/noimages.gif" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 1 } )"></td></tr></table><img src="images/snoimages.gif"></a><div class="highslide-caption"><a href="#" onclick="test(2)"><img src="images/search_detail.gif" alt=""></a><br></div></div></dt> </dl> </form> </body> css↓↓↓↓ h1 { font-size: 1.5em; } dl { position: absolute; top: 11em; padding: 0; list-style-type: none; width: 100em; margin-left: 0; padding-left: 0.2em; background: #ddd; } dt { float: left; cursor: move; margin: 1.3em; padding: 1.2em; background: #ff9; border: 1px solid gray; } dl.empty { height: 2em; border: 1px solid silver; background: #ddd; } #gloop1 { left: 2em; } #gloop1 { top: 6em; } #gloop1 dl { background: #ff9; }
- ベストアンサー
- JavaScript
- 画像クリックで画像変化を1ページに複数表示
どのJavaScriptサイトにも記載されていなかったので、こちらでお尋ねします。どなたかご存知だったら、教えてください。 changeImageと<a href=""></a>を使って、クリックして画像を変えるっていうのをやっているのですが、同じページでの複数表示のやり方がわかりません。 それと、2つの画像を変化させて、他のアイコンを作ってそこを押すと元の画像に戻るというのは、可能でしょうか？ ４つ画像を用意して、２つまでしか画像変化できないようにさせて、取り消しアイコンで元の画像に戻す・・・ということがやりたいのですが。 今はこんな感じの記述ができています。 <SCRIPT type="text/javascript"> function changeImage() { var imgname = document.images[0].name; if(imgname == "01"){ document.images[0].src = "02.gif"; document.images[0].name = "02"; } else { document.images[0].src = "01.gif"; document.images[0].name = "01"; } } </SCRIPT> </head> <body> <a href="JavaScript:changeImage()"> <img src="01.gif" name"01" border=0></a>
- ベストアンサー
- JavaScript
- input type="image"でマウスクリック画像変更がうまくいかない
input type="image" で表示した画像を変更したいのですがうまくいきません。 <form name="form1" action="" method="POST"> <input type="image" src="A.gif" name="A" onclick="ChangeImage();"> </form> <script language="javascript"> function ChangeImage(){ document.form1.A.src="B.gif" } </script> というコードをなんですが、ボタンをクリックしても何も起こりません。 アンカータグを使わずにinputで行いたいのですがどなたかご存じないでしょうか。よろしくお願いします。
- ベストアンサー
- HTML
お礼
おかげさまで無事目的を達成できました。 レイヤーは面白いですね。 ありがとうございます（＾＾）