您的位置：首页 > Web前端 > JavaScript

js,级联替换（图片）

2015-09-03 09:53 507 查看

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>魔兽世界</title>

        <style>

           *{

               margin:0px auto;

               padding:0px;

           }

           body{

               margin:0px auto;

               padding:0px;

           }

           article{

               margin-top:5px;

               width:520px;

               height:400px;

               background:url(bj.png) repeat-y;

               text-align:center;

           }

           p{

               font-size:14px;

           }

           form{

               margin-top:30px;

               line-height:30px;

           }

           select{

               width:180px;}

           #div1{

               width:200px;

               height:200px;

               background:url(tb.png) no-repeat -4px -9px;

               border-radius:8em;

               position:relative;

               text-align:center;

               margin-top:40px;

           }

           #div2{

               width:167px;

               height:167px;

               border-radius:7em;

               position:absolute;

               z-index:1px;

               margin-top:16px;

               margin-left:17px;

           }

           img{

               width:167px;

               height:167px;

               border-radius:7em;

           }

        </style>

        <script>

           var arrzy=new Array();

           arrzy["联盟"]=["牧师","法师","黑暗神殿","术士"];

           arrzy["部落"]=["牧师","法师","黑暗神殿","术士"];



           var arrman=new Array();

           arrman["牧师"]=["ms.jpg"];

           arrman["法师"]=["fs.jpg"];

           arrman["术士"]=["ss.jpg"];

           arrman["黑暗神殿"]=["hasd.jpg"];



           var Zy;

           window.onload=function(){

               for(var i in arrzy){

                   Zy=new Option(i,i);

                   document.form1.zy.options.add(Zy);

               }

           }

           function changZY(value){

               document.form1.man.options.length=1;

               for(var i in arrzy[value]){

                   if(i==0){

                       Zy=new Option(arrzy[value][i],arrzy[value][i],true);

                   }else{

                       Zy=new Option(arrzy[value][i],arrzy[value][i]);

                   }

                   document.form1.man.options.add(Zy);

               }

               var str=document.form1.man.value;

               changman(str);

           }

           function changman(value){

               for(var i in arrman){

                   if(i==value){

                       var image=document.images;

                       image[0].src=arrman[i][0];

                   }

               }

               if(value=="--请选择角色--"){

                   var image=document.images;

                   image[0].src="sy.png";

               }

           }

        </script>

    </head>



    <body>

       <article>

             <p><h4>魔兽世界八大种族（图）</h4></p>

           <form name="form1">

               <p>阵营选择  <select name="zy" onChange="changZY(this.value)">

                   <option>--请选择阵营--</option>

                </select></p>

                <p>角色选择  <select name="man" onChange="changman(this.value)">

                   <option>--请选择角色--</option>

                </select></p>

          </form>

             <div id="div1">

               <div id="div2">

                   <img src="sy.png"/>

                </div>

            </div>

        </article>

    </body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航