我上次提到，我一直在為艾美獎獎而贏得的遊戲作曲家Mike Worth的新網(wǎng)站工作。他僱用我創(chuàng)建了一個高度的圖形設計，以展示他的作品。

邁克（Mike）喜歡90年代的動畫，尤其是迪士尼的鴨子故事和其他動畫系列。他向我挑戰(zhàn)，要找到一種將他們的90年代復古風格融入他的設計而不使其成為過去的方法。但這不是我唯一的挑戰(zhàn)。我還需要通過使用最新的代碼來保持可訪問性，性能，響應能力和語義來實現(xiàn)90年代的感覺。

邁克（Mike）的設計就像是回到主流網(wǎng)站設計似乎更加自發(fā)的，並且受慣例和最佳實踐的控制。有人將這些設計描述為“異想天開”：

形容詞

1. 自發(fā)幻想或嬉戲
2. 給予異想天開；任性
3. 古樸，不尋常或很棒

-柯林斯英語詞典

但是我不太確定這是完全準確的。 “好玩？”確實。 “幻想？”可能。但是“很棒？”這取決於。 “懷疑”聽起來多餘，所以我稱之為“表現(xiàn)力”。

我想起了從回返回的設計時，記得網(wǎng)站通常如何包含將品牌，內(nèi)容和導航結合在一起的圖形。當我設計第一個網(wǎng)站時，幾乎所有對90年代的網(wǎng)頁設計的參考 - 談到了1996年的華納兄弟太空果醬。

所以，我不會那樣做。

像任天堂這樣的品牌使用他們的主頁來指導人們掌握其內(nèi)容，同時製作品牌的視覺陳述。 Cheestress將圖形與導航結合在一起，讓我想知道為什麼我們今天看不到這樣的設計。雞皮ump代表了這種方法，將卡通插圖與鮮豔的形狀結合在一起，成為功能性且視覺上豐富的橫幅，證明有用並不意味著無聊。

在90年代，當我為此類網(wǎng)站開發(fā)圖形時，我要么將它們切成薄片並將其零件放在桌子中，要么大部分使用的圖像映射。

簡要概述屬性和值

讓我們快速進修。圖像地圖一直返回到HTML 3.2，首先是服務器端地圖，然後使用映射和區(qū)域元素通過圖像上的單擊區(qū)域定義了可單擊區(qū)域。它們在圖形，地圖和導航方面很受歡迎，但是隨著CSS，SVG和JavaScript的興起，它們的使用下降了。

 <map name="“" projects>
  ...
</map>

 <img  usemap="“＃projects”" ... alt="重新訪問圖像圖" >

這些元素可以具有單獨的HREF和ALT屬性，並且可以通過ARIA增強以提高可訪問性：

 <map name="“" projects>
  
  ...
</map>

形狀屬性指定區(qū)域的形狀。它可以是原始圓或矩形或由一組絕對x和y坐標定義的多邊形：

儘管他們的年齡很大，但圖像地圖仍然帶來很多好處。它們輕巧，需要（幾乎）沒有JavaScript。在短短一分鐘內(nèi)就有更多有關此事的信息。當與Alt，ARIA和標題屬性一起使用時，它們可訪問和語義。儘管來自不同的時代，甚至現(xiàn)代移動瀏覽器也支持圖像圖。

我對Mike Worth的設計包括幾個圖形導航元素，這讓我想知道圖像地圖是否仍然是一個合適的解決方案。

圖像圖中的圖

邁克（Mike）希望他的網(wǎng)站展示他過去的工作以及他想做的項目。為了使他的設計的這一方面可發(fā)現(xiàn)和有趣，我創(chuàng)建了一張地圖，供人們按下地圖區(qū)域打開模態(tài)。該地圖包含編號的圓圈，按下一個圓圈會彈出其模態(tài)。

我的第一個想法是將錨嵌入外部地圖SVG：

 <img src="%E2%80%9C" projects.svg alt="“" projects>

<svg ...>
  ...
  <a href="%E2%80%9C" ...>
    <circle cx="“" cy="“" r="“" fill="“＃941b2f”/">
    
  </circle></a>
</svg>

這種方法是有問題的。這些錨只有在SVG內(nèi)聯(lián)時才活躍並且不使用元素。但是，即使指定其坐標可能會很費力，圖像圖也可以很好地工作。幸運的是，有大量工具可用，這使定義坐標不那麼乏味。上傳圖像，選擇形狀類型，繪製形狀，然後復制標記：

 <img  src="%E2%80%9C" projects.svg usemap="“＃projects" map.svg alt="重新訪問圖像圖" >

<map name="“" projects map.svg>
  
  
  ...
</map>

當圖像是固定尺寸時，圖像映射效果很好，但是靈活的圖像出現(xiàn)問題，因為地圖坐標是絕對的，而不是相對於圖像的尺寸。製作圖像映射響應需要一點JavaScript，以重新計算這些坐標時，當圖像變化大小時：

函數(shù)resizemap（）{
  const image = document.getElementById（“ projects”）;
  const map = document.queryselector（“ map [name ='projects-map']”）;
  
  if（！圖像||！map ||！image.naturalWidth）返回;
  
  const scale = image.clientwidth / image.naturalalwidth;
  map.queryselectorall（“區(qū)域”）。 foreach（區(qū)域=> {
  
    if（！afore.dataset.originalCoords）{
      aket.dataset.originalCoords = aket.getAttribute（“ coords”）;
    }

    const scaledcoords = aket.dataset.originalCoords
    
    。分裂（”，”）
    .map（coord => Math.Round（coord * scale））
    。加入（”，”）;
    區(qū)域。 setAttribute（“ coords”，scaledcoords）;
  }）;
}

