おしえて

画像の表示位置

解決済

質問者：2021五郎蔵
質問日時：2022/12/23 08:25
回答数：3件

下記のソースはネットにあった物で、私が少しアレンジしたものです。
15枚のjpg画像を4秒おきに変化する様にしましたが、
表示する位置を変えたいのです。
縦横それぞれ何処を変えれば変わるのでしょうか？
<script type="text/javascript"></script>
<style>

</style>
</head>
<body bgcolor="#000000" text="#0f3700" link="#fa5000" vlink="#808080" alink="#008080">
<div style="top : 223px;left : 50px;
position : absolute;
z-index : 2;
" id="Layer6"></div>
<div style="top : 417px;left : 423px;
position : absolute;
z-index : 7;
width : 77px;
height : 15px;
" id="Layer24"></div>
<div style="top : 434px;left : 397px;
position : absolute;
z-index : 3;
" id="Layer14"></div>
<div style="top : 451px;left : 431px;
position : absolute;
z-index : 4;
" id="Layer16"></div>

<div style="top : 50px;left : 50px;
position : absolute;
z-index : 5;
" id="Layer18"></div>
<div style="top : 50px;left : 50px;
position : absolute;
z-index : 6;
" id="Layer19"></div>
<div style="top : 8px;left : 8px;
position : absolute;
z-index : 1;
" id="Layer1">
<div id="player"></div>
</div>
<div style="width : 30px;height : 12px;top : 27px;left : 8px;
position : absolute;
z-index : -1;
" id="Layer2">
<div style="width : 372px;height : 17px;top : 8px;left : 8px;
position : absolute;
z-index : 1;
" id="Layer5">script type="text/javascript" language="JavaScript">
</div>
</div>
</body>
</HTML>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： gura_
回答日時：2022/12/23 22:42

2021五郎蔵さん

････表示する位置を変えたい･････

background-position で指定すれば良いのですが、
　https://www.tohoho-web.com/css/prop/background-p …

提示ソースには質問と直接関係ない部分等が有りますので整理してページソースを書いてみました。↓

<DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script>
function myFunc(){
myD = new Date();
myS = myD.getSeconds();
if ( myS >= 0){ myImg = "00"; }
if ( myS >= 4){ myImg = "04"; }
if ( myS >= 8){ myImg = "08"; }
if ( myS >= 12){ myImg = "12"; }
if ( myS >= 16){ myImg = "16"; }
if ( myS >= 20){ myImg = "20"; }
if ( myS >= 24){ myImg = "24"; }
if ( myS >= 28){ myImg = "28"; }
if ( myS >= 32){ myImg = "32"; }
if ( myS >= 36){ myImg = "36"; }
if ( myS >= 40){ myImg = "40"; }
if ( myS >= 44){ myImg = "44"; }
if ( myS >= 48){ myImg = "48"; }
if ( myS >= 52){ myImg = "52"; }
if ( myS >= 56){ myImg = "56"; }

document.body.background = myImg + ".jpg";
}
setInterval("myFunc()",100);
</script>

<style>
body{
background-repeat:no-repeat;
background-position: 200px 80px; /* 左上から右に200px, 下に80px */
background-color:#000000 ;
color: #0f3700;
}
:link{ color:#fa5000 ;}
:vlink{ color:#808080;}
:alink{ color:#008080;}
/* この下今回不要？ */
#Layer6{ position:relative; top: 223px;left : 50px; position : absolute; z-index : 2;}
#Layer24{ top : 417px;left : 423px; position : absolute; z-index : 7; width : 77px;
height : 15px;}
#Layer14{ top : 434px;left : 397px; position : absolute; z-index : 3; }
#Layer16{ top : 451px;left : 431px; position : absolute; z-index : 4; }
#Layer18{ top : 50px;left : 50px; position : absolute; z-index : 5; }
#Layer19{ top : 50px;left : 50px; position : absolute; z-index : 6; }
#Layer1{ top : 8px;left : 8px; position : absolute; z-index : 1; }

#Layer2{ width : 30px;height : 12px;top : 27px;left : 8px; position : absolute;
z-index : -1; }
#Layer5{ width : 372px;height : 17px;top : 8px;left : 8px; position : absolute;
z-index : 1; }
/* ここまで今回不要？ */
</style>
</head>
<body>

