※ ChatGPTを利用し、要約された質問です（原文：BOXがロールオーバーで開閉するインターフェース）
BOXがロールオーバーで開閉するインターフェースの作成方法
このQ&Aのポイント
javascript初心者でも簡単にできるBOXがロールオーバーで開閉するインターフェースの作成方法について紹介します。
HTMLとCSSを使って、BOXがロールオーバーで開閉するインターフェースを作成する方法を具体的に解説します。
また、javascriptを使用して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>
--------------------------------------------------
テストとして本を参考にやってみたのですがなにがいけないのかまったくわかりません。どなたかご教授お願い致します。
お礼
わかりました、どうもありがとうございます。 助かります。また他にもいろいろな方法で試してみたいので もしまた質問を見かけましたらまたご教授をお願いいたします。