29、下拉列表直接选择背景

29、下拉列表直接选择背景

<html>

 

<head>

<title>网页特效---下拉列表直接选择背景</title>

<style type="text/css">BODY {

       FONT-FAMILY: "宋体"; FONT-SIZE: 9pt; MARGIN-LEFT: 4px; MARGIN-RIGHT: 0px; MARGIN-TOP: 0px

}

A {

       COLOR: black; FONT-SIZE: 9pt; FONT-WEIGHT: 400; TEXT-DECORATION: none

}

A:hover {

       COLOR: red; FONT-SIZE: 9pt; FONT-WEIGHT: 400; TEXT-DECORATION: underline

}

A:active {

       COLOR: #ff0033; CURSOR: hand; FONT: 9pt "宋体"

}

</style>

<meta content="text/html; charset=gb2312" http-equiv="Content-Type">

<script language="JavaScript">

 

<!--

 

image1= new Image();

 

image1.src = "images/SHU.JPG";

 

image2= new Image();

 

image2.src = "images/A.GIF";

 

image3= new Image();

 

image3.src = "images/B.jpg";

image4= new Image();

 

image4.src = "images/C.jpg";

 

 

 

function imgchange(){

 

       var imageNum =  document.form.selImage.selectedIndex + 1;

 

       fname = eval("image" + imageNum + ".src")

 

      

document.body.background =  eval("image" + imageNum + ".src")

//eval(imgName + ".src");

}

 

//-->

 

</script>

 

</head>

 

<body bgColor="#FEF4D9">

<font color="red" face="隶书" size="6">

 

<p align="center"></font><font COLOR="#000000"> </font></p>

 

<p align="center"><font face="隶书" size="5" color="#0000FF"><strong>下拉列表直接选择背景</strong></font></p>

 

<p align="center"> </p>

<div align="center"><center>

 

<table border="1" borderColor="#0000FF" borderlight="green" height="150" width="410" bordercolorlight="#00FFFF" bordercolordark="#0000FF" style="border-collapse: collapse" cellpadding="0" cellspacing="0">

<TBODY>

  <tr>

    <td align="middle" height="24" width="404"><strong><font color="red" size="5">  </font><font 

    face="宋体" size="3" color="#0000FF">一般网页的背景图片都是设计时设置的,在浏览时不能改动,这里提供一个可以浏览时通过下拉列表动态改变背景的特效,在下面由列表选择图片项目后,再单击“显示”按钮,可以使窗口动态改变背景,使网页更有交互性。</font></strong></td> 

  </tr> 

  <tr> 

    <td align="center" height="114" width="404"><form name="form"> 

      <p align="center"><select name="selImage" size="1"> 

        <option selected value="欢迎光临 请选择背景">欢迎光临 请选择背景</option> 

        <option value="蓝天白云">蓝天白云</option> 

        <option value="鹅卵石">鹅卵石</option> 

        <option value="石块">石块</option> 

      </select><input onclick="imgchange()" type="button" value="显示"> </p> 

    </form> 

    <p> </td> 

  </tr> 

</TBODY> 

</table> 

</center></div> 

 

</body> 

</html>

 

Write a comment

Comments: 0