Java Scriptを使って写真を拡大してみる

写真を拡大するのにJava Scriptを使ってみました。

ECサイトとかで、「商品を拡大する」虫眼鏡みたいなのででてきますよね。なんか、カッコE。

コード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<title>写真拡大</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
dl {
width:400px;
margin:5px auto;
}
dd {
float: left;
padding:5px 5px 0 0;
}
</style>
</head>
<body>
<dl>
<dt><img src="img/imgBig01.jpg" width="400" height="300" alt="" name="bigimg" /></dt>
<dd><img src="img/imgBig01.jpg" width="50" height="38" alt=""
onmouseover="document.bigimg.src='img/imgBig01.jpg'" /></dd>
<dd><img src="img/imgBig02.jpg" width="50" height="38" alt=""
onmouseover="document.bigimg.src='img/imgBig02.jpg'" /></dd>
<dd><img src="img/imgBig03.jpg" width="50" height="38" alt=""
onmouseover="document.bigimg.src='img/imgBig03.jpg'" /></dd>
</dl>
</body>
</html>

▼サンプルはこちら

なんか、うれしくなってきた見習ですぅ。わくわく

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


コメントフィード

トラックバックURL: https://pc.beginners-luck.net/pcwp/2011/12/18/java-script-magnify-image01.html/trackback