第65回 「文字と画像、画像を画面上の任意の位置に表示させる」
今回は文字と画像、画像を画面上の任意の位置に表示させるプログラムについて説明します。
任意の位置に表示するためのスタイルシートや手法は前回と変わりません。文字と画像を画面上の任意の位置に表示させるには<div>タグ内に、そのまま<img>タグを入れるだけです。
前回のプログラムに<img>タグを付け足したものが以下のものです。
<html>
<head>
<title></title>
<style type="text/css"><!--
#myText {
position:absolute;
top: 100px;
left: 0px;
}
--></style>
<script language="JavaScript"><!--
function moveText(obj,x,y)
{
document.getElementById(obj).style.left = x;
document.getElementById(obj).style.top = y;
}
// --></script>
</head>
<body>
<a href="#" onMouseover="moveText('myText',200,50)">(200,50)へ</a>
<br>
<a href="#" onMouseover="moveText('myText',0,100)">(0,100)へ</a>
<div id="myText">
この文字と画像が移動します。<br>
<img src="photo1.jpg">
</div>
</body>
</html>
</html>
これで文字と画像をまとめて動かすことができます。もっとも文字や画像に限らず<div>タグなどで囲んで入れ込んでしまえば何でも同じように動かすことができます。
ただ画像のみを動かしたい場合には、わざわざ<div>タグで<img>タグを囲む必要はありません。<img>タグのみで十分に機能を果たせるためです。ゲームなどでは<img>タグを利用し直接操作する方が簡単です。
以下のプログラムは<div>タグでなく直接<img>タグを使ったものです。
<html>
<head>
<title></title>
<style type="text/css"><!--
#myIMG {
position:absolute;
top: 100px;
left: 0px;
}
--></style>
<script language="JavaScript"><!--
function moveImage(obj,x,y)
{
document.getElementById(obj).style.left = x;
document.getElementById(obj).style.top = y;
}
// --></script>
</head>
<body>
<a href="#" onMouseover="moveImage('myIMG',200,50)">(200,50)へ</a>
<br>
<a href="#" onMouseover="moveImage('myIMG',0,100)">(0,100)へ</a>
<img src="photo1.jpg" id="myIMG">
</body>
</html>
次回はマウスイベントによって画像を表示／非表示するプログラムについて説明します。