Question

我需要在网站上设置多圈形状的可点击响应图像。

我可以：

使用HTML / JS / Jquery / Bootstrap / CSS实现此目的

图片：

是圆形的，带有空白/透明角落
在鼠标悬停时更改为其他类似图像，并在鼠标离开时更改回来
在页面上不止一个
当我点击它们时，让我去别的地方
应该是响应性的，上面列出的效果也是如此

我整天都在尝试，但我仍有问题;这是我的代码：

https://jsfiddle.net/83t58rbm/2（ JsFiddle ）

由于我在网站上没有任何声誉，这里有一个拙劣的网址，下面的代码也是如此，请参考JsFiddle：

https://jsfiddle.net/83t58rbm/2/embedded/result（全屏）

$(document).ready(function() {

  $("area[title='area_enfance']").mouseover(function() {
    $('img[name=enfance]').attr('src', $('img[name=enfance]').attr('data-active'));
  });
  $("area[title='area_intimite']").mouseover(function() {
    $('img[name=intimite]').attr('src', $('img[name=intimite]').attr('data-active'));
  });
  $("area[title='area_enfance']").mouseout(function() {
    $('img[name=enfance]').attr('src', $('img[name=enfance]').attr('data-inactive'));
  });
  $("area[title='area_intimite']").mouseout(function() {
    $('img[name=intimite]').attr('src', $('img[name=intimite]').attr('data-inactive'));
  });
});

<body>
  <div class="row">
    <div class="col-md-6">
      <map name="m_intimite">
        <area shape="circle" coords="272,272,272" href="someurl" title="area_intimite">
      </map>
      <img name="intimite" usemap="#m_intimite" src="original-img" class="img-responsive" data-active="new-img" data-inactive="original-img" />
    </div>
    <div class="col-md-6">
      <map name="m_enfance">
        <area shape="circle" coords="272,272,272" href="otherurl" title="area_enfance">
      </map>
      <img name="enfance" usemap="#m_enfance" src="original-img" class="img-responsive" data-active="new-img" data-inactive="original-img" />
    </div>
  </div>
  </script>

  </html>

主要问题：

如果您在计算机浏览器上尽可能地减小全屏结果的宽度，图像会像预期的那样减少一点（也许它应该能够减少更多（？）），但当然，圆的半径（具有鼠标悬停/鼠标悬停jquery效果和要去的网址）不会减少，因为它设置为272,272,272坐标，因此允许任何用户将鼠标指向空白区域，并且仍然具有鼠标悬停效果和href活跃。

http://imgur.com/FcbnhJO（屏幕截图）

正如您在屏幕截图中看到的那样，蓝色圆圈表示与顶部图像失去同步的圆圈，因为我在页面加载后尽可能地减少了浏览器宽度。

任何帮助将不胜感激，抱歉格式糟糕的帖子。

很多爱。

Answer 1

我认为你可以简化一下。试一试。

.circle {
    border-radius: 100%;
    height: 0;
    overflow: hidden;
    padding-bottom: 100%;
    position: relative;
}
.circle a {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    position: absolute;
    background-size: cover;
    background-position: center center;
}

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6">
            <div class="circle">
                <a href="#" data-active="http://placehold.it/600x600/ff0000/ffffff" data-inactive="http://placehold.it/600x600"></a>
            </div>
        </div>

        <div class="col-xs-6">
            <div class="circle">
                <a href="#" data-active="http://placehold.it/600x600" data-inactive="http://placehold.it/600x600/ff0000/ffffff"></a>
            </div>
        </div>
    </div>
</div>

$(document).ready(function () {
    $('.circle a').each(function () {
        var activeImg = $(this).data('active'),
            inactiveImg = $(this).data('inactive');

        $(this).css('background-image', 'url(' + inactiveImg + ')')
        .mouseover(function () {
            $(this).css('background-image', 'url(' + activeImg + ')')
        })
        .mouseout(function () {
            $(this).css('background-image', 'url(' + inactiveImg + ')');
        });
    });
});

<强> Demo

响应式圆形图像链接具有悬停效果

1 个答案: