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>
なんか、うれしくなってきた見習ですぅ。わくわく
2011年12月18日1:26 AM| カテゴリー: Java ScriptとJ Query,見習い奮闘記| コメント (0)
コメントフィード
トラックバックURL: https://pc.beginners-luck.net/pcwp/2011/12/18/java-script-magnify-image01.html/trackback