座標は常に左上から始まりますが、『ウィンドウの大きさに合わせて右下から』という手法です。
SAMPLE解説
<script language="javascript" type="text/javascript">
onload = moveImg;
onresize = moveImg;
function moveImg(){
var obj = getSize();
var curImg = document.getElementById('imgTest');
curImg.style.top = (obj.height - curImg.height) + 'px';
curImg.style.left = (obj.width - curImg.width) + 'px';
}
function getSize(){
var wdh = 0;
var hgt = 0;
//基本はwindowを記述しないが、I.E.の場合エラーが発生する。
if(!window.innerWidth){
//I.E.用。(document.body.client・・)はI.E.6以前のバージョン
wdh = document.documentElement.clientWidth?document.documentElement.clientWidth:document.body.clientWidth;
hgt = document.documentElement.clientHeight?document.documentElement.clientHeight:document.body.clientHeight;
}else{
wdh = window.innerWidth;
hgt = window.innerHeight;
}
return {width:wdh, height:hgt}
}
</script>
ブラウザの描画画面の幅、高さを取得します。
I.E.以外のブラウザでは、以下のプロパティです。
・window.innerWidth;
・window.innerHeight;
『windowは省略可能のはず』なのですが、I.E.の場合、そんなプロパティがないので、変数と勘違いしてエラーを出すことがあります。なので、windowのプロパティを指定する場合は、例外として記載しておいたほうがよいです。
I.E.の場合は以下となります。
(I.E.7以降)
・document.documentElement.clientWidth
・document.documentElement.clientHeight
(I.E.6以前)
・document.body.clientWidth
・document.body.clientHeight
上記プロパティで取得できますので、そこから画像の幅、高さを減算すれば、右下に画像を貼れるわけです。
画面がリサイズされたときにも再処理するように設定しています。
onresize = moveImg;
PR