如何创建一个图像与“可忍受”在jQuery或HTML5中显示额外信息的区域 [英] How to create an image with "hoverable" areas that show additional information in jQuery or HTML5
问题描述
我试图创建一些我认为在jQuery或HTML5中应该很简单的事情，但是我们很难为它找到资源。如果任何人都可以提供帮助，我们将非常感激。
目标 -
我有一张包含16个可以放大的部分的图像。这个图像还有其他部分，完全是静态的。如果用户将鼠标悬停在某个预定义的区域上，我想要在图像上弹出缩略图和标题。这是一个静态页面，不需要动态内容。
现在整个图像都是PNG图像，但是从矢量图像中保存下来，所以如果喜欢，我可以将这些区域转换为SVG。理想情况下，我可以将它保留为单个图像，因为这对于更广泛的项目很有用。
我可以用HTML5或jQuery来做这件事。 / p>
对此的解决方案是否已经存在？我觉得这是必须的。还有其他问题吗？
我已经意识到这一点，并计划使用类似于此的备份计划 - http://www.gethifi.com/blog/jquery-vs-flash-for-interactive-map
您可以将图像分成16个独立的图像，并使用更传统的技术进行悬停。如果这不可行，您也可以考虑使用定义列表技术，或者老式的 MAP标记与一些javascript 。
I'm trying to create something which I feel should be simple to do in jQuery or HTML5, but am having a tough time finding the resources for it. If anyone can help, it would be much appreciated.
Goal- I've got a single image with 16 sections that are hoverable. There are other parts of this image, that are completely static. If a user hovers over one of the predefined areas, I would like for a thumbnail and title to pop up over the image. This is a static page and no content needs to be dynamic.
Right now the entire image is a PNG, but it was saved out from a vector image, so I could convert the areas to SVGs if preferred. Ideally, I could keep it as a single image as this would be useful for a wider variety of projects.
I'm ok with doing it in HTML5 or jQuery.
Does a solution for this already exist? I feel like it must. Any additional questions?
I'm already aware of this and plan to use something similar to this as a backup plan - http://www.gethifi.com/blog/jquery-vs-flash-for-interactive-map
You could split up the image into 16 separate images and do your hovers with more traditional techniques. If that's not feasible, you might also consider this technique using a definition list, or the old-school MAP tag with some javascript.
这篇关于如何创建一个图像与“可忍受”在jQuery或HTML5中显示额外信息的区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
