jquery show/hide 이미지를 크게 만듭니다.

커스텀 jquery 메뉴가있는 joomla 템플릿이 있습니다. 너비가 모든 요소에 대해 100 %이지만지도 위에 마우스를 올려 놓으면 오버레이가 약간 커지고 그 이유를 알 수 없습니다. 문제는 파이어 폭스와 IE 11이지만, 제 코드의 버그라고 생각합니다. Joomla 3.2 및 Flexi Custom Code (버전 1.3.1 - 2012 년 9 월 30 일)를 사용합니다.jquery show/hide 이미지를 크게 만듭니다.

<HTML> 
<BODY> 
    <img src="templates/images/Banner_menu.png" width="896" height="410" usemap="#MyMap" alt="" id="main"/> 
    <img src="templates/images/Banner_1.png" width="896" height="410" usemap="#MyMap" alt="" id="One"/> 
    <img src="templates/images/Banner_2.png" width="896" height="410" usemap="#MyMap" alt="" id="Two"/> 
    <img src="templates/images/Banner_3.png" width="896" height="410" usemap="#MyMap" alt="" id="Three"/> 
    <map name="MyMap"> 
    <area shape="rect" coords="0,0,283,430" href="/index.php/one" alt="#One" /> 
    <area shape="rect" coords="283,0,566,430" href="/index.php/two" alt="#Two" /> 
    <area shape="rect" coords="566,0,896,430" href="/index.php/three" alt="#Three"/> 
    </map> 
</BODY> 
</HTML> 

<script> 
$.noConflict(); 
jQuery(document).ready(function($) { 

$(document).ready(function(e) { 
$('img[usemap]').rwdImageMaps();  
$("#One").hide(); 
$("#Two").hide(); 
$("#Three").hide(); 
$("area").on({ 
mouseenter: function() { 
$($(this).attr('alt')).show(); 
}, 
mouseleave: function() { 
$("#One").hide(); 
$("#Two").hide(); 
$("#Three").hide(); 
}, 
click: function() { 
window.open("/index.php/" + $(this).attr('link') ,"_self"); 
} 
}); 
}); 
}); 
</script> 

<style> 
div { 
top: 0; 
left: 0; 
overflow: hidden; 
} 
img[usemap] { 
border: none; 
height: auto; 
max-width: 100%; 
width: auto; 
} 
#One { 
position:absolute; 
top:0; 
left:0; 
width:100%; 
} 
#Two { 
position:absolute; 
top:0; 
left:0; 
width:100%; 
} 
#Three { 
position:absolute; 
top:0; 
left:0; 
width:100%; 
} 
#main { 
position:relative; 
top:0; 
left:0; 
width:100%; 
} 
</style>

출처

2014-03-13 user3416151

좋아요. 해결 방법은 100 % 너비를 취하는 것보다 너비를 계산하는 것이 었습니다.

</script> 
<style> 
div { 
top: 0; 
left: 0; 
} 
img[usemap] { 
    border: none; 
    height: auto; 
    max-width: 100%; 
    width: auto; 
} 
#One { 
position: absolute; 
left: 5px; 
top: 5px; 
width: calc(100% - 10px); 
} 
#Two { 
position: absolute; 
left: 5px; 
top: 5px; 
width: calc(100% - 10px); 
} 
#Three { 
position: absolute; 
left: 5px; 
top: 5px; 
width: calc(100% - 10px); 
} 
#main { 
position:relative; 
top:0; 
left:0; 
width:100%; 
} 
</style>

출처

2014-04-03 09:39:43 user3416151

jquery show/hide 이미지를 크게 만듭니다.

답변

관련 문제