BOXがロールオーバーで開閉するインターフェースの作成方法
- javascript初心者でも簡単にできるBOXがロールオーバーで開閉するインターフェースの作成方法について紹介します。
- HTMLとCSSを使って、BOXがロールオーバーで開閉するインターフェースを作成する方法を具体的に解説します。
- また、javascriptを使用してBOXの動きを実装する方法も詳しく説明します。
- ベストアンサー
BOXがロールオーバーで開閉するインターフェース
よろしくお願いします。 javascript初心者です。 今WEBサイトを構築してして BOXがロールオーバーで開閉するインターフェースを作りたくて 本を買って勉強しているのですがうまく動作しません。。 HTMLは ーーーーーーーーーーーーーーーーーーーーーーーーー <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type"content="text/css"/> <meta http-equiv="Content-Script-Type"content="text/javascript"/> <title>テスト</title> <link href="css/1.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="java/java.js"></script> </head> <body> <body onload="boxMove()"> <div id="mybox1"class="box" style="top:0px;left:0px;"></div> <div id="mybox2"class="box" style="top:0px;left:250px;"></div> <div id="mybox3"class="box" style="top:0px;left:500px;"></div> </body> </html> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー CSS ----------- .box{ position:absolute; width:250px; height:200px; } #mybox1{ background-color:#FF9900; } #mybox2{ background-color:#BBEE55; } #mybox3{ background-color:#AAEEFF; } body{ color:#FFFFFF; margin:0; padding:0; overflow:hidden; } javascript --------------------------------- var myTarget=700; var speed=2; function myboxCmove(){ var myPos = eval(document.getElementById('mybox2').style. left.replace("px","")); myPos += (myTargetC-myPos)/speed; document.getElementById('mybox2').style.left = myPos+"px"; setTimeout("myboxCmove()",10); } function myboxRmove(){ var myPos = eval(document.getElementById('mybox3').style. left.replace("px","")); myPos += (myTargetR-myPos)/speed; document.getElementById('mybox3').style.left = myPos+"px"; setTimeout("myboxRmove()",10); } var pageWidth; var pageHeight; function setTarget1(){ myTargetC = pageWidth-100; mytargetR = pageWidth-50; } function setTarget2(){ myTargetC = 50; mytargetR = pageWidth-50; } function setTarget3(){ myTargetC = 50; mytargetR = 100; } function config(){ if(document.all){ pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; } else { pageWidth = window.innerWidth; pageHeight = window.innerHeight; } myTargetC = pageWidth/3; myTargetR = pageWidth/3*2; document.getElementById('mybox1').style.width = (pageWidth-100)+"px"; document.getElementById('mybox1').style.height = (pageHeight-100)+"px"; document.getElementById('mybox2').style.width = (pageWidth-100)+"px"; document.getElementById('mybox2').style.height = (pageHeight-100)+"px"; document.getElementById('mybox3').style.width = (pageWidth-100)+"px"; document.getElementById('mybox3').style.height = (pageHeight-100)+"px"; } <body onload="config();myboxCmove();myboxRmove();"onresize="config()"> <div id="mybox1" class="box" style="top:0px; left:0px;" onmouseover="setTarget1()"></div> <div id="mybox2" class="box" style="top:0px; left:250px;" onmouseover="setTarget2()"></div> <div id="mybox3" class="box" style="top:0px; left:500px;" onmouseover="setTarget3()"></div> -------------------------------------------------- テストとして本を参考にやってみたのですがなにがいけないのかまったくわかりません。どなたかご教授お願い致します。
- gobou87
- お礼率23% (3/13)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
> この指定だとマウスが離れたとき初期の状態にならない 各divの onmouseout イベントに、分割位置を初期状態に戻すような処理を入れてください。 試してませんが、 function resetTarget(){ myTargetC = pageWidth/3; myTargetR = pageWidth/3*2; } といった関数を新設して、div に onmouseout="resetTarget();" を追加でいけると思います。
その他の回答 (1)
- mtaka2
- ベストアンサー率73% (867/1179)
JavaScriptコードの終わりにHTMLなデータが混じってますね。 最初のHTMLと書かれてる方にほぼ同等の表記がありますけど、そっちはJavaScriptのイベント指定がないので、そのままだとJavaScriptコードが実行されることはまったくないですね。 javascriptのとこの最後の<body>と<div>の内容で、HTMLの方を置き換えてみてください。 あと、mytargetR と myTargetR が混在してます。変数名は大文字小文字も区別されるので注意。
補足
ご支持通りに修正したところできました！本当にありがとうございます！ あとこの指定だとマウスが離れたとき初期の状態にならないと思うのですがどういった指定をすればマウスが離れたときは初期の状態になるのでしょうか？
関連するQ&A
- div要素を滑らかに動かしたい
<div id="div1" class="div1" onclick="init();">move box</div> 上記のようなdiv要素を、画面右方向へ滑らかに 動かしたいのですが、どのようなscriptを記述すればよいでしょうか？ setIntervalを使って0.5秒毎に1ピクセル右に移動、 というのを期待して以下のようなscriptを書いてみたのですが、 うまく動作しませんでした。 function init(){ setInterval(moveY, 500); } function moveY(){ var obj = document.getElementById("div1"); obj.style.left = obj.style.left+1 + "px"; }
- ベストアンサー
- JavaScript
- javascriptで困っています。教えてください
javascriptでimgタグの位置を変更しようと考えています。上、下の表示（divタグ）をクリックして上下に10pxずつ移動させたいのですが、どのようにしていいのかよく分かりません。 document.getElementById("kt").style.top = document.getElementById("kt").style.top-10; の部分に無理があるのでしょうか？ 教えていただきたいと思い、投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=480"> <style type="text/css"> <!-- #wrapper{ width:640px; height:480px; position:relative; } #kt{ width:250px; height:250px; position:absolute; top:100px; left:100px; } #up{position:absolute; z-index: 1;top:0px;width:20px;height:20px;background-color:#F00;} #down{position:absolute; z-index: 2;top:30px;width:20px;height:20px;background-color:#F00;} --> </style> </head> <body> <div id="wrapper"> <div id="up">上</div> <div id="down">下</div> <img id="kt" src="kt.png"> </div> <script type="text/javascript"> var up_element = document.getElementById("up"); up_element.addEventListener("click", touchUp, false); function touchUp() { document.getElementById("kt").style.top = document.getElementById("kt").style.top-10; } var down_element = document.getElementById("down"); down_element.addEventListener("click", touchDown, false); function touchDown() { document.getElementById("kt").style.top = document.getElementById("kt").style.top+10; } </script> </body> </html>
- ベストアンサー
- JavaScript
- Javascriptで星と月の２つの画像を動かしたいのですが…
星は動きますが、月が動いてくれません。どこが間違ってるのかわからないので、誰かわかる方、教えていただきたいです。よろしくお願いします；； <html> <head> <title>オブジェクトを動かす</title> <style type="text/css"> div {font:30pt ; color:white ; z-index:2} #box {position:absolute ; left:50px ; top:50px; width:400px;height:280px ; background-color:black ; z-index:1} #title1 {position:absolute; left:100px ; top:100px} #title2 {position:absolute; left:80px ; top:50px} #star {position:absolute; left:50px ; top:170px ; z-index:3} #moon {position:absolute; left:50px ; top:170px ; z-index:3} </style> <script type="text/javascript"> var imgStar; var imgMoon; var timerA; var timerB; var x = 50; var y = 170; var dx = 6; var dy = 4; var syototsu = 0; var colorname = "black"; function startMove() { imgStar = document.getElementById("star"); timerA = setInterval("moveImgA()", 50); } function startMoon() { imgMoon = document.getElementById("moon"); timerB = setInterval("moveImgB()", 50); } function moveImgA() { if(syototsu == 1) changecolor(); imgStar.style.left = x + "px"; imgStar.style.top = y + "px"; x = x + dx; y = y + dy; if(x<=50 || x >= 410) { dx = -dx; syototsu = 1; } if(y<=50 || y >= 290) { dy = -dy; syototsu = 1; } } function moveImgB() { if(syototsu == 1) changecolor(); imgMoon.style.left = x + "px"; imgMoon.style.top = y + "px"; x = x + dx; y = y + dy; if(x<=50 || x >= 410) { dx = -dx; syototsu = 1; } if(y<=50 || y >= 290) { dy = -dy; syototsu = 1; } } function changecolor(){ if(colorname == "black"){ colorname = "maroon"; } else { colorname = "black"; } document.getElementById("box").style.backgroundColor = colorname; syototsu = 0; } function stopTimerA(){ clearInterval(timerA); } function stopTimerB(){ clearInterval(timerB); } </script> </head> <body onload="startMove();" onunload="stopTimerA();"> <body onload="startMoon();" onunload="stopTimerB();"> <div id="box"></div> <div id="title1">StarLight</div> <div id="star"><img src="star.png" width="40" height="40"></div> <div id="title2">MoonLight</div> <div id="moon"><img src="moon.png" width="40" height="40"></div> </body> </html>
- ベストアンサー
- その他([技術者向] コンピューター)
- ページの高さを取得し、それに合わせて横幅を決めたい
閲覧ありがとうございます。 現在javascriptの練習をしているのですが、 ブラウザのページの高さを取得し、それに合わせて Webページの横幅を自動算出し、style.widthで割り当てたいのですが、 Firefoxでは構文エラーがでます。 何がいけないのでしょうか。 以下にソースを記述いたしますので、ご教示いただければと思います。 併せて、margin: 0 auto;で中央揃えにしたいのですが、 CSSでは一応記述しておりますが、可能でしょうか。 $(window).resize(function(){ var h = $(window).height(); var w = h * 1.5; var bodyWidth = document.getElementsByTagName('body').tyle.width = w + 'px'; var headerWidth = document.getElementById('hdr').tyle.width = w + 'px'; var contentWidth = document.getElementById('content-box').tyle.width = w + 'px'; var footerWidth = document.getElementsByTagName('footer').tyle.width = w + 'px'; }); 以下HTMLソースコード(必要部分のみ) <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="hdr"> <header> </header> </div> <div id="content-box"> </div> <div> <footer> </footer> </div> </body> </html> 以下CSS(必要部分のみ※現在は固定幅にしています。) * { margin: 0; padding: 0; font-style: normal; } body { width: 1024px; margin: 0 auto; position: relative; } div#hdr { position: absolute; top: 580px; left: 0; background: #ffffff; width: 1024px; height: 100px; z-index: 100; } div#content-box { position: relative; position: absolute; top: 20px; left: 0; width: 1024px; height: 560px; overflow: hidden; } div#ftr { position: absolute; width: 1024px; height: 20px; top: 0; left: 0; }
- ベストアンサー
- JavaScript
- javascriptで困っています。教えてください
javascriptでimgタグの位置を変更しようと考えています。上、下の表示（divタグ）をクリックして上下に移動させたいのですが、上手くいきません。教えていただきたいと思い、投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=480"> <style type="text/css"> <!-- #wrapper{ width:640px; height:480px; position:relative; } #kt{ width:250px; height:250px; position:absolute; top:100px; left:100px; } #up{position:absolute; z-index: 1;top:0px;width:20px;height:20px;background-color:#F00;} #down{position:absolute; z-index: 2;top:30px;width:20px;height:20px;background-color:#F00;} --> </style> </head> <body> <div id="wrapper"> <div id="up">上</div> <div id="down">下</div> <img id="kt" src="kt.png"> </div> <script type="text/javascript"> var up_element = document.getElementById("up"); up_element.addEventListener("click", touchUp, false); function touchUp() { document.getElementById("kt").style.top = 50; } var down_element = document.getElementById("down"); down_element.addEventListener("click", touchDown, false); function touchDown() { document.getElementById("kt").style.top = 200; } </script> </body> </html>
- ベストアンサー
- JavaScript
- innerTextで文字を変えたいのですが
配列imに入っている数値が1なら"ok"と表示、0なら"-----"と表示したいのです。 以下のソースなのですが <html> <head> <style type=text/css> .im{ font-size:1.5em; font-weight:500; color:#ffffff; text-dacoration:none; text-decoration:blink; z-index:3; } </style> <script langage="JScript"> var im=new Array(30); var haba=0; //初期設定 function Preferences(){ for(i=1;i<=30;i++){ obj=document.getElementById("num"+i); obj.style.posTop+=haba; haba+=25; } for(f=1;f<=30;f++){ im[f]=0; im[2]=1; im[5]=1; if(im[f]==0){ num="num"+f; num.innerText="----------"; }else{num.innerText="ok";} } } </script> </head> <body bgcolor="#0000000" onLoad="Preferences()"> <div id="num1" class="im" style="position:absolute;top:25px;left:240px;">A1</div> <div id="num2" class="im" style="position:absolute;top:25px;left:240px;">A2</div> <div id="num3" class="im" style="position:absolute;top:25px;left:240px;">A3</div> <div id="num4" class="im" style="position:absolute;top:25px;left:240px;">A4</div> <div id="num5" class="im" style="position:absolute;top:25px;left:240px;">A5</div> <div id="num6" class="im" style="position:absolute;top:25px;left:240px;">A6</div> <div id="num7" class="im" style="position:absolute;top:25px;left:240px;">A7</div> <div id="num8" class="im" style="position:absolute;top:25px;left:240px;">A8</div> <div id="num9" class="im" style="position:absolute;top:25px;left:240px;">A9</div> <div id="num10" class="im" style="position:absolute;top:25px;left:240px;">A10</div> <div id="num11" class="im" style="position:absolute;top:25px;left:240px;">A11</div> <div id="num12" class="im" style="position:absolute;top:25px;left:240px;">A12</div> <div id="num13" class="im" style="position:absolute;top:25px;left:240px;">A13</div> <div id="num14" class="im" style="position:absolute;top:25px;left:240px;">A14</div> <div id="num15" class="im" style="position:absolute;top:25px;left:240px;">A15</div> <div id="num16" class="im" style="position:absolute;top:25px;left:240px;">A16</div> <div id="num17" class="im" style="position:absolute;top:25px;left:240px;">A17</div> <div id="num18" class="im" style="position:absolute;top:25px;left:240px;">A18</div> <div id="num19" class="im" style="position:absolute;top:25px;left:240px;">A19</div> <div id="num20" class="im" style="position:absolute;top:25px;left:240px;">A20</div> <div id="num21" class="im" style="position:absolute;top:25px;left:240px;">A21</div> <div id="num22" class="im" style="position:absolute;top:25px;left:240px;">A22</div> <div id="num23" class="im" style="position:absolute;top:25px;left:240px;">A23</div> <div id="num24" class="im" style="position:absolute;top:25px;left:240px;">A24</div> <div id="num25" class="im" style="position:absolute;top:25px;left:240px;">A25</div> <div id="num26" class="im" style="position:absolute;top:25px;left:240px;">A26</div> <div id="num27" class="im" style="position:absolute;top:25px;left:240px;">A27</div> <div id="num28" class="im" style="position:absolute;top:25px;left:240px;">A28</div> <div id="num29" class="im" style="position:absolute;top:25px;left:240px;">A29</div> <div id="num30" class="im" style="position:absolute;top:25px;left:240px;">A30</div> </body> </html> innrTextで表示する文字を変えるところがおかしいんだと思いますがどう直せばいいのか分かりません。 どなたか教えてください。
- ベストアンサー
- JavaScript
- 複数canvasを表示状態のまま一つの画像に
先だってchart.js4.2でカラー設定をする方法(https://okwave.jp/qa/q10117946.html)で複数グラフを上1、下3できれいに配置する方法を教えてもらいました。そのコードに今まで2.9系で上下2個づつの配置表示したものを一つの画像にする下記のコードを加え試しましたが使えませんでした。 function imageDownload() { var chartWidth = 350; var chartHeight = 242; var imageType = "image/png" var imageFileName = "chart.png"; var bufferCanvas = document.createElement("canvas") bufferCanvas.width = chartWidth * 1.82; bufferCanvas.height = chartHeight * 2.2; bufferCanvas.style.display = "none"; document.body.appendChild(bufferCanvas); var ctx = bufferCanvas.getContext("2d"); // 背景色を設定（しない場合は透過） ctx.fillStyle = "rgb(255, 255, 255)"; ctx.fillRect(0, 0, bufferCanvas.width, bufferCanvas.height); // グラフを貼り付け for (i = 1; i <= 4; i++) { ctx.drawImage( document.getElementById("myChart" + i), i % 2 == 1 ? 0 : chartWidth, i <= 2 ? 0 : chartHeight ); } var imageURL = bufferCanvas.toDataURL(imageType); そこで、スタイル設定のボックスを無くし下記のように配置するようにしました。 <div class="row" style="width:100%;" > <div class="chart1" style="position: relative; top: 0; right: 0; left: 0; margin:0;" >c <canvas id="myChart1" width="400px" height="230px"></canvas></div> <div class="chart2" style="position: absolute; top: 300px; right: 0; left: 0; margin:0;" > <canvas id="myChart2" width="210px" height="210px"></canvas></div> <div class="chart3" style="position: absolute; top: 300px; right: 0; left:215px; margin:0;"> <canvas id="myChart3" width="210px" height="210px"></canvas></div> <div class="chart4" style="position: absolute; top: 300px; right: 0; left:430px; margin:0;"> <canvas id="myChart4" width="210px" height="210px"></canvas></div> </div> しかしながらこの画像化コードでは上下に2個配置するようになっているため大きさの違う上のグラフと下の最初のグラフが左右に一部重なって描画される結果となりました。 そこで、任意の配置状態を保ったまま一つの画像とする方法をお教えください。
- 締切済み
- JavaScript
- ボーダースタイルがうまく表示できない
#content { width:525px; } div.box { width:525px; margin-top: 20px; border-bottom:dotted 1px #ccc; } div.left { width:140px; float: left; font-weight: bold; margin-left: 5px; } div.right { width:380px; float: left; line-height: 20px; height: 20px; } <div id="content"> <div class="box"> <div class="left">Address</div> <div class="right">住所<br>東京都</div> </div> </div> クラス名boxというボックスのボトムにボーダー指定をしましたが、ボックスのズレ？によりボーダーがトップになっているように見えてしまいます。 どこが間違っておりますか？ アドバイスを宜しくお願いします。
- ベストアンサー
- HTML
- javascriptでrgbを用いてスタイル設定を行った時の挙動
こんにちは。 勉強の為、プログラムの作成中に気になる動作がありました。 style.backgroundでrgbで赤を設定したはずなのに深い緑色が表示されてしまいますが、何が原因なのでしょうか？ 以下は学習で作っていたプログラムです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-script-type" content="text/javascript"> <title>test</title> <script type="text/javascript"> <!-- function Graphics(obj){ var obj = obj ? obj : document.createElement('div'); var canvas = (obj.ownerDocument) ? obj : ( document.getElementById(obj) ? document.getElementById(obj) : document.createElement('div') ); canvas.style.position = "absolute"; canvas.style.top = "0px"; canvas.style.left = "0px"; canvas.style.width = "10px"; canvas.style.height = "10px"; } Graphics.prototype = { setColor : function(r,g,b){ // 色設定用(1) canvas.style.background = rgb; },setColor : function(color){ // 色設定用(2) canvas.style.background = color; },setSize : function(sx ,sy ,ex ,ey){ // 線画領域設定用 canvas.style.top = sx + "px"; canvas.style.left = sy + "px"; canvas.style.width = ex + "px"; canvas.style.height = ey + "px"; } } window.onload = function(){ var g = new Graphics("canvas"); // 存在するIDを入れた時 // var g = new Graphics("canvas2"); // 存在しないIDを入れた時 // var g = new Graphics(); // 引数が空の時 g.setColor(255,0,0); g.setSize(100,100,100,100); } // --> </script> </head> <body> <div id="canvas"></div> てｓｔ </body> </html> 問題が発生したブラウザはIE6.0です。 以上、よろしくお願いいたします。
- ベストアンサー
- JavaScript
- style.displayだと効率悪いから...
style.displayだと効率悪いからfor文を使いたいです。 以下はhtmlです。 なぜ効率悪いかというと、 一つ一つ、 セレクトごとに、 document.getElementById('Box1').style.display = "";と、 document.getElementById('Box1').style.display = "none"; を書かなければならないからです。 構文が長くなってしまい、非効率です。 しかし、document.getElementById自体1つしか書けないのです。 for文を使う必要があるのです。 ご教授願えたら幸いです。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5"> <p>two</p> </div> <div id="Box3" class="my-5"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById('sample')){ id = document.getElementById('sample').value; if(id == 'select1'){ document.getElementById('Box1').style.display = ""; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = "none"; }else if(id == 'select2'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = ""; document.getElementById('Box3').style.display = "none"; } else if(id == 'select3'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = ""; } } window.onload = viewChange; } </script>
- 締切済み
- JavaScript
お礼
わかりました、どうもありがとうございます。 助かります。また他にもいろいろな方法で試してみたいので もしまた質問を見かけましたらまたご教授をお願いいたします。