JavaScript04图片文字对象.docVIP

04 图片文字对象 图片在html中的标志是： img src=”图片文件名” width=xxx height=xxx 其中：img为图片标志；src为图片源；width和height分别表示图片的宽和高。 在网页文件未保存时，图片文件名中的路径使用了变量，保存后则可以使用相对路径。为简单化处理，请在放置网页的文件夹中建立一个专门用于存放图片的文件夹，将图片文件放到该文件夹中。一般，习惯上将该文件夹取名为img。如此，表示图片文件名的写法就成为：src=”img/图片文件名”。 为了能对图片对象加以控制，需要给它起个名字，用id来命名，即在标签中加入： id = XXX字样。文字所具有的属性就是前边提到的那几个src、width和height。 程序例1，单击图片改变图片的大小。 script language=JavaScript function ch() {t1.width=200 t1.height=200} /script img id=t1 src=gyf.jpg onclick=ch() 可见图片对象的名称是“t1”，接受单击事件的对象也是他自身。单击后图片的大小该为宽和高都是200。 改动1：鼠标进入、按下、松开、移出图片大小发生不同的变化。 函数带参数，两个参数，分别表示宽和高。 script language=JavaScript function ch(nw,nh) {t1.width=nw t1.height=nh} /script img id=t1 src=gyf.jpg onmouseover=ch(200,200) onmousedown=ch(200,100) onmouseup=ch(100,200) onmouseout=ch(200,300) 改动2：由文本框输入的数字决定图片的大小。加入输入文本框、按钮。 script language=JavaScript function ch() {t1.width=twn.value t1.height=thn.value} /script img id=t1 src=gyf.jpg input type=input name=twn input type=input name=thn input type=button name=tw value=确定 onclick=ch() 文本框的名字分别是twn和thn。函数的操作就是将文本框的内容放到图片的宽度和高度中去。 下面来看文字对象。前面虽然用过文字，但使用的是文本框，现在，我们将直接对网页中的文字进行处理。 文字标签：font face=隶书 size=6 color=#FF00FF天地人/font。 标签为font，属性有face（字体）、size（尺寸）和color（颜色）。 face的使用取决于用户操作系统安装的字体，一般我们使用最常见的字体。 size只有7中大小，数值越大字也越大，超过7时不报错，此时字的大小和7同。 color（颜色）。16进制表达：“#XXXXXX”前两位为红色成分，中间两位为绿色成分，最后两位为蓝色成分。各分量最小值00（0），在，最大值FF（255）。 常用颜色： FF0000 红 00FF00 绿 0000FF 蓝 000000 黑 FFFF00 黄 FF00FF 紫 00FFFF 青 FFFFFF 白 程序例2，单击改变文字颜色。 script language=JavaScript function ch() { f1.color=00FFFF} /script font face=隶书 size=3 id=f1 onclick=ch() 天/font 对象为font，名称为f1，函数ch()的作用是改变f1的颜色。 改动1，鼠标移到文字上文字变色。 将事件onclick改为onmouseover即可。 上例鼠标移出后文字仍为改变后的颜色，应如何处理？ 处理方法：将ch()改为带参数的函数，在font标签中添加一个onmouseout事件。颜色参数由不同的事件传入。 script language=JavaScript function ch(cl) {f1.color=cl} /script font face=隶书 size=7 id=f1 onmouseover=ch(ff0000) onmouseout=ch(000000)天/font 练习题：添加三个按钮，分别为红、绿、蓝。单击按钮文字的颜色出现相应的改变。 在加一些颜色按钮应该没什么问题吧？ 仿上题，改变font对象的大小size。用三个不同的按钮，单击后字的大小和按钮上的文字相符。如下图： 给程序加上注解。注解只是为了阅读程序，不参与到程序的运行