Question

我有一个html文件，其中有两个图像，其中的区域已映射并由imagemapster标记。我希望其中一个图像叠加在另一个图像上，上面的图像可以被拖动。虽然我很接近实现我想要的东西，但是出了点问题。图像是可拖动的，但此图像的默认位置低于第一张图像。我希望它在另一个之上。同时具有降低的不透明度。当页面重新加载时，它似乎叠加了几分之一秒。样式中的语句不能正常工作。我可以猜测他们被jquery-ui或其他一些风格所覆盖。任何人都可以指出如何解决这个问题吗？

locate.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的默认值

CSS样式无法与jquery一起运行

1 个答案: