为链接切割人脸答案

【问题标题】：Cutting up a human face for links为链接切割人脸
【发布时间】：2011-02-25 11:59:56
【问题描述】：

所以我尝试在 jQuery/css/html 页面中使用面部作为导航工具。最好的方法是切割每个元素，如眼睛、鼻子和嘴巴，然后使用 html 上的方形 div 对齐它们？我觉得无论我尝试多少，它最终都不会正确对齐？有人有什么建议吗？

【问题讨论】：

【解决方案1】：

或者您可以使用图像映射：http://www.w3schools.com/TAGS/tag_map.asp

编辑正如尼克在 cmets 中指出的那样，您也可以使用圆形。头部和眼睛等的最佳选择

【讨论】：

【解决方案2】：

我会将图像完全保留为单个背景图像，并将不可见的<a>标签放置在适当的位置以充当链接

【讨论】：

我想到了，但是一旦用户点击它，每个元素都必须分开。我现在使用 jQuery 为页面的不同区域设置动画块。一旦您单击一个，其他 4 个就会消失。只是在想，但如果我这样做，你知道我是否有可能让背景元素淡出并加载我拥有的预先切割的眼睛图像？

【解决方案3】：

我不会在这里使用 CSS 精灵，而是将其保留为单个图像，并用锚标记等覆盖每个“热点”。然而 CSS sprites 真的很酷，在其他类似的场景中可能是最好的解决方案。

【讨论】：

【解决方案4】：

做为 SVG 吗？您仍然可以使用 javascript 来操作 SVG 文档部分的位置。

【讨论】：

SVG 只是 xml。如果你将你的脸切割成子图像，那么你可以将它嵌入到 SVG 中（使用工具，它将是 base-64 编码的），并在 SVG“画布”上定位每个子图像。调整大小时，整个物体会缩放（并且您的图像将被重新采样，但应保持正确对齐）。