Question

我为其中一个页面的顶部创建了一个横幅，并在横幅左上角的http://jandswebsitedesigns.com/test/im-new-here.html处添加了徽标。我想使用该徽标作为主页的链接。我把它设置为一个圆圈，因为它只是一个更大的点击目标（特别是在移动网站和ipad上）。我无法让它在ipad或移动网站上运行。我是新手，需要一些帮助。我选择了这种方法，因为我认为图像调整大小更好，作为横幅图像的一部分。网址为http://jandswebsitedesigns.com/test/im-new-here.html。

<style>
    img[usemap] {
    border: none;
    height: auto;
    max-width: 100%;
    width: auto;
}

</style>

<div id="bg-container">
     <img src="images/test-bg2.png" usemap="#logomap">
          <map name="logomap">
              <area shape="circle" coords="200,90,175"
                    href="index.html" alt="main page">
          </map>
</div>

<!-- this is for side bar menu-->
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">              </script><style type="text/css"></style>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-    ui.min.js"></script>

<script src="js/simpleslider/jquery.simplesidebar.min.js"></script>

<!-- image map stuff-->
<script src="jquery.rwdImageMaps.min.js"></script>


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

    $('area').on('click', function() {
    alert($(this).attr('alt') + ' clicked');
    });
});
</script>

Answer 1

看起来“顶栏”div（透明）位于图像上部的顶部，覆盖可点击区域。

尝试将此添加到CSS（标记内）：

div#top-bar {
  height: 0px;
}

Answer 2

添加

#header a{
  display:inline-block;
}

使链接成为其内容的大小。

如何让我的代码在ipad和移动网站上为RWD图像映射工作？

2 个答案: