javascript - CSS 样式不适用于 jquery

Question

我有一个 html 文件，其中有两个图像，其区域由 imagemapster 映射和标记。我想要将其中一张图像叠加在另一张图像上，并且可以拖动上面的图像。虽然我非常接近实现我的意图，但有些地方出了问题。该图像可拖动，但该图像的默认位置在第一张图像下方。我想要它在另一个之上。还具有降低的不透明度。当页面重新加载时，它似乎被叠加了几分之一秒。样式中的语句未按预期工作。我可以猜到它们被 jquery-ui 或其他一些样式覆盖了。谁能指出如何解决这个问题？

定位.html.erb

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="/assets/jquery.imagemapster.min.js"></script>
<script src="/assets/threeddata.js"></script>

<style>
img {
    position: absolute;
}
#mainImage2 {
    opacity: 0.6;
}
</style>

<h1>Data Archival Library</h1>
</div>

<img id="mainImage" src="/assets/pic.png" usemap="#mark">
<map name="mark">
    <script type="text/javascript">
    document.write('<area href="#bottom" select="red1" shape="rect" coords="'+rowRackCoords.join(",")+'">');
    </script>
</map>

<div class="ui-widget-content" id="draggable">
<img id="mainImage2" src="/assets/unnamed.png" usemap="#mark2">
<map name="mark2">
    <script type="text/javascript">
    document.write('<area href="#top" select="red2" shape="rect" coords="'+shelfBoxCoords.join(",")+'">');
    </script>
</map>
</div>

.js

$(document).ready(function ()
{
    $('#mainImage').mapster({
        singleSelect : false,
        clickNavigate: true,
        mapKey: 'select',
        fill : true, altImage: '/assets/pic2.png',
        areas : [{key : 'red1', selected : true,}],
    });
});

$(document).ready(function ()
{
    $('#mainImage2').mapster({
        singleSelect : false,
        clickNavigate: true,
        mapKey: 'select',
        fill : true,
        fillColor : '00FF00',
        fillOpacity : 0.5,
        areas : [{key : 'red2', selected : true}],
    });
});

$(document).ready(function () {

    $(function () {
        $("#draggable").draggable();
    });
});

Answer 1

首先你应该只从一个开始$(document).ready(function () {}); :

$(document).ready(function () {
    $('#mainImage').mapster({
        singleSelect : false,
        clickNavigate: true,
        mapKey: 'select',
        altImage: '/assets/pic2.png',
        areas : [{key : 'red1', selected : true,}],
    });
    $('#mainImage2').mapster({
        singleSelect : false,
        clickNavigate: true,
        mapKey: 'select',
        fillColor : '00FF00',
        fillOpacity : 0.5,
        areas : [{key : 'red2', selected : true}],
    });
    $("#draggable").draggable();
});

我还没有测试过，但它会是一个更好的起点。

编辑:我删除了 fill : true，因为它是 Mapster 默认值