下記のソースはネットにあった物で、私が少しアレンジしたものです。
15枚のjpg画像を4秒おきに変化する様にしましたが、
表示する位置を変えたいのです。
縦横それぞれ何処を変えれば変わるのでしょうか?
<script type="text/javascript"><!--
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><!--HPB_SCRIPT_ROV_50
//
// (C) 2010 株式会社ジャストシステム
//
// HpbImgPreload:
//
function HpbImgPreload()
{
var appVer=parseInt(navigator.appVersion);
var isNC=false,isN6=false,isIE=false;
if (document.all && appVer >= 4) isIE=true; else
if (document.getElementById && appVer > 4) isN6=true; else
if (document.layers && appVer >= 4) isNC=true;
if (isNC||isN6||isIE)
{
if (document.images)
{
var imgName = HpbImgPreload.arguments[0];
var cnt;
swImg[imgName] = new Array;
for (cnt = 1; cnt < HpbImgPreload.arguments.length; cnt++)
{
swImg[imgName][HpbImgPreload.arguments[cnt]] = new Image();
swImg[imgName][HpbImgPreload.arguments[cnt]].src = HpbImgPreload.arguments[cnt];
}
}
}
}
// HpbImgFind:
//
function HpbImgFind(doc, imgName)
{
for (var i=0; i < doc.layers.length; i++)
{
var img = doc.layers[i].document.images[imgName];
if (!img) img = HpbImgFind(doc.layers[i], imgName);
if (img) return img;
}
return null;
}
// HpbImgSwap:
//
function HpbImgSwap(imgName, imgSrc)
{
var appVer=parseInt(navigator.appVersion);
var isNC=false,isN6=false,isIE=false;
if (document.all && appVer >= 4) isIE=true; else
if (document.getElementById && appVer > 4) isN6=true; else
if (document.layers && appVer >= 4) isNC=true;
if (isNC||isN6||isIE)
{
if (document.images)
{
var img = document.images[imgName];
if (!img) img = HpbImgFind(document, imgName);
if (img) img.src = imgSrc;
}
}
}
var swImg; swImg=new Array;
//-->
<style>
<!--
body{
background-repeat:no-repeat;
}
-->
</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>
No.2ベストアンサー
- 回答日時:
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>
ソースを書き直して頂いて真にありがとうございます。
ご指摘の様にソースを書き換えleftの値を変えたら
満足行く位置に変更できました。
No.3
- 回答日時:
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>
No.1
- 回答日時:
こんにちは
>表示する位置を変えたいのです。
body要素の背景画像の位置ということでしょうか?
background-positionを指定することで、表示する位置を変えられます。
https://developer.mozilla.org/ja/docs/Web/CSS/ba …
なお、ご質問には関係ありませんけれど・・・
>ネットにあった物で、私が少しアレンジしたものです。
相当に古いものを拾ったようですね。
・bodyのbackground属性は廃止になっていますので、CSSで指定しましょう。
https://developer.mozilla.org/ja/docs/Web/HTML/E …
・後半のスクリプトも、相当に古いものと思われます。
(ナビゲータの判定も今は不要かと。)
というか、その部分のスクリプトはご質問には関係なさそうですが、別で使っているのでしょうか?
(使っていないのなら不要でしょう)
画像が重いようなら、事前にロードしておくというのはあると思いますが・・
早速のアドバイスありがとうございます。
良ければもう少しお付き合い願います。
>body要素の背景画像の位置ということでしょうか?
4秒間隔で表示する画像の位置です。(現在のままだとleft:0だと思います)
>background-positionを指定することで、表示する位置を変えられます。
具体的に何処をどう変えれば良いのでしょうか?
かなり古いソースが載っているようですが、
私には分かりません・・・
上記を加味してどの様なソースになるのでしょうか??
お願いします。
説明も加えてもらえるとありがたいのですが・・・
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQueryでのドラッグアンドドロ...
-
bxsliderで最初に縦に複数表示...
-
jQueryで同じクラス名のものを...
-
複数bxsliderをタブで切り替え...
-
画像のフェードイン・フェード...
-
lightbox風のモーダルウィンド...
-
デフォルト非表示にしたい。【t...
-
画像の表示位置
-
MAX関数を使ってからLEFT JOIN...
-
前回の質問の続き
-
c++std::string型をTCHARに変換...
-
MFCで画像を表示させているので...
-
createElementで作成した要素を...
-
フッター上部に謎の隙間
-
jspでcssが読み込めない
-
どの<li><a> が押されたか判別...
-
スクロール可能なチェックボックス
-
1枚の画像をクリックすると複数...
-
読み込んだQRコードをフォーム...
-
jQueryで特定id以外の下にある...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
デフォルト非表示にしたい。【t...
-
jQueryで同じクラス名のものを...
-
Colorboxがうまく設置できません
-
jQueryでのドラッグアンドドロ...
-
bxsliderで最初に縦に複数表示...
-
Javascript初心者|jQueryの.va...
-
画像マウスオーバーで、checkb...
-
アップロードファイルの種類に...
-
複数bxsliderをタブで切り替え...
-
JavaScriptでの画像切り替えを...
-
サムネイルにカーソルを合わせ...
-
時間差で画像を動作させたいjav...
-
マウスオーバーにて画像に虫眼...
-
「画像クリックで音声再生」を ...
-
JavaScriptでクレイアニメ。ち...
-
クリックでクリッカブルマップ...
-
JQueryでオープニングアニメー...
-
交互に入れ替わる画像を複数配置
-
JavaScript/CANVASでの画像読込...
-
VBAでIEを動かす場合、下記の①...
おすすめ情報