Javascript 将div放置在图像的底部_Javascript_Html_Dom

Javascript 将div放置在图像的底部

javascript html dom

Javascript 将div放置在图像的底部,javascript,html,dom,Javascript,Html,Dom,我正在制作一个动态图像加载器，在每个图像的底部有3个热点。这些热点将调用函数我现在有两个问题： 1）当页面第一次加载时，我的content div将无法正确调整到图像的大小，直到我遍历整个数组 2）我需要得到图像底部的热点，并使其与图像大小保持一致。我希望我的热点总是在图片的底部 CSS顶部、左侧高度和宽度值现在是硬编码的，这样我就可以有一个起点。我似乎无法让他们在页面加载时动态更改图像 <!DOCTYPE HTML> <html> <head>

我正在制作一个动态图像加载器，在每个图像的底部有3个热点。这些热点将调用函数

我现在有两个问题：

1）当页面第一次加载时，我的content div将无法正确调整到图像的大小，直到我遍历整个数组

2）我需要得到图像底部的热点，并使其与图像大小保持一致。我希望我的热点总是在图片的底部

CSS顶部、左侧高度和宽度值现在是硬编码的，这样我就可以有一个起点。我似乎无法让他们在页面加载时动态更改图像

<!DOCTYPE HTML>
<html>
  <head>
        <style type="text/css">
        #content{
            position: relative; 
            margin: 20px 0 20px 40px; 
            padding: 5px 0; 
            background-repeat: no-repeat; 
            padding: 10px;
            border:1px solid black;
        }
        #hotspot-a{ 
            position: absolute; 
            top: 1040px; 
            left: 0px; 
            width: 272px; 
            height: 83px; 
            background-color: transparent; 
            border: 1px solid red;
        }
        #hotspot-b{ 
            position: absolute; 
            top: 1040px; 
            left: 290px; 
            width: 272px; 
            height: 83px; 
            background-color: transparent; 
            border: 1px solid yellow;
        }
        #hotspot-c{ 
            position: absolute; 
            top: 1040px; 
            left: 580px; 
            width: 272px; 
            height: 83px; 
            background-color: transparent; 
            border: 1px solid green;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">     
        $(document).ready(function () {
            $("#image").attr("src", images[0]);
        });     

        var badClicks = 0;
        var skipClicks = 0;
        var goodClicks = 0;

        var iCount = 0;
        var images = [];
        images[0] = "images/document.png";
        images[1] = "images/document2.png";
        images[2] = "images/document3.png";

        function nextImage(){
            iCount++;

            //If there are no more images in the array, go back to the first image
            if (images[iCount]==null) {
                iCount = 0;
            };

            //Change image source to new image
            $("#image").attr("src", images[iCount]);

            //Set content wrapper width & height to current image's
            $("#content").css("width", $("#image").css("width"));
            $("#content").css("height", $("#image").css("height"));

            //Store content wrapper's new width and height into variables
            var h = $("#content").css("height");
            var w = $("#content").css("width");

            //Move hotspots to bottom of new image
            $("#hotspot-a").css("top", h);
            $("#hotspot-b").css("top", h);
            $("#hotspot-c").css("top", h);          

            //Change width of hotspots
        }

        //Do something with data for "bad" hotspot
        function bad(){
            badClicks++;
        }

        //Do something with data for "skip" hotspot
        function skip(){
            skipClicks++;
            nextImage();
        }

        //Do something with data for "good" hotspot
        function good(){
            goodClicks++;
        }

        //Show the collected data
        function displayResults(){
            $("#results").append("<br />Bad: " + badClicks 
            + " Skip: " + skipClicks 
            + " Good: " + goodClicks);
        }
    </script>
  </head>
  <body>
    <div id="content">
        <img id="image" />
        <div id="hotspot-wrapper">
            <div id="hotspot-a" onclick="bad();"></div>
            <div id="hotspot-b" onclick="skip();"></div>
            <div id="hotspot-c" onclick="good();"></div>
        </div>
    </div>
        <br />
        <div id="results">
            <button onclick="displayResults();" style="text-align: center">Show results</button>
        </div>
  </body>
</html>

热点样式的宽度：33%怎么样？我尝试过的第一件事！这是一种工作方式，更多的是按钮的垂直定位，我似乎不知道。因为它们绝对定位，你可以有

bottom:0；身高：50%

或类似。这是个好主意！非常感谢。

//Move hotspot-wrapper to the bottom of the new image
            //Height of content wrapper - height of hotspot wrapper = new top
        $("#hotspot-wrapper").css("top", h - parseInt($("#hotspot-wrapper").css("height")));