Dealing with a responsive image inside a parent container, alongside an absolutely positioned element with higher z-index in the same container has proven to be problematic. While it works fine on a static design, making it responsive causes the pin to appear incorrectly due to browser miscalculations.
To address this issue, I resorted to using jQuery to calculate the responsive image size in pixels and determine the pixel-based left and top positions for the pin. However, even with this workaround, the problem persists.
HTML
<div class="col-xs-12" id="map">
<img src="../img/world-map.jpg" alt="world-map" id="world-map">
<a href="#" class="sydney" data-toggle="modal" data-target="#sydney-modal"></a>
<a href="#" class="melbourne" data-toggle="modal" data-target="#sydney-modal"></a>
<a href="#" class="perth" data-toggle="modal" data-target="#sydney-modal"></a>
<a href="#" class="singapore" data-toggle="modal" data-target="#sydney-modal"></a>
<a href="#" class="hongkong" data-toggle="modal" data-target="#sydney-modal"></a>
<a href="#" class="india" data-toggle="modal" data-target="#sydney-modal"></a>
<a href="#" class="china" data-toggle="modal" data-target="#sydney-modal"></a>
</div> <!-- end col map-->
Test Page Link:
LESS
#map
{
position:relative;
#world-map
{
width:100%;
z-index:-100;
} //end word-map
.sydney{
position:absolute;
width:12px;
height:12px;
background-color:red;
/*left: 81.5%;
top: 77.5%;*/
}
}
Javascript solution
$( document ).ready(function() {
$('nav li:contains("Contact us")').addClass("active");
//get width and height of image in px
var imgWidth=$("#world-map").width();
var imgHeight=$("#world-map").height();
var sydneyLeft=0.815;
var sydneyTop=0.775;
var sydneyLeftpx=0.815*imgWidth;
var sydneyToppx=0.775*imgHeight;
sydneyLeftpx=toInt(sydneyLeftpx);
sydneyLeftpx=sydneyLeftpx-6;
sydneyToppx=toInt(sydneyToppx);
sydneyToppx=sydneyToppx-6;
$(".sydney").css({left: sydneyLeftpx+"px",
top: sydneyToppx+"px"
});
});
Note: A screen resize function has not been implemented for the JavaScript code yet, testing has only been done by refreshing the browser window.
If anyone can provide insight into why these values are being improperly calculated and offer a solution, it would be greatly appreciated.