js,级联替换（图片）

最新推荐文章于 2022-04-18 00:20:15 发布

maiyikai

最新推荐文章于 2022-04-18 00:20:15 发布

阅读量429

点赞数 1

本文链接：https://blog.csdn.net/maiyikai/article/details/48193545

版权

<!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.οnlοad=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>