堆栈内存溢出
  繁体   English   中英

添加div后图像不断向下移动

[英]image keeps moving down upon adding a div

 原文  2015-11-03 16:03:18  4   1    jquery/ html/ css

问题描述

我已经为jpg图像创建了一个imageMap，并且每次单击图像的圆形区域时都会在该图像上添加一个div。

每次我单击该区域时，图像都会一直向下移动，结果会影响div的位置。 我究竟做错了什么？

这是我的代码： 

 <html>
 <head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="papaya.css">
        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
        <script src="http://cameronspear.com/downloads/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script>
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <script src="papaya.js"></script>
 <style>
.jumbotron {
                padding: 0.5em 0.6em;
                h1 {
                    font-size: 2em;
                }
                p {
                    font-size: 1.2em;
                    .btn {
                        padding: 0.5em;
                    }
                }
            }

#lymphNode img {
            display:block;
                margin-left: auto;
                margin-right: auto;
            }

            .menuItem {
                background-color: #e0e0ff;
                width:299px;
                height:137px;
                border:2px solid #000;
            }

            .fontSize {
                padding-top:50px;
                color: #00000;
                font-family: Georgia, Times, serif; 
                font-size: 200%; 
                text-align: center;
            }
            .menuItem:hover { -moz-box-shadow: 0 0 50px #ccc; 
                              -webkit-box-shadow: 0 0 50px #ccc; box-shadow: 0 0 50px #ccc; 
            } 

            .smallViewer {
                margin-left:75px;width:700px;height:420px;
            }
