響應式圖像映射與翻轉/圖像交換位於div外

我遇到了響應圖像映射&翻轉的問題。我使用Matt Stow的響應式圖像jquery插件來確保座標響應。一旦點擊，lightview被拉起。那些工作很好。響應式圖像映射與翻轉/圖像交換位於div外

問題在於當地圖的某個區域懸停時，交換圖像的位置。交換的圖像位於div的外部，並將所有內容踢到頁面上。

<script type="text/javascript"> 
<!-- 
function MM_swapImgRestore() { //v3.0 
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; 
} 
function MM_preloadImages() { //v3.0 
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); 
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) 
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} 
} 

function MM_findObj(n, d) { //v4.01 
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { 
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} 
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; 
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); 
if(!x && d.getElementById) x=d.getElementById(n); return x; 
} 

function MM_swapImage() { //v3.0 
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) 
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} 
} 
//--> 
</script> 
<style> 
img[usemap] { 
border: none; 
height: auto; 
max-width: 100%; 
width: auto; 
} 
</style>

頁面中的元素看起來像：

<article class="span10"> 
    <div role="main" class="main"> <img src="imgs/graphics/SLoaders_page_main.jpg" alt="Superloaders options" width="846" height="809" border="0" usemap="#options" /> 
     <map name="options"> 
     <area shape="rect" coords="702,715,828,764" href="index.php" alt="back to home"> 
     <area shape="rect" coords="27,294,173,340"/)" href='lightview-3.0.8/lightview-3.0.8/example/lv_imgs/alc.jpg' alt='IntelliTruck System' class='lightview' onmouseover="MM_swapImage('Image1','','imgs/graphics/glows/ecu.jpg',1)" onmouseout="MM_swapImgRestore()" data-lightview-group='example' data-lightview-title="Automated Load Control" data-lightview-caption="This is some content on light view"/> 
     </map> 
    </div> 
    </article> 
    <script src="js/jquery.rwdImageMaps.min.js"></script> 
    <script> 
$(document).ready(function(e) { 
    $('img[usemap]').rwdImageMaps(); 
}); 
</script>

我發現this article解釋他們是如何抵消利潤率。我對js不夠熟悉，無法與我正在做的事情一起工作。

任何建議將不勝感激！

來源

2013-07-05 user2551881

的問題是圖像ID：

id = 「Image1」

我分配的標籤標識圖像，在左上角，而不是圖像映射。將id標籤移到正確的位置後，它似乎正常工作。

來源

2013-07-05 18:31:02 user2551881

響應式圖像映射與翻轉/圖像交換位於div外

回答

相關問題