- ベストアンサー
画像クリックで背景を変える
素材配布サイトを作っています。ある画像をクリックすると、背景がその画像に変更されるようにしたいのですが、このとき、縦方向、または横方向にだけ画像が並べられるようにするにはどうすれば良いのでしょうか？検索して背景全体に画像が並べられるようにする方法はわかりましたが、JavaScriptの知識が全くないので応用できません…。
- marronbutton
- お礼率41% (10/24)
- その他（インターネット・Webサービス）
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
#2補>横方向の場合で画面下でくり返すには case 'H'://横 document.body.style.backgroundRepeat='repeat-x'; document.body.style.backgroundPosition='center bottom';//下 break; case 'V'://縦 document.body.style.backgroundRepeat='repeat-y'; document.body.style.backgroundPosition='right top';//右 break;
その他の回答 (2)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
//#1補 <script type="text/javascript"><!-- function setBack(imgsrc, dir){ document.body.style.backgroundImage='url(' + imgsrc + ')'; switch(dir){ case 'H'://横 document.body.style.backgroundRepeat='repeat-x'; break; case 'V'://縦 document.body.style.backgroundRepeat='repeat-y'; break; case 'A'://全体 default: document.body.style.backgroundRepeat='repeat'; } } //--> </script> … <img id='img01' src='img/01.jpg' onclick="setBack('img/01.jpg','A')"> <img id='img02' src='img/02.jpg' onclick="setBack('img/02.jpg','H')"> <img id='img03' src='img/03.jpg' onclick="setBack('img/03.jpg','V')">
補足
ありがとうございます！イメージしていたものができたました！そしてまたわがままを言って申し訳ないのですが、横方向の場合で画面下でくり返すにはどうしたら良いのでしょう？一度に書くべきでしたのに、何度もお手数をおかけして本当にすみません。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>クリックした画像を背景にする</title> <script type="text/javascript"><!-- //画像をクリックしたとき、選ばれているラジオボタンで並びを指定して背景を設定する。 //ラジオボタンをクリックした時には変更しない。 function setBack(imgsrc){ document.body.style.backgroundImage='url(' + imgsrc + ')'; var rbs = document.getElementsByName('radio1'); var len = rbs.length; for(var i=0;i<len;i++){ if(rbs[i].checked){ document.body.style.backgroundRepeat=rbs[i].value; break; } } } //--> </script> </head> <body> <form name="FORM1" style="background-color:white"> <input type="radio" name="radio1" value="repeat" id="A" checked><label for="A">全て</label> <input type="radio" name="radio1" value="repeat-x" id="H"><label for="H">横方向</label> <input type="radio" name="radio1" value="repeat-y" id="V"><label for="V">縦方向</label> </form> <img id='img01' src='img/01.jpg' onclick="setBack('img/01.jpg')"> <img id='img02' src='img/02.jpg' onclick="setBack('img/02.jpg')"> <img id='img03' src='img/03.jpg' onclick="setBack('img/03.jpg')"> </body> </html>
補足
回答ありがとうございます。 せっかく全ソースを教えていただいたのに申し訳ないのですが、横か縦のどちらにくり返させるのかは閲覧者に選択させるのではなく、固定したいのです。「この画像をクリックしたときは縦にだけ繰り返して背景に、この画像をクリックしたときは全体に繰り返して背景に」ということはできますでしょうか？
お礼
要領を得ない質問に何度も親切に答えてくださって本当にありがとうございました！とても助かりました。