[“ load”，“調(diào)整大小”]。 foreach（event =>
  window.AddeventListener（事件，resizemap）
）；

我仍然對此實現(xiàn)不滿意，因為我希望有人能夠在更大的地圖區(qū)域上按數(shù)量，而不僅僅是編號的圓圈。

每個都有定義其繪製方式的坐標，並且它們相對於SVG ViewBox：

 <svg width="“" height="“">
  
</svg>

另一方面，映射的坐標絕對是圖像的最左側，因此需要轉(zhuǎn)換值。幸運的是，拉斐爾·莫納特（Raphael Monnerat）寫了PathTopoints，這是一種確實可以做到這一點的工具。上傳SVG，選擇點頻率，複製每個路徑的坐標，然後將它們添加到地圖區(qū)域的坐標中：

 <map>
  
  
  
  ...
</map>

圖像地圖的更多問題

圖像圖是硬編碼的，並且耗時，可以在沒有工具的情況下創(chuàng)建。即使使用用於生成圖像圖的工具，將路徑轉(zhuǎn)換為點，然後使用JavaScript重新計算它們，它們也可能具有挑戰(zhàn)性。

元素不可見，除了光標的更改外，當有人徘徊或按下鏈接時，它們沒有提供視覺反饋。另外，沒有簡單的方法來添加動畫或互動效果。

但是對我的交易破壞者是，默認情況下，圖像圖的基於像素的值是沒有反應的。那麼，使用CSS，HTML和SVG實現(xiàn)我的地圖可能是什麼替代解決方案？

位於我的地圖上的錨點無法解決基於像素的定位問題，也不會給我我想要的不規(guī)則形狀的可單擊區(qū)域。外部SVG內(nèi)的錨也無法正常工作。

但是解決方案正盯著我的臉。我意識到我需要：

1. 為每個可點擊區(qū)域創(chuàng)建一個新的SVG路徑。
2. 使這些路徑看不見。
3. 包裹錨內(nèi)的每條路徑。
4. 將錨點放在我的SVG源末端的其他元素下方。
5. 用內(nèi)聯(lián)SVG替換該外部文件。

我創(chuàng)建了一組六個更大的路徑，這些路徑定義了可點擊區(qū)域，每個路徑都有自己的填充，以匹配其編號圓。我將每個錨放在SVG來源的末端：

 <svg>

  
  <g> ... </g>

  `
  <g>`
    <a href="%E2%80%9C" ...>  </a>
    <a href="%E2%80%9C" ...>  </a>
    <a href="%E2%80%9C" ...>  </a>
    ...
  </g>
</svg>

然後，我將這些錨的不透明度減少到0，並在其全寬敞的懸停狀態(tài)下添加了短期過渡：

 #links a {
  不透明度：0;
  過渡：所有.25s易於入口；
}

#links a：懸停{
  不透明度：1;
}

雖然使用圖像映射的可悲的是沒有視覺反饋，但嵌入式錨點及其內(nèi)容可以響應某人的動作，並暗示即將發(fā)生的事情，並為設計添加細節(jié)和深度。

我可能會為那些編號的圓圈增添光澤，以與我為邁克設計的品牌保持一致。或者，我可以包括圖像，標題或其他內(nèi)容來預覽彈出模式：

 <g>
  <a href="%E2%80%9C%E2%80%A6%E2%80%9D">
    
    
  </a>
</g>

親自嘗試：

富有表現(xiàn)力的設計，現(xiàn)代技術

設計邁克·沃思（Mike Worth）的網(wǎng)站使我有機會將表達設計與現(xiàn)代開發(fā)技術融合在一起，重新審視圖像地圖使我想起了工具圖像地圖在此期間非常喜歡的工具圖像的重要性。

最終，圖像地圖不是Mike網(wǎng)站的正確工具。但是，探索它們幫助我了解了我真正需要的東西：一種使用現(xiàn)代技術易於訪問，輕巧，響應式和語義的現(xiàn)代技術來重新獲得90年代網(wǎng)站設計的表達和個性的方法。這就是設計的意義：為工作選擇合適的工具，即使有時意味著回望前進。

傳記：安迪·克拉克（Andy Clarke）

安迪·克拉克（Andy Clarke）通常被稱為網(wǎng)頁設計的開拓者之一，在推動網(wǎng)絡設計的界限方面發(fā)揮了作用，並以其創(chuàng)意和視覺上令人驚嘆的設計而聞名。他的工作激發(fā)了無數(shù)設計師探索產(chǎn)品和網(wǎng)站設計的全部潛力。

安迪（Andy）撰寫了幾本行業(yè)領先的書籍，包括超越CSS ，熟練的網(wǎng)頁設計和網(wǎng)絡藝術指導。他還與各種規(guī)模和行業(yè)的企業(yè)合作，通過設計實現(xiàn)目標。

訪問安迪的工作室，東西和胡說八道，並查看他的合同殺手，這是受歡迎的網(wǎng)絡設計合同模板，該模板受到成千上萬的網(wǎng)頁設計師和開發(fā)人員的信任。

以上是重新訪問圖像圖的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！