<div id="Layer6"></div>
<div id="Layer24"></div>
<div id="Layer14"></div>
<div id="Layer16"></div>
<div id="Layer18"></div>
<div id="Layer19"></div>
<div id="Layer1"></div>
<div id="player"></div>

<div id="Layer2"></div>
<div id="Layer5"></div>

</body>
</HTML>

- 0
- 件

通報する

この回答へのお礼

ソースを書き直して頂いて真にありがとうございます。
ご指摘の様にソースを書き換えleftの値を変えたら
満足行く位置に変更できました。

通報する

お礼日時：2022/12/24 07:59

参考程度に

No.3

回答者： fujillin
回答日時：2022/12/24 11:48

No1です。

＞上記を加味してどの様なソースになるのでしょうか？？
前提条件が不明なので、何とも書きにくいですが、勝手な解釈で良いのなら・・・

・画像のディレクトリ、ファイル名はご提示のままとする。
・画像表示位置は時計の分針のような位置に表示。
（画像サイズが不明ですが、余白が小さいとあまり移動しません）
Chrome、fx、Edgeで動作確認。

既に回答が付いているようなので、以下はご参考までに。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body { width: 100%; height: 100%; margin: 0; }
</style>
</head>
<body>

<script>
(() => {
const bs = document.querySelector('body').style, data = {t: null};
bs.backgroundRepeat = 'no-repeat';
const intervalID = setInterval(() => {
const t = (new Date().getSeconds() / 4 | 0) * 4;
if(data.t == t ) return;

const r = t * Math.PI / 30, x = 1 + Math.sin(r), y = 1 - Math.cos(r);
data.t = t;
bs.backgroundImage = `url("./${('0' + t).substr(-2)}.jpg")`;
bs.backgroundPosition = `${x * 50}% ${y * 50}%`;
}, 500);
})();
</script>
</body>
</html>

- 0
- 件

通報する

No.1

回答者： fujillin
回答日時：2022/12/23 15:49

こんにちは

＞表示する位置を変えたいのです。
body要素の背景画像の位置ということでしょうか？

background-positionを指定することで、表示する位置を変えられます。
https://developer.mozilla.org/ja/docs/Web/CSS/ba …

なお、ご質問には関係ありませんけれど・・・
＞ネットにあった物で、私が少しアレンジしたものです。
相当に古いものを拾ったようですね。

・bodyのbackground属性は廃止になっていますので、CSSで指定しましょう。
https://developer.mozilla.org/ja/docs/Web/HTML/E …

・後半のスクリプトも、相当に古いものと思われます。
（ナビゲータの判定も今は不要かと。）
というか、その部分のスクリプトはご質問には関係なさそうですが、別で使っているのでしょうか？
（使っていないのなら不要でしょう）
画像が重いようなら、事前にロードしておくというのはあると思いますが・・

- 0
- 件

通報する

この回答へのお礼

早速のアドバイスありがとうございます。
良ければもう少しお付き合い願います。

>body要素の背景画像の位置ということでしょうか？
4秒間隔で表示する画像の位置です。（現在のままだとleft:0だと思います）

>background-positionを指定することで、表示する位置を変えられます。
具体的に何処をどう変えれば良いのでしょうか？

かなり古いソースが載っているようですが、
私には分かりません・・・

上記を加味してどの様なソースになるのでしょうか？？
お願いします。
説明も加えてもらえるとありがたいのですが・・・

通報する

お礼日時：2022/12/23 18:56

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！