曜日別背景画像の固定

質問

曜日別に背景画像を出す方法は下記のようになりますが、それを曜日ごとに背景画像の位置を固定する方法はどうしたら良いのでしょうか？

例えば月曜日の背景画像を右上に固定したり、金曜日の背景画像を左下に固定したりする方法です。

<script type="text/javascript">
<!--
wkimg = new Array();
wkimg[0] = "日曜日の画像URL";
wkimg[1] = "月曜日の画像URL";
wkimg[2] = "火曜日の画像URL";
wkimg[3] = "水曜日の画像URL";
wkimg[4] = "木曜日の画像URL";
wkimg[5] = "金曜日の画像URL";
wkimg[6] = "土曜日の画像URL";
xx = new Date();
document.write('<img src="'+ wkimg[xx.getDay()] +'">');
// -->
</script>

回答No.2

kurus · ベストアンサー

No.1ですが、上手くいきませんか？

JavaScriptはどこに記述していますか？
HEADタグの中でしょうか？

その場合、思い切ってJavaScriptタグを、
</BODY>の前あたりに記述してみてはいかがでしょうか？

例えばこのように、

<script language="javascript">
var date = new Date();
var day = date.getDay();

// 月曜の場合
if (day==1) {
document.write("<div style='top:20px;left:0px; position:absolute;'>");
document.write("<img src='"+wkimg[day]+"'>");
document.write("</div>");

}
// 火曜の場合
else if (day==2) {
　・・・
}

</script>
</BODY>
</HTML>

上記のように記述します。
そうするとHTMLをロードしながらJavaScriptも実行されるので、実現できます。

ちなみに<div>のstyle属性値ですが、
top:0;left:0　で左上です。

右上とかに配置したいのであれば、
window.availWidthなどで、ブラウザの最大幅から
イメージのサイズを減らした値を求めその値を設定すればよいです。
例)
var window_width = window.availWidth;
var img_width = 20;

style=top:0px;left:"+window_width-img_width+"
としてあげれば右上に表示できます。

お礼

ありがとうございます。
試してみます。

回答No.1

kurus

document.writeの中で、
imgタグをdivタグで囲み、divタグにstyleで絶対値指定してあげればよくないでしょうか？

例えば、
<div style="top:-70px;left:0px; position:absolute;">
<img src="～～～"/></div>
みたいな感じでできると思います。

試してみてください。

補足

試してみましたが上手くいきませんでした。
月曜日は右上に固定、火曜日は左上に固定というふうにしたいんですが・・・。