1. 首页
  2. 问答
  3. 切割链接的人脸

切割链接的人脸

2011-02-24 45 views
0

所以我试图在jQuery/css/html页面中使用一张脸作为一种导航工具。做到这一点的最佳方法是切割每个元素，比如鼻子和嘴巴的眼睛，然后用html上的方形div来对齐它们。我觉得无论我尝试多少，它都不会最终对齐？任何人有任何建议？切割链接的人脸

来源

2011-02-24 awesomeUser475853

回答

3

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

编辑作为尼克在评论中指出，你也可以有圆形。头部和眼睛等的最佳选择

来源

2011-02-24 18:07:40 JohnP

+0

https://developer.mozilla.org/en/HTML/Element/map。 – jball 2011-02-24 18:09:21

+0

您也必须是sitepoint播客监听器：D - 然而，示例区域似乎已被打破。 – JohnP 2011-02-24 18:12:49

+1

你可以在图像地图中使用圆形 – 2011-02-24 18:20:03

2

我将离开图像完好无损地作为一个背景图像和位置隐形<a>标签在适当的位置作为链接

来源

2011-02-24 18:07:32 Jeff

+0

我想到了，但每当用户点击它时，每个元素都必须分离。我现在使用jQuery将页面的不同区域动画化为块。一旦你点击一个，另一个4消失。只是想，但如果我这样做，你知道是否有可能让背景元素淡出并加载预先注视的眼睛图像吗？ – awesomeUser475853 2011-02-24 18:13:32

1

我不会在这里使用CSS精灵，而是将它作为一个单独的图像和覆盖每个“热点”锚定标签或类似的东西。然而，CSS精灵非常酷，在其他类似的情况下可能是最好的解决方案。

http://www.alistapart.com/articles/sprites

来源

2011-02-24 18:11:15

+0

感谢css似乎是最现实的方法去做这件事我只是担心实施jQuery运动和淡出。我会让你知道这一切是怎么回事谢谢输入 – awesomeUser475853 2011-02-24 18:19:11

0

将它作为SVG吗？您仍然可以使用JavaScript来操作SVG文档各部分的位置。

来源

2011-02-24 19:16:51 Marcin

+0

从来没有与SVG合作过它是什么？ – awesomeUser475853 2011-02-24 19:23:53

+0

SVG只是xml。如果您将脸部切成子图像，则可以将其嵌入到SVG中（使用工具，它将以base-64编码），并在SVG“画布”上找到每个子图像。当调整大小时，整个事情将会缩放（并且您的图像将被重新采样，但应保持正确对齐）。 – Marcin 2011-02-24 19:33:27

+0

我应该补充说这可能无法正常工作IE。 – Marcin 2011-02-24 19:33:59

相关问题

 相关问题