開発中ですが、参考程度に。
以下に、画像の座標を決める方法を説明します。まずはzahyo●●.htmlを開いて好きな位置に置きたい画像を読み込み、座標をコピペしましょう。その次にメモ帳でindex.htmlを開きます。※1参照
※写真のは正確な座標です。
もし座標を思い通りの位置に配布するのが難しかったらグラフィックソフトでbk.pngを基にコーデ例の画像を制作して「別名で保存」で保存しておきます。
別ファイルにbk.pngの予備の画像を作ってファイルを置き換えてみるのもいいかと思います。
写真のような画像を別に作っていけばやりやすくなるかと思います。
⚠注意点zahyo●●htmlについて⚠
あと座標htmlがブラウザによってはオブジェクトがいい加減な大きさになるバグを起こしてしまうみたいなので
もしなってしまったらzahyo●●.htmlをメモ帳やエディタで開いて
width: 100px;
height: 100px;
の部分を適当な数字に調整することをおすすめします💦
検索と置き換えで修正する箇所
----------------------------------------------------
overflow: hidden; /* スクロールを禁止 */
}
#image {
width: 100px;
height: 100px;
-------------------------------------------------------
画像の座標を決めるには、メモ帳を開き検索と置き換えで「画像を表示する」と検索してみてください。
// 画像を表示する
element.style.opacity = "1";
if(color === "red") {
document.getElementById("red-box").style.opacity = "1";
document.getElementById("red-box").style.left = "123px";
document.getElementById("red-box").style.top = "206px";
document.getElementById("red-box2").style.opacity = "1";
document.getElementById("red-box2").style.left = "131px";
document.getElementById("red-box2").style.top = "119px";
document.getElementById("red-box3").style.opacity = "1";
document.getElementById("red-box3").style.left = "154px";
document.getElementById("red-box3").style.top = "377px";
X と Y を希望の座標に置き換えてください。
座標は、左上隅が (0, 0) となるピクセル単位で指定します。
私が試してみたらこれでうまくいきました。