CSS样式不能与jquery功能

我有一个html文件，其中有两个图像的区域映射和标记imagemapster。我希望其中一幅图像叠加在另一幅上面，上面的图像可以拖动。虽然我非常接近实现我的目标，但是出现了一些问题。图像可拖拽，但此图像的默认位置低于第一张图像。我想要它在另一个之上。也减少了不透明度。当页面重新加载时，它似乎叠加了几分之一秒。样式中的语句不能按预期的方式工作。尽管我猜测他们正在被jquery-ui或其他一些风格所覆盖。任何人都可以指出如何解决这个问题？CSS样式不能与jquery功能

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(); 
    }); 
});

来源

2015-07-02 Souvik Das

确保在你的CSS是你希望在最前面的图像的z-index比图像的z-index的大你希望在底部。 –

仍然无法正常工作。据我所知，html文档中的样式正在被覆盖。我甚至尝试过！重要的，但这也无济于事。 –

首先，你应该只有一个$(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默认值

来源

2015-07-02 07:40:49 Sacreyoule

我可以同意，但这并不能解决我说的问题。 –

CSS样式不能与jquery功能

回答

相关问题