Question

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

我现在有两个问题：

1）当页面首次加载时，我的内容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>

谢谢！非常感谢任何帮助或建议！

解决方案！

//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")));

位置div始终位于图像的底部

0 个答案: