如何使用CSS構建圖像映射

方案

我想要一些“怪異”的東西,所以我決定使用一個“口袋”圖形,其中包含我博客的所有訂閱方法。

在Web 1.0時代,可以通過將圖像與每個圖形上的鏈接拼接起來,然後嘗試將其與表格一起縫在一起,來構建這樣的鏈接集合。 也可以通過利用 影像圖 但這通常需要工具來建立坐標系。 使用級聯樣式表使此操作變得更加容易……無需拼接圖像,也無需嘗試尋找用於構建坐標系的工具!

  1. 建立您想要使用的圖像。 您可以在下面使用此圖形(右鍵單擊並另存為下載):
    選項
  2. 將您的圖片上傳到相對於CSS的目錄中。 在WordPress中,將其放在主題目錄的images文件夾中可以最輕鬆地完成。
  3. 添加您的HTML。 很好,很簡單……div中包含三個鏈接:
    > div id =“ subscribe”>> a id =“ rss” href =“ [您的feed鏈接]” title =“使用RSS訂閱” >> span class =“ hide”> RSS> / span >> / a>>一個id =“ email” href =“ [您的電子郵件訂閱鏈接]” title =“用電子郵件訂閱” >> span class =“ hide”>電子郵件> / span >> / a>>一個id =“ mobile” href = “ [您的手機鏈接]” title =“查看手機版本” >> span class =“ hide”>手機> / span >> / a>> / div>
    
  4. 編輯您的級聯樣式表。 您將添加6種不同的樣式。 整個div 1種樣式,a標籤1種樣式,這樣它就不會顯示任何文字裝飾,1種樣式用於隱藏文本(用於可訪問性),每種鏈接有1種樣式說明:
    #subscribe {/ *背景圖片塊* / display:塊; 寬度:215px; 高度:60px; 背景:url(images / options.png)不重複; margin-top:0px; } #subscribe a {text-decoration:none; } .hide {可見性:隱藏; } #rss {/ * RSS鏈接* / float:左; 位置:絕對; 寬度:50px; 高度:50px; 左邊距:20px; 頁邊距:5px; } #email {/ *電子郵件鏈接* / float:左; 位置:絕對; 寬度:50px; 高度:50px; 左邊距:70px; 頁邊距:5px; } #mobile {/ * Mobile Link * / float:left; 位置:絕對; 寬度:50px; 高度:50px; 左邊距:130px; 頁邊距:5px; }

定位很簡單……添加一個高度和寬度,然後從圖像的左側設置左邊距,從圖像的頂部設置頂邊距!

此“操作方法”文章旨在進入 極客是性感的終極“如何”競賽! 值得一提的是,圖像地圖可以包含更複雜的多邊形,但是我並沒有真正看到太多必須具備的地方。 我確實注意到,Geeks上的大ol RSS圖像是Sexy側邊欄……這是鏈接的好地方。 😉

更新了10年3月2007日,以在以下方面的建議下更好地訪問 菲爾!

贊助: 如果您是Web設計的新手,那麼必須使用HTML和CSS,第2版以正確的方式構建自己的網站。 在此易於遵循的指南中,您將學習如何以最佳方式構建網站-自己動手!

