1

すべての画像の下部に 3 つのホットスポットを持つ動的な画像ローダーを作成しています。これらのホットスポットは関数を呼び出します。

現在、次の 2 つの問題があります。

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

0 に答える 0