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功能

回答

相關問題