</style>
<script>
            $(document).ready(function ()
            {
                $(".links").click(function ()
                {
                    $visible = $("divs:visible");
                    $(".divs:visible").hide();
                    $("#" + $(this).attr("data-showdiv")).show();
                });

                $("map#imageMap").click(function (event) {
                    var target = $(event.target);
                    var targetId = target.attr('id');
                    var matches = targetId.match(/\d+/)[0];
                    $("#div" + matches).show();
                });
                $("img").click(function(event){
                   alert(event.pageX+ ' , ' + event.pageY); 
                });

            });
        </script>
 </head>
 <body>
  <div class="container">
 <div class="jumbotron">
                <h2 style="text-align:center;">Head And Neck Therapy </h2>
            </div>

 <div style="width:1140px; height:550px;border:2px solid #000;">
    <div style="float: left">
                    <div style="width:300px; height: 550px;display: inline-block;"> 
                        <a href="#" class="links" data-showdiv="viewer"> <div class="menuItem fontSize">  </div> </a>
                        <a href="#" class="links" data-showdiv="lymphNode"> <div class="menuItem fontSize">  </div> </a>
                        <a href="#" class="links" data-showdiv="userForm"> <div class="menuItem fontSize">  </div> </a>
                        <a href="#" class="links" data-showdiv="confirmation"> <div class="menuItem fontSize"> </div> </a>
                    </div>
    </div>

    <div id="parentDiv" style="width:832px; height: 548px;display: inline-block;"> 
        <div id="div1" title="node1" style="width:13px;height:13px;position:relative;top:190;left:485;background-color:#ff4c4c;opacity:0.5;display:none"></div>
        <div id="div2" title="node2" style="width:13px;height:15px;position:relative;top:193;left:507;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div3" title="node3" style="width:15px;height:17px;position:relative;top:223;left:417;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div4" title="node4" style="width:15px;height:17px;position:relative;top:227;left:400;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div5" title="node5" style="width:12px;height:15px;position:relative;top:258;left:412;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div6" title="node6" style="width:12px;height:13px;position:relative;top:260;left:355;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div7" title="node7" style="width:13px;height:12px;position:relative;top:273;left:331;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div8" title="node8" style="width:13px;height:12px;position:relative;top:258;left:338;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div10" title="node10" style="width:13px;height:12px;position:relative;top:240;left:498;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div11" title="node11" style="width:13px;height:12px;position:relative;top:254;left:496;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div12" title="node12" style="width:13px;height:12px;position:relative;top:250;left:505;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div13" title="node13" style="width:10px;height:12px;position:relative;top:267;left:505;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div14" title="node14" style="width:12px;height:12px;position:relative;top:280;left:499;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div15" title="node15" style="width:16px;height:12px;position:relative;top:325;left:512;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div16" title="node16" style="width:13px;height:12px;position:relative;top:310;left:537;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div17" title="node17" style="width:13px;height:12px;position:relative;top:304;left:493;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div18" title="node18" style="width:11px;height:12px;position:relative;top:301;left:479;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div19" title="node19" style="width:13px;height:12px;position:relative;top:319;left:478;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div20" title="node20" style="width:13px;height:12px;position:relative;top:315;left:465;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div21" title="node21" style="width:13px;height:12px;position:relative;top:300;left:458;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div22" title="node22"style="width:13px;height:12px;position:relative;top:345;left:438;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div23" title="node23" style="width:13px;height:12px;position:relative;top:322;left:428;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div24" title="node24" style="width:11px;height:20px;position:relative;top:313;left:422;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div25" title="node25" style="width:13px;height:17px;position:relative;top:302;left:412;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div26" title="node26" style="width:13px;height:15px;position:relative;top:305;left:395;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div27" title="node27" style="width:13px;height:12px;position:relative;top:330;left:390;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div28" title="node28" style="width:13px;height:17px;position:relative;top:460;left:385;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div29" title="node29" style="width:13px;height:15px;position:relative;top:468;left:370;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div30" title="node30" style="width:13px;height:17px;position:relative;top:485;left:387;background-color:#ff4c4c;opacity:0.5;display:none;"></div>

        <div id="lymphNode" class="divs" style="display:none;width:830px; height:548px;"> 
        <img src="image.jpg" width="500" height="500" alt="Planets" usemap="#imageMap">

        <map id="imageMap" name="imageMap">
            <area shape="circle" coords="325,185,10" href="#" alt="Buccal Node1" title="Buccal Node1" id="node1"/>
            <area shape="circle" coords="345,185,8" href="#" alt="Buccal Node2" title="Buccal Node2" id="node2"/>
            <area shape="circle" coords="256,214,8" href="#" alt="Buccal Node3" title="Buccal Node3" id="node3"/>
            <area shape="circle" coords="239,216,8" href="#" alt="Buccal Node4" title="Buccal Node4" id="node4"/>
            <area shape="circle" coords="251,248,8" href="#" alt="Buccal Node5" title="Buccal Node5" id="node5"/>
            <area shape="circle" coords="192,250,8" href="#" alt="Buccal Node6" title="Buccal Node6" id="node6"/>
            <area shape="circle" coords="170,266,8" href="#" alt="Buccal Node7" title="Buccal Node7" id="node7"/>
            <area shape="circle" coords="177,248,8" href="#" alt="Buccal Node8" title="Buccal Node8" id="node8"/>
            <area shape="circle" coords="336,233,8" href="#" alt="Buccal Node10" title="Buccal Node10" id="node10"/>
            <area shape="circle" coords="336,246,5" href="#" alt="Buccal Node11" title="Buccal Node11" id="node11"/>
            <area shape="circle" coords="344,241,5" href="#" alt="Buccal Node11" title="Buccal Node12" id="node12"/>
            <area shape="circle" coords="342,260,5" href="#" alt="Buccal Node11" title="Buccal Node13" id="node13"/>
            <area shape="circle" coords="337,272,5" href="#" alt="Buccal Node11" title="Buccal Node14" id="node14"/>
            <area shape="circle" coords="353,316,10" href="#" alt="Buccal Node11" title="Buccal Node15" id="node15"/>
            <area shape="circle" coords="376,303,8" href="#" alt="Buccal Node11" title="Buccal Node16" id="node16"/>
            <area shape="circle" coords="332,295,8" href="#" alt="Buccal Node11" title="Buccal Node17" id="node17"/>
            <area shape="circle" coords="316,293,5" href="#" alt="Buccal Node11" title="Buccal Node18" id="node18"/>
            <area shape="circle" coords="317,313,5" href="#" alt="Buccal Node11" title="Buccal Node19" id="node19"/>
            <area shape="circle" coords="304,305,5" href="#" alt="Buccal Node11" title="Buccal Node20" id="node20"/>
            <area shape="circle" coords="297,293,5" href="#" alt="Buccal Node11" title="Buccal Node21" id="node21"/>
            <area shape="circle" coords="275,337,5" href="#" alt="Buccal Node11" title="Buccal Node22" id="node22"/>
            <area shape="circle" coords="268,314,8" href="#" alt="Buccal Node11" title="Buccal Node23" id="node23"/>
            <area shape="circle" coords="260,300,10" href="#" alt="Buccal Node11" title="Buccal Node24" id="node24"/>
            <area shape="circle" coords="251,291,8" href="#" alt="Buccal Node11" title="Buccal Node25" id="node25"/>
            <area shape="circle" coords="234,296,5" href="#" alt="Buccal Node11" title="Buccal Node26" id="node26"/>
            <area shape="circle" coords="229,323,5" href="#" alt="Buccal Node11" title="Buccal Node27" id="node27"/>
            <area shape="circle" coords="224,451,5" href="#" alt="Buccal Node11" title="Buccal Node28" id="node28"/>
            <area shape="circle" coords="209,457,5" href="#" alt="Buccal Node11" title="Buccal Node29" id="node29"/>
            <area shape="circle" coords="228,474,8" href="#" alt="Buccal Node11" title="Buccal Node30" id="node30"/>
        </map>



        </img>
  </div>
  </div>
  </div>
