Question

我正在尝试创建一些我觉得在jQuery或HTML5中应该很简单的东西，但是我很难找到它的资源。如果有人可以提供帮助，我们将不胜感激。

目标 - 我有一个单独的图像，有16个部分是可以收集的。此图像的其他部分完全是静态的。如果用户悬停在其中一个预定义区域上，我希望在图像上弹出缩略图和标题。这是一个静态页面，没有内容需要是动态的。

现在整个图像都是PNG，但是它是从矢量图像中保存出来的，所以如果愿意，我可以将区域转换为SVG。理想情况下，我可以将其保留为单个图像，因为这对于更广泛的项目非常有用。

我可以在HTML5或jQuery中使用它。

这方面的解决方案是否已存在？我觉得它必须。还有其他问题吗？

我已经意识到这一点并计划使用与此相似的内容作为备用计划 - http://www.gethifi.com/blog/jquery-vs-flash-for-interactive-map

Answer 1

这样的东西？另存为.html文件示例。

  <html>
  <head>
    <style type="text/css">
        #image
        {
            background-image: url('http://www.breederretriever.com/blog/wp-content/uploads/2008/10/snoopy013f25505ii3.jpg');
            height:350px;
            width:450px;
        }
        #caption
        {
            height:50px;
            width:100%;
        }
        .hoverable{
            background-color:yellow;
        }
        .hoverable2{
            background-color:purple;
            color:white;
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('.hoverable').hover(function(){
            $('#caption').html($(this).attr('title'));
        },function(){
            $('#caption').html('');
        });

        $('.hoverable2').hover(function(){
            $('#caption').append($('#' + $(this).attr('title')));
        },function(){
            $('#dvExtraContainer').append($('#' + $(this).attr('title')));
        });
    });
    </script>
  </head>
  <body>
    <div id="caption" ></div>
    <div id="image"></div>
    <div title="This is a test" class="hoverable" style="position:absolute;top:100px;left:100px;">test</div>
    <div title="This is another test" class="hoverable" style="position:absolute;top:200px;left:230px;">test2</div>
    <div title="This is yet another test" class="hoverable" style="position:absolute;top:70px;left:430px;">test3</div>
    <div title="dvExtra1" class="hoverable2" style="position:absolute;top:150px;left:30px;">test4</div>
    <div style="display:none;" id="dvExtraContainer">
        <div id="dvExtra1" >
            Title: <img src="http://www.opticstalk.com/smileys/Snoopy.gif" />
        </div>
    </div>
  </body>
</html>

Answer 2

您可以将图像分成16个单独的图像，并使用更传统的技术进行徘徊。如果这不可行，您可能还会考虑这个technique using a definition list或旧学校MAP tag with some javascript。

如何创建具有“可缓存”区域的图像，这些区域在jQuery或HTML5中显示其他信息

2 个答案: