响应式图像映射弹出窗口

时间：2015-12-09 04:30:21

标签： jquery html css popup mousehover

我想做一个弹出窗口悬停，所以当用户将鼠标悬停在图像区域地图上时，jquery切换弹出窗口显示。该部分工作得相当好，但我无法正确获取div的坐标，特别是在窗口调整为平板电脑或移动尺寸后。

直播网站： https://prodiveinternational.com/international-landing-page/

Plunker： 这是一个傻瓜：http://plnkr.co/edit/bcZwn0oUnPGUnwvodo32?p=preview

有没有办法让悬停相对于图像地图保持悬停，以便在屏幕调整大小时它可以正常工作？

$(document).ready(function (e) {
  $('img[usemap]').rwdImageMaps();
});

function showHover(modal) {
  $('#dominican').css({left: ($('#earth').offset().left + ( 182)) + 'px', top: ($('#earth').offsetTop) + 'px'});
  $('#mexico').css({left: ($('#earth').offset().left + ( 84)) + 'px', top: ($('#earch').offsetTop) + 'px'});

  console.log('earth width: ', $('#earth').width());
  if (modal === 'dominican') {
    $('#dominican').delay(250).fadeIn(250);
    $('#mexico').delay(250).fadeOut(250);
  } else {
    $('#mexico').delay(250).fadeIn(250);
    $('#dominican').delay(250).fadeOut(250);
  }
}

function hideHover() {
    $('#dominican').delay(250).fadeOut(250);
    $('#mexico').delay(250).fadeOut(250);
}
.pill {
    color: #FFF !important;
    width: 150px;
    height: 60px;
    padding: 10px 20px;
    text-decoration: none !important;
    font-size: 24px;
    overflow: visible;
    display: inline-block;
    line-height: 35px;
    vertical-align: bottom;
}

.footer-title {
    width: 100%;
    display: block;
    text-align: center;
    background-color: #eec364;
    text-transfom: uppercase;
    padding: 6px 0;
    color: #fff;
    margin-top: -5px;
}

.arrow-down {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #eec364;
    margin-left: 45%;
}

#dominican .footer-title {
    background-color: #66b8ec;
}

#dominican .arrow-down {
    border-top: 10px solid #66b8ec;
}

.left-pill {
    border-bottom: 2px solid #e68c5e;
    background-color: #eec364;
    border-bottom-left-radius: 500px;
    border-top-left-radius: 500px;
}

.left-pill:hover {
    background-color: #e68c5e;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}

.right-pill {
    background: #66b8ec;
    border: 0;
    border-bottom: 2px solid #4b8baf;
    border-bottom-right-radius: 500px;
    border-top-right-radius: 500px;
    font-size: 19px;
    line-height: 19px;
}

.right-pill:hover {
    background: #5eabd6;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}

.location-popup {
    width: 225px;
    display: none;
    position: absolute;
    top: -78px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Title</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
  <script src="https://www.prodiveinternational.com/wp-content/themes/prodivemex/js/jquery.rwdImageMaps.min.js"></script>

</head>
<body>
<div style="text-align: center;">
  <div style="position: relative;">
    <div id="mexico" class="location-popup">
      <img
        src="https://prodiveinternational.com/wp-content/uploads/2015/09/11391541_10153361315524938_5579018781886490858_n.jpg"
        style="width:225px;"/><span class="footer-title">Mexico</span>

      <div class="arrow-down"></div>
    </div>
    <div id="dominican" class="location-popup">
      <img
        src="https://prodiveinternational.com/wp-content/uploads/2015/09/11391541_10153361315524938_5579018781886490858_n.jpg"
        style="width:225px;"/><span class="footer-title">Dominican Republic</span>

      <div class="arrow-down"></div>
    </div>
    <img id="earth" style="height:auto; width: 533px;"
         src="https://www.prodiveinternational.com/wp-content/themes/prodivemex/images/Scuba_Map.jpg"
         title="Select Dive Location" usemap="#locations">

    <map name="locations">
      <area id="mexico-link" alt="Mexico" onmouseover="showHover('mexico');" onmouseout="hideHover('mexico')"
            href="https://www.prodivemex.com/" shape="poly" coords="106,186,243,182,241,268,116,264"/>
      <area id="dominican-link" alt="Dominican Republic" onmouseover="showHover('dominican');" onmouseout="hideHover('dominican')"
            href="https://prodiveinternational.com/" shape="poly" coords="273,181,269,268,448,266,442,181"/>
    </map>
  </div>
  <br/>
    <span style="text-align: center; font-size: 32px;">
      Choose Your <strong>Paradise</strong>
      <br/>
      <br/>
      <div>
        <a class="pill left-pill" href="https://www.prodivemex.com/" onmouseover="showHover('mexico');"
           onmouseout="hideHover('mexico')">Mexico</a><a class="pill right-pill"
                                                         href="https://prodiveinternational.com/"
                                                         onmouseover="showHover('dominican');"
                                                         onmouseout="hideHover('dominican')"><span>Dominican<br/> Republic
        </span></a>

        <div style="clear:both"></div>
      </div>
    </span>
</div>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

我的解决方案并不是我所需要的，但会完成这项工作。我要分层有背景的背景图像。使用完全透明的图像，然后将div背景设置为地球。当图像地图区域悬停时，它会将弹出层叠在地球上。透明图像将始终位于顶部，以便保持区域和焦点。

＆＃13;
＆＃13; 
  $(document).ready(function (e) {
    $('img[usemap]').rwdImageMaps();
  });

  function showHover(modal) {
     $('#earth').addClass('earth-' + modal);
  }

  function hideHover(modal) {
    $('#earth').removeClass('earth-' + modal)
  }
＆＃13; 
#earth {
  height: auto;
  width: 527px;
  background-image: url(https://www.prodiveinternational.com/wp-content/themes/prodivemex/images/Scuba_Map.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-size: 100%;
  transition: background-image 1s, transform 1s;
}

.earth-mexico {
  background-image: url(https://www.prodiveinternational.com/wp-content/themes/prodivemex/images/Scuba_Mexico.png), 
    url(https://www.prodiveinternational.com/wp-content/themes/prodivemex/images/Scuba_Map.jpg) !important;
}

.earth-dominican {
  background-image: url(https://www.prodiveinternational.com/wp-content/themes/prodivemex/images/Scuba_Dominican.png), 
    url(https://www.prodiveinternational.com/wp-content/themes/prodivemex/images/Scuba_Map.jpg)  !important;
}

img {
	max-width: 100%;
	height: auto;
}
.pill {
    color: #FFF !important;
    width: 150px;
    height: 60px;
    padding: 10px 20px;
    text-decoration: none !important;
    font-size: 24px;
    overflow: visible;
    display: inline-block;
    line-height: 35px;
    vertical-align: bottom;
}

.footer-title {
    width: 100%;
    display: block;
    text-align: center;
    background-color: #eec364;
    text-transfom: uppercase;
    padding: 6px 0;
    color: #fff;
    margin-top: -5px;
}

.arrow-down {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #eec364;
    margin-left: 45%;
}

#dominican .footer-title {
    background-color: #66b8ec;
}

#dominican .arrow-down {
    border-top: 10px solid #66b8ec;
}

.left-pill {
    border-bottom: 2px solid #e68c5e;
    background-color: #eec364;
    border-bottom-left-radius: 500px;
    border-top-left-radius: 500px;
}

.left-pill:hover {
    background-color: #e68c5e;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}

.right-pill {
    background: #66b8ec;
    border: 0;
    border-bottom: 2px solid #4b8baf;
    border-bottom-right-radius: 500px;
    border-top-right-radius: 500px;
    font-size: 19px;
    line-height: 19px;
}

.right-pill:hover {
    background: #5eabd6;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}

.location-popup {
    width: 225px;
    display: none;
    position: absolute;
    top: -78px;
}
＆＃13; 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Title</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

  <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://www.prodiveinternational.com/wp-content/themes/prodivemex/js/jquery.rwdImageMaps.min.js"></script>


</head>

<body>
  <div style="text-align: center;">
    <img id="earth" src="https://www.prodiveinternational.com/wp-content/themes/prodivemex/images/Scuba_Blank.png" title="Select Dive Location" usemap="#locations">
    <map name="locations">
      <area id="mexico-link" alt="Mexico" onmouseover="showHover('mexico');" onmouseout="hideHover('mexico')" href="https://www.prodivemex.com/" shape="poly" coords="106,186,243,182,241,268,116,264" />
      <area id="dominican-link" alt="Dominican Republic" onmouseover="showHover('dominican');" onmouseout="hideHover('dominican')" href="https://prodiveinternational.com/" shape="poly" coords="273,181,269,268,448,266,442,181" />
    </map>
    <br/>
    <span style="text-align: center; font-size: 32px;">
      Choose Your <strong>Paradise</strong>
      <br/>
      <br/>
      <div>
        <a class="pill left-pill" href="https://www.prodivemex.com/" onmouseover="showHover('mexico');"
           onmouseout="hideHover('mexico')">Mexico</a><a class="pill right-pill"
                                                         href="https://prodiveinternational.com/"
                                                         onmouseover="showHover('dominican');"
                                                         onmouseout="hideHover('dominican')"><span>Dominican<br/> Republic</span>
        </a>
    <div style="clear:both"></div>
  </div>
  </span>
  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题