41 個評論

  1. 1

    道格(Doug),這似乎是個不錯的方法,但是卻很難接近。

    考慮具有屏幕閱讀器的盲人用戶,具有純文本瀏覽器的用戶或未啟用CSS或圖像就訪問該網站的任何人(例如,可能有移動用戶正在尋找指向您的移動友好網站的鏈接)。 他們都不知道這三個鏈接,因為它們沒有文本。 如果圖像不正確,用戶甚至不會看到替代文本來描述原本會出現的內容,因為它是背景圖像。

    更好的方法是將圖像切片,鏈接,將它們放入列表中並使它們彼此相鄰地浮動。 甚至使用文本作為鏈接,並使用標準的圖像替換技術替換文本。 這似乎很方便,但是對於那些不使用標準圖形瀏覽器的人來說,事情變得更加困難/不可能。

    • 2
      • 3

        道格

        JAWS默認不讀取鏈接標題,但是您是正確的,它可以讀取。 如果您不知道鏈接標題,那麼為什麼還要尋找鏈接標題,即使您確實在,它也會下降到可用性問題,這意味著您為能力較弱的用戶提供了使用網站的一流體驗。

        對於文本瀏覽器,您向我介紹的有關Lynx的文章還允許您顯示鏈接標題的列表,但我的觀點仍然是,如果您不知道那裡有鏈接,因為一開始就沒有文本。 ,為什麼還要尋找標題文字?

        最後,對於未啟用圖像或未啟用CSS的任何瀏覽者,鏈接標題屬性仍然不會出現。

        所以是的,帶有標題的鏈接比沒有標題的鏈接好,但是在這種情況下,它只是邊際。

        這就是為什麼使用圖像以使alt文本可以閱讀或替換圖像以使文本在那裡的原因,這是一個更安全,更易訪問且更可用的選項。

        • 4

          好信息,菲爾。 我將嘗試通過文本來增強此效果,而只是隱藏文本-這樣,像JAWS這樣的可訪問產品將讀取鏈接文本,並且如果禁用CSS或圖像,則將顯示文本。

          我不同意,唯一可訪問的解決方案是放置帶有鏈接的圖像。

  2. 5
  3. 8

    我偷了在那裡,我說了。

    道格(Doug),這些圖形太棒了,並且編碼是如此簡單,簡直令我感到恐懼(開始使用CSS,現在我終於“明白了”)。

    調整了代碼以滿足我的需求,找出了放下HTML的位置,坦率地說,它看起來很棒,並清理了一直困擾著我的INSANE邊欄頂部。

    我可能只需要給您買那杯咖啡!

  4. 10

    道格

    以我的經驗為例,我將成為反對聲音。 當我的家庭電子郵件發生更改時,我記得我們的電子郵件,並且您注意到我只需要選擇使用我的新電子郵件即可。 我不得不承認,我有一段時間“發現”您網站上的新功能以再次選擇加入。 部分原因是因為原始鏈接有點傳統,我隱約記得那個鏈接。 另一個是因為側面的半個信封最初對我來說看起來並不像一個信封。 大約5分鐘或更長時間之後,我開始將鼠標移到每張圖像上,並且顯示“通過電子郵件訂閱”標題時,我才知道自己在做生意。 我的大腦也弄清楚了鏈接圖片是什麼。

    但是,至少對於我來說,橫向信封對我來說並不直觀,因為它是訂閱電子郵件通知的地方。 而且(因為有人告訴我總是以美好的事物結尾),我同意上述菲爾的觀點; 該方法非常簡單,整個項目效果很好。 我認為您的設計工具有助於為您提供3個部分的確切尺寸; 這是正確的假設嗎? 我必須假設是這樣,因為如果我有一個400像素寬的圖像,我將需要知道正確的設置,等等。

  5. 12
    • 13
  6. 14
  7. 15
  8. 16
  9. 17
  10. 18
  11. 19

    感謝您提供此信息,道格。 我以前來過這裡,想知道你是怎麼做到的。 我們想創建一個像這樣的地圖,以便在帖子後插入,現在我們有了能力,就可以做到。 太棒了!

  12. 20
  13. 21

    你好道格,
    我留下了以前的評論,但意識到我幾乎沒有提供任何有關我的困境的見解。 我們一直在調整wordpress主題,以幫助我們在此處啟動在線情景喜劇:

    http://www.phaylen.com/blog/

    現在,您將看到頂部上方有一個導航橫幅,這是我們以前想要映射的圖像,它已經有數十次了。 / palmforehad。 我們沒有人真正理解CSS,但是我們已經跌跌撞撞地走了很遠,到目前為止,到目前為止一切都還不錯。 您所提供的文章中只有一本是對如何輕鬆地在CSS中使用圖像映射的真正見解。 我根據您的指示選擇了樣式表,但不知道將HTML放在何處。 您只說了“添加您的html……這很簡單”,然後我畏縮了一下,因為我想..“對我來說還不夠簡單! 我不知道我可以在主題編輯器中將html添加到任何這些php頁面中。 是否將html放在標題中? 主要索引模板? 功能? 我假設所有的wordpress用戶都可以選擇在儀表板編輯器中編輯其主題,這在功能上似乎相當普遍。 如果您可以建議將html放在哪裡,我很樂意為我的導航欄改編oru代碼。

    感謝您與社區分享您的知識。 我很高興為您喝咖啡。

    • 22

      嗨,Phay!

      您博客主題的所有文件都可以通過“管理”面板進行編輯。 如果單擊“演示”,然後單擊“主題編輯器”,則應該能夠在右側看到文件列表,而在左側可以看到編輯器。

      如果您希望它在邊欄中,則可能有一個“邊欄”頁面。 單擊以對其進行編輯,然後將提供的HTML放在您想要的頁面內。

      注意事項:樣式表編輯是相對於您的頁面的,因此,與引用主題中的其他圖像一樣,如果要引用該圖片,則需要將其上傳到主題圖像目錄。

      希望有幫助!

    • 23


      我今天遇到了這個網站,與您有同樣的困境。 我還想將圖像映射添加到標題圖像。 在玩了一段時間後,我說對了。 將div HTML放在header.php文件中。 我把它放在和之間。 不知道您的模板是否具有正確的編碼,但是可以在header.php文件中對其進行操作,然後您會找到答案。
      -
      藍*棉花糖

  14. 24

    感謝您的快速回复!

    不,我不希望它出現在側邊欄中,它位於頁面頂部(您可以在我提供的鏈接中看到粉色的導航欄,上面顯示了關於表演的內容,該內容很持久。)

    不幸的是,我整個上午一直在儀表板中工作,如上所述,我不確定將html放在哪個文件中,我有幾個header.php,main index.php,functions.php,footer.php。 我不確定在哪裡插入html代碼。 (您提供的第一部分,我已經將其餘部分插入樣式表中了)我的圖片在網站上,所有內容都可以使用了,我只需要知道在代碼的html部分添加適應的位置即可。

    非常感謝您的寶貴時間,並提出了新手提出的問題。

    hay

  15. 25

    …也許有人可以在註釋中發布有關我們將代碼的html部分放入哪個文件的註釋。一位先生說了幾句,他說清楚了。 我沒有那麼幸運。

    菲倫

  16. 26
  17. 27

    我真想找時間在wordpress中嵌入可點擊的圖片地圖,因為它會剝離html地圖標籤。 您的方法可行,但美國地圖顯然是使這種方法複雜化的方法。 我迷路了。

    幫助。

    看來閃光燈是我唯一的選擇?

    • 28

      戴夫,

      如果您將圖片放在模板中,就可以了。 如果將圖像映射放置在實際內容中,則可能會遇到過濾器問題。 解決這個問題的方法很糟糕,但是有時我使用了iframe。

      道格

  18. 29

    嗨,

    似乎圖像映射和鏈接是兩個不同的事物,它們不能像html中的圖像映射那樣一起工作

    當我包括圖像地圖的背景定位(左中)時,鏈接的定位不會跟進。

    有什麼辦法可以解決這個問題? 我非常業餘。 謝謝。

  19. 31

    是否將類似的方法用於我嘗試使用的更大,更複雜的圖像地圖?

    如果您查看我的網站,請單擊左側的鏈接,您會看到我要用作圖像地圖的圖像(在“文字”字母下方)。

    基本上,嘗試使用圖像按字母順序轉到此列表的每個部分。

    顯然,我花了20分鐘使用GIMP來構建地圖,然後WP刪除了地圖標籤,因此這就是我找到您的網站的方式。

    雖然,可能會考慮使用Flash

    謝謝。

  20. 33

    我目前正在使用模板佈局並使用自己的東西進行編輯。 我想添加圖像映射,但是我不確定將其放置在CSS中的位置。 我要製作地圖的圖像位於標題部分。

  21. 34

    你好,我在joomla上建立了我的網站...我想使用這種方法使我的頁面徽標成為首頁的鏈接,有人告訴我不能用joomla做到這一點,但是本文給了我希望! 通過電子郵件的幫助將不勝感激....謝謝

  22. 35

    嗨,道格(Doug)-我正在構建一個基於CSS的相當複雜的圖像映射,該圖像映射也具有遠程翻轉(在這種情況下,當您將圖像熱點之一懸停時,文本會顯示在頁面上的其他位置)。 無論如何,我在研究該示例時遇到了您的示例……我想我應該分享以下輸入內容:

    1.為了實現可訪問性,您不應在此使用可見性:無(或考慮使用display:none)在此處隱藏文本,因為該元素的樣式具有可見性:屏幕閱讀器(遵循規範的內容)不會讀取hidden。 。

    而是使用更可靠的圖像替換技術。 我建議使用Phark方法或Gilder / Levin –這些只是Google記錄得更好的文件,以查找基本技術。 我更喜歡G / L,因為它也可以在啟用CSS的情況下工作,但是圖像已關閉。

    2.雖然我看不到它崩潰(使用FF3),但是您實施定位也存在固有風險。 絕對定位的元素相對於其最接近的父對象定位。 基本上,您希望通過對#subscription應用'position:relative'來顯式設置定位上下文。 然後,可以將子項(定位的鏈接)放置在該父項中。 此方法有助於確保跨瀏覽器獲得更可靠的結果。

    另外,然後應使用“ top:x”和“ left:x”(其中x是偏移值,以px為單位)的位置聲明,而不是使用邊距來聲明該位置。 同樣,我不一定會看到它破壞您的使用方式,但是頂部和左側是為此目的而設計的,那麼為什麼不使用它們呢? 另外,您在同一個元素上設置了浮動和邊距,這在特定條件下會導致IE6中的“雙邊距”錯誤(您是否在此進行過測試?)–儘管有修復程序,但您可以通過使用top完全避免該問題在這種情況下,將其留在左邊,而不是放置邊距。

    3.最後,為什麼不對這些鏈接使用語義上合理的無序列表,而不是無意義的div?

    不好意思,我只是想分享一下,b / c我從經驗中知道如何有多種方法可以使用CSS來獲得理想的結果,但是某些方法肯定比其他方法更有效(更可靠,跨瀏覽器) 。 HTH。

  23. 36
  24. 37
  25. 38

    非常感謝!! 您的指示為我節省了數小時的工作……我是Web開發的新手,而我剛經歷了我的第一個大型項目。 我做到了……客戶很高興,實際上很高興,我也是!

  26. 39

    您好,非常感謝您發布此信息! 多年後,它仍然在幫助……不錯! 我正在努力地將我的圖像地圖鏈接到正確的位置。 我有一個橫幅,我希望橫幅右上方的社交圖標使用您提供的代碼進行鏈接。 效果很好,但我做錯了,因為我的鏈接顯示在屏幕的左上角,而不是在社交圖標上方,而在徽標上方。 我敢肯定這很簡單,但我無法弄清楚。 我想如果您有任何見解,我會在這里分享。 再次感謝您發布!

你覺得呢?

本網站使用Akismet來減少垃圾郵件。 了解您的評論如何處理.