1. 首頁
  2. 問答
  3. 切割鏈接的人臉

切割鏈接的人臉

2011-02-24 40 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

相關問題

 相關問題