</body>
<script>

</script>
</html>

1 个解决方案

解决方案1
 0  2015-11-03 17:17:20

将parentDiv更改为相对位置，将子div的位置更改为相对位置。

这是代码 

 <html>
 <head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="papaya.css">
        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
        <script src="http://cameronspear.com/downloads/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script>
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <script src="papaya.js"></script>
 <style>
.jumbotron {
                padding: 0.5em 0.6em;
                h1 {
                    font-size: 2em;
                }
                p {
                    font-size: 1.2em;
                    .btn {
                        padding: 0.5em;
                    }
                }
            }

#lymphNode img {
            display:block;
                margin-left: auto;
                margin-right: auto;
                position:auto;
            }

            .menuItem {
                background-color: #e0e0ff;
                width:299px;
                height:137px;
                border:2px solid #000;
            }

            .fontSize {
                padding-top:50px;
                color: #00000;
                font-family: Georgia, Times, serif; 
                font-size: 200%; 
                text-align: center;
            }
            .menuItem:hover { -moz-box-shadow: 0 0 50px #ccc; 
                              -webkit-box-shadow: 0 0 50px #ccc; box-shadow: 0 0 50px #ccc; 
            } 

            .smallViewer {
                margin-left:75px;width:700px;height:420px;
            }
</style>
<script>
            $(document).ready(function ()
            {
                $(".links").click(function ()
                {
                    $visible = $("divs:visible");
                    $(".divs:visible").hide();
                    $("#" + $(this).attr("data-showdiv")).show();
                });

                $("map#imageMap").click(function (event) {
                    var target = $(event.target);
                    var targetId = target.attr('id');
                    var matches = targetId.match(/\d+/)[0];
                    if($("#div"+matches).css('display') != 'none')
                    {
                        $("#div" + matches).hide();
                    }
                    else {
                    $("#div" + matches).show();
                    }
                });

                $("#parentDiv div").click(function (event) {
                    var clicked = event.target;
                    var currentID = clicked.id || "No ID!";
                    alert(currentID);
                });

            });
        </script>
 </head>
 <body>
  <div class="container">
 <div class="jumbotron">
                <h2 style="text-align:center;">Head And Neck Therapy </h2>
            </div>

 <div style="width:1140px; height:550px;border:2px solid #000;">
    <div style="float: left">
                    <div style="width:300px; height: 550px;display: inline-block;"> 
                        <a href="#" class="links" data-showdiv="viewer"> <div class="menuItem fontSize"> Scan Images  </div> </a>
                        <a href="#" class="links" data-showdiv="lymphNode"> <div class="menuItem fontSize"> Select Affected Region </div> </a>
                        <a href="#" class="links" data-showdiv="userForm"> <div class="menuItem fontSize">  Patient Details</div> </a>
                        <a href="#" class="links" data-showdiv="confirmation"> <div class="menuItem fontSize"> Confirmation </div> </a>
                    </div>
    </div>

    <div id="parentDiv" style="width:832px; height: 548px;display: inline-block;position:relative;"> 

        <div id="div1" class="divs" title="node1" style="width:13px;height:13px;position:absolute;top:177;left:484;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div2" class="divs" title="node2" style="width:13px;height:15px;position:absolute;top:177;left:505;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div3" class="divs" title="node3" style="width:15px;height:17px;position:absolute;top:208;left:415;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div4" class="divs" title="node4" style="width:15px;height:17px;position:absolute;top:211;left:398;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div5" class="divs" title="node5" style="width:12px;height:15px;position:absolute;top:242;left:412;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div6" class="divs" title="node6" style="width:12px;height:13px;position:absolute;top:247;left:354;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div7" class="divs" title="node7" style="width:13px;height:12px;position:absolute;top:262;left:329;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div8" class="divs" title="node8" style="width:13px;height:12px;position:absolute;top:245;left:337;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div10" class="divs" title="node10" style="width:13px;height:12px;position:absolute;top:228;left:496;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div11" class="divs" title="node11" style="width:13px;height:12px;position:absolute;top:242;left:493;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div12" class="divs" title="node12" style="width:13px;height:12px;position:absolute;top:239;left:505;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div13" class="divs" title="node13" style="width:10px;height:12px;position:absolute;top:255;left:503;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div14" class="divs" title="node14" style="width:12px;height:12px;position:absolute;top:267;left:497;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div15" class="divs" title="node15" style="width:16px;height:12px;position:absolute;top:314;left:512;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div16" class="divs" title="node16" style="width:13px;height:12px;position:absolute;top:298;left:535;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div17" class="divs" title="node17" style="width:13px;height:12px;position:absolute;top:292;left:493;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div18" class="divs" title="node18" style="width:11px;height:12px;position:absolute;top:290;left:478;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div19" class="divs" title="node19" style="width:13px;height:12px;position:absolute;top:308;left:478;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div20" class="divs" title="node20" style="width:13px;height:12px;position:absolute;top:302;left:464;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div21" class="divs" title="node21" style="width:13px;height:12px;position:absolute;top:290;left:456;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div22" class="divs" title="node22"style="width:13px;height:12px;position:absolute;top:333;left:436;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div23" class="divs" title="node23" style="width:13px;height:12px;position:absolute;top:310;left:425;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div24" class="divs" title="node24" style="width:11px;height:20px;position:absolute;top:290;left:422;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div25" class="divs" title="node25" style="width:13px;height:17px;position:absolute;top:285;left:412;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div26" class="divs" title="node26" style="width:13px;height:15px;position:absolute;top:290;left:395;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div27" class="divs" title="node27" style="width:13px;height:12px;position:absolute;top:320;left:388;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div28" class="divs" title="node28" style="width:13px;height:17px;position:absolute;top:445;left:383;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div29" class="divs" title="node29" style="width:13px;height:15px;position:absolute;top:452;left:368;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div30" class="divs" title="node30" style="width:13px;height:17px;position:absolute;top:468;left:387;background-color:#ff4c4c;opacity:0.5;display:none;"></div>

        <div class="divs smallViewer" style="display:none;" id="viewer"> 
                        <div class="papaya"> </div> 
                    </div>

        <div id="lymphNode" class="divs" style="display:none;width:830px; height:548px;"> 
        <img src="image.jpg" width="500" height="500" alt="Planets" usemap="#imageMap">

        <map id="imageMap" name="imageMap">
            <area shape="circle" coords="325,185,10" href="#" alt="Buccal Node1" title="Buccal Node1" id="node1"/>
            <area shape="circle" coords="345,185,8" href="#" alt="Buccal Node2" title="Buccal Node2" id="node2"/>
            <area shape="circle" coords="256,214,8" href="#" alt="Buccal Node3" title="Buccal Node3" id="node3"/>
            <area shape="circle" coords="239,216,8" href="#" alt="Buccal Node4" title="Buccal Node4" id="node4"/>
            <area shape="circle" coords="251,248,8" href="#" alt="Buccal Node5" title="Buccal Node5" id="node5"/>
            <area shape="circle" coords="192,250,8" href="#" alt="Buccal Node6" title="Buccal Node6" id="node6"/>
            <area shape="circle" coords="170,266,8" href="#" alt="Buccal Node7" title="Buccal Node7" id="node7"/>
            <area shape="circle" coords="177,248,8" href="#" alt="Buccal Node8" title="Buccal Node8" id="node8"/>
            <area shape="circle" coords="336,233,8" href="#" alt="Buccal Node10" title="Buccal Node10" id="node10"/>
            <area shape="circle" coords="336,246,5" href="#" alt="Buccal Node11" title="Buccal Node11" id="node11"/>
            <area shape="circle" coords="344,241,5" href="#" alt="Buccal Node11" title="Buccal Node12" id="node12"/>
            <area shape="circle" coords="342,260,5" href="#" alt="Buccal Node11" title="Buccal Node13" id="node13"/>
            <area shape="circle" coords="337,272,5" href="#" alt="Buccal Node11" title="Buccal Node14" id="node14"/>
            <area shape="circle" coords="353,316,10" href="#" alt="Buccal Node11" title="Buccal Node15" id="node15"/>
            <area shape="circle" coords="376,303,8" href="#" alt="Buccal Node11" title="Buccal Node16" id="node16"/>
            <area shape="circle" coords="332,295,8" href="#" alt="Buccal Node11" title="Buccal Node17" id="node17"/>
            <area shape="circle" coords="316,293,5" href="#" alt="Buccal Node11" title="Buccal Node18" id="node18"/>
            <area shape="circle" coords="317,313,5" href="#" alt="Buccal Node11" title="Buccal Node19" id="node19"/>
            <area shape="circle" coords="304,305,5" href="#" alt="Buccal Node11" title="Buccal Node20" id="node20"/>
            <area shape="circle" coords="297,293,5" href="#" alt="Buccal Node11" title="Buccal Node21" id="node21"/>
            <area shape="circle" coords="275,337,5" href="#" alt="Buccal Node11" title="Buccal Node22" id="node22"/>
            <area shape="circle" coords="268,314,8" href="#" alt="Buccal Node11" title="Buccal Node23" id="node23"/>
            <area shape="circle" coords="260,300,10" href="#" alt="Buccal Node11" title="Buccal Node24" id="node24"/>
            <area shape="circle" coords="251,291,8" href="#" alt="Buccal Node11" title="Buccal Node25" id="node25"/>
            <area shape="circle" coords="234,296,5" href="#" alt="Buccal Node11" title="Buccal Node26" id="node26"/>
            <area shape="circle" coords="229,323,5" href="#" alt="Buccal Node11" title="Buccal Node27" id="node27"/>
            <area shape="circle" coords="224,451,5" href="#" alt="Buccal Node11" title="Buccal Node28" id="node28"/>
            <area shape="circle" coords="209,457,5" href="#" alt="Buccal Node11" title="Buccal Node29" id="node29"/>
            <area shape="circle" coords="228,474,8" href="#" alt="Buccal Node11" title="Buccal Node30" id="node30"/>
        </map>
  </div>

  <div id="userForm" class="divs" style="height:550px; width: 800px;display:none;"> 
                        <div class="container" style="width:800px;margin-top:20px;">
                            <form role="form">
                                <div class="form-group">
                                    <label for="id">Patient ID:  <input type="email" class="form-control" id="email"></label>
                                </div>
                                <div class="form-group">
                                    <label for="pname"> Patient Name : 
                                        <input type="text" class="form-control" id="pname"> </label>
                                </div>
                                <div class="radio"> <label for="pgender" > Gender : </label>
                                    <label><input type="radio" name="optradio1">Male</label>
                                    <label><input type="radio" name="optradio1">Female</label>
                                </div>
                                <br/>
                                <div class="form-group">
                                    <label for="pAge"> Patient Age : 
                                        <input type="text" class="form-control" id="page"> </label>
                                </div>
                                <div class="radio"> <label for="psmoking" > Smoking Status : </label>
                                    <label><input type="radio" name="optradio2"> Yes </label>
                                    <label><input type="radio" name="optradio2"> No </label>
                                </div>
                                <br/>
                                <div class="radio"> <label for="psmoking" > Ethnicity : </label>
                                    <label><input type="radio" name="optradio3"> White </label>
                                    <label><input type="radio" name="optradio3"> African American </label>
                                    <label><input type="radio" name="optradio3"> Hispanic </label>
                                    <label><input type="radio" name="optradio3"> Asian/Pacific Islander </label>
                                    <label><input type="radio" name="optradio3"> Other </label>
                                </div>

                                <div class="checkbox">
                                    <label><input type="checkbox" value="">Glottic</label>
                                </div>
                                <div class="checkbox">
                                    <label><input type="checkbox" value="">Subglottic</label>
                                </div>
                                <div class="checkbox">
                                    <label><input type="checkbox" value="">Supraglottic</label>
                                </div>
                                <div class="checkbox">
                                    <label><input type="checkbox" value="">Transglottic</label>
                                </div>
                                <button type="submit" class="btn btn-default">Submit</button>
                            </form>
                        </div>
  </div>
  </div>
</body>
<script>

</script>
</html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在更改/删除另一个div时将图像添加到不同的div div下移 当div旁边的div被移除时，div保持移动 文字不断将图片往下推 div中的jQuery幻灯片不断滚动 重新加载页面后图像不断消失 jquery ui position() 每次点击都会继续向下移动菜单 如果div向下移动，则不会触发按钮单击 根据视口稍微向上或向下移动div DIV使用JavaScript上下移动
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM