第7讲：JavaScript基于图像的应用
7.1 在HTML页面中插入图片的方法
在HTML页面中插入图片的方法如下：
<img src=" net.jpg" width="120" height="90" border="1">
HTML文档中除了可以插入图片外，还可以对图片设置鼠标事件，具体见〔示例一〕。
〔示例一〕
<html>
<head>
<title>1234</title>
</head>
<body>
<img src=" logo.gif" width="220" height="60" onmouseover="alert('别碰我!')">
</body>
</html>
图7-1 设置图片的鼠标事件
7.2 Image对象及其src属性
Image对象的创建方法如下：
imagename=new Image()（new Image中的“I”必须大写）
imagename.src="image-url"
Image对象及其src属性的使用方法见〔示例二〕
〔示例二〕
<html>
<head>
<title>使用JavaScript导入图片</title>
</head>
<body>
<img name="good">
<script language="javascript">
<!--
myimage=new Image();
myimage.src="logo.gif";
document.good.src=myimage.src;
//-->
</script>
</body>
</html>
深入使用Image对象
通过Image对象获取图片的长度与宽度，其方法如下：
n document.imagename.width;
n document.imagename.height;
上述方法的应用示例见〔示例三〕。
〔示例三〕
<html><head><title>使用JavaScript导入图片</title></head>
<body>
<img name="good" onmouseover="changesize()" onmouseout="changesize()">
<script language="javascript">
<!--
myimage=new Image();
myimage.src="logo.gif";
document.good.src=myimage.src;
function changesize()
{
document.good.height="30";
document.good.width="110";
}
function view()
{
var a=document.good.width
var b=document.good.height
alert ("图片的宽度是"+a+"，"+"图片的高度是"+b);
}
//-->
</script>
<p>
<form name="form">
<input type="button" value="view" name="button" onclick="view()">
</form></body></html>
图7-3 深入使用Image对象应用示例
7.4 图像边框属性的设定与获得
图像的边框属性，可通过方法imagename.border获得，具体应用示例见〔示例四〕。
〔示例四〕
<html><head><title>Welcome...</title></head><body>
<img name="good">
<script language="javascript">
<!--
myimg=new Image();
myimg.src="name.gif";
document.good.src=myimg.src;
document.good.height=60;
document.good.width=200;
function addborder()
{
document.good.border=1;
}
function view()
{
var width=document.good.border;
alert("您添加的图像边框其值为："+width+"像素！ ");
}
//-->
</script>
<p>
<form name="form">
<input type="button" value="添加图片的边框" onclick="addborder()">
<input type="button" value="查看图片的边框值" onclick="view()">
</form></body></html>
