image对象.ppt

使用path控件的例子 5-* image对象 image对象提供了装入文档的图形的访问方法，image对象是document对象的子对象之一，引用它可以通过document对象进行，在HTML中定义一个IMG元素，可以给它命名，如name= “IMG1“，指定image对象的图形来源，如 SRC = ”gif/image1.gif“，也可以定义图形的高度，宽度以及图形的边界形式等。 在JavaScript中，通过image( )构造器先创建 image对象，如：image1 = new Image( ) ，再指定图形来源或其它属性，如：image1.src = “gif/image1.gif”，通过这种方式创建的图形对象不是Web页面原来的图形，它被存放在浏览器的缓冲区中，用于替换页面中已有的图形。 5-* image对象属性和方法 上图为Navigator和Internet Explorer共有的image对象的属性。这些属性反映了img标志的属性。 border属性表示图形边框线粗细（象素数）。但是使用image( )构造器创建的图形边框设置为0，border属性为只读。 图形的height和width属性指定显示图形的窗口区高度和宽度，如果图形大于窗口区尺寸，则浏览器窗口会缩小图形以适应分配的空间，height和width属性设置为象素或浏览器窗口尺寸的百分比。 hspace和vspace属性用于指定图形与周围文本之间的边界宽度，其中hspace属性指定图形左右边界的象素数，vspace指定图形上下边界的象素数。 Image对象没有Navigator和Internet Explorer共有的方法。Navigator定义了 handleEvent（）方法，可以直接调用图形的事件处理器。 Internet Explorer定义了10个方法，支持事件处理和DHTML。 5-* 动态图形显示 在Internet连接速度比较快，或者要浏览的网页在局域网内甚至在本地的情况下，可以不用使用image( )构造器创建一系列的image对象，指定其所对应的图形文件，因为这样做的目的就是把后面要用到的图形先下载放到浏览器缓冲区内，而网络速度比较快的时候，直接对页面的img元素的src属性进行改变即可。如我们本课程开始时的图形切换的例子，也可以看成是图形动态切换的例子，它通过点击页面按钮来切换页面显示图形，但它在HTML中定义了IMG元素：IMG NAME=“IMG1”SRC=“gif/image1.gif”，然后使用如下的JavaScript语句 document.form1.IMG1.src = “gif/image2.gif“ 来修改IMG1的src属性，从而完成图形切换。 如果在网络连接速度比较慢的情况下，最好先使用image( )对象构造器创建image对象，把以后要显示的图形先下载到浏览器缓冲区中，以方便后面切换，尤其是在需要创建动画效果的页面中，如果图形切换的速度依赖于互联网的下载速度，那么后果可能是灾难性的。 因此可以使用JavaScript的动态显示功能，只要按照下列步骤： 1、用image( )构造器创建存放图形的一系列image对象； 2、装入与新建图形对象相关联的图形文件，即把图形的src属性设置为指定的图形 文件名； 3、将HTML文档images数组中的图形src属性设置为缓存图形的src来显示该图形。 5-* 动态图形切换的例子 在这个例子中，我们首先在页面上使用IMG WIDTH=50 HEIGHT=50/IMG定义了25个IMG元素，但是并未给它们指定src，而在JavaScript中，我们先使用数组定义一组（5个）image对象，然后给每个image对象的src指定一个图形文件，在下面，通过调用JavaScript函数给页面上的25个IMG元素随机取一个，安排其src为5个image图象的一个，于是，就出现这样的页面效果：页面上的小图块在随机地改变颜色，页面呈现色彩斑斓的效果。另外我们在页面中还设置了一个按钮可以暂停和重新开始上述过程。 下面是其HTML源码：random.htm HTML HEAD TITLE图形随机切换/TITLE /HEAD BODY bgcolor=pink FORM name=form1 CENTER IMG WIDTH = 50 HEIGHT = 50 /IMG 5-* 动态图形切换的例子（续） 在本例中，页面打开后，页面中的25个图形开始随机被5种颜色的小图块替换，