SHOJI's Code
 仕事や趣味で書いた各種言語のプログラミングコード(エクセルVBA,PHP,C/C++/C#,JavaScript等)、その他雑記。
2017.10<<123456789101112131415161718192021222324252627282930>>2017.12
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

以前、あるサイトを作ったときのそのトップページ。マップでガンガン画像を切り替えるような凝ったものを作った。そこまではいいんだけど、その後で「カウンター欲しいんですけど・・・」って依頼。その画像にCopyrightも含んでいるし、その下ってわけにも行かず、また画像をカウンターも含めてやり直すのも手間。結局レイヤーを作って画像の上にカウンターを持ってくることを思いついた。
<html>
<head>


(略)


<style media="screen" type="text/css"><!--
#counter {
position: absolute;
top: 0px;
left: 0px;
width: 40px;
height: 13px;
visibility: visible
}
--></style>
<script><!--
function move_counter()
{
var x;
var y;

x = document.body.clientWidth / 2;
if( x < 210 ) x = 210;
y = document.body.clientHeight / 2;
if( y < 210 ) y = 210;

x += 40 + Math.random()*1.1;
y += 155 + Math.random()*1.1;

counter.style.left = x;
counter.style.top = y;
}
//-->


(略)


</head>

<body bgcolor="black" text="silver" link="red" vlink="red"
alink="white" leftmargin="0" marginwidth="0"
topmargin="0" marginheight="0"
onload="CSScriptInit();move_counter();"
onresize="move_counter();">


(略)


<div id="counter">
<div align="center">
<img src="ctr.php?col=5&num=num.png" width="36" height="7" border="0">
</div>
</div>
</body>
</html>


メインの画像は常にページの中心に来るようにしていたので、まず中心位置を求め(210より小さいときに210にしているのは画像のサイズが420×420なのでそれ以上小さくならないから)、それからのオフセット分を足して位置を決定している。それを表示されたとき(onLoad)と、サイズが変わったとき(onResize)に呼び出し、位置を移動している。CSSScriptInit()はAdobe GoLive用のスクリプト初期化関数なのでここでは関係ない。
ちなみにカウンタとして使っている画像 ctr.php は以前の記事で書いたPHPスクリプトである。

テーマ:HP作成 - ジャンル:コンピュータ
コメント
この記事へのコメント
コメントを投稿する

管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL
この記事へのトラックバック
copyright © 2004-2006 SHOJI, Powered By FC2ブログ all rights reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。