最新消息: USBMI致力于为网友们分享Windows、安卓、IOS等主流手机系统相关的资讯以及评测、同时提供相关教程、应用、软件下载等服务。

js,级联替换(图片)

IT圈 admin 45浏览 0评论

js,级联替换(图片)

<!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>阵营选择&nbsp;&nbsp;<select name="zy" onChange="changZY(this.value)">
                    <option>--请选择阵营--</option>
                </select></p>
                <p>角色选择&nbsp;&nbsp;<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>

js,级联替换(图片)

<!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>阵营选择&nbsp;&nbsp;<select name="zy" onChange="changZY(this.value)">
                    <option>--请选择阵营--</option>
                </select></p>
                <p>角色选择&nbsp;&nbsp;<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>

发布评论

评论列表 (0)

  1. 暂无评论