網站中特殊的圖像,服務器圖像映射
作者:佚名 時間:2014-02-27 分享到:
使用圖像和圖標來代替鏈接內容中的文字逐漸成為一種時尚。例如,可以使用手指圖標來左海代替“下一頁(next)”等文字鏈接。到主頁的鏈接如果不使用小房子圖案,就會被認為是不完整的。到搜索工具的鏈接現在必須要包含一個放大鏡、問號或望遠鏡等圖案。而且,所有的小廣告也都變成了閃爍的GIF動畫。
不要因為可以在文檔中插入圖像,就插入大量的圖象。再次強調,是否需要插入圖像取決于上下文。如果你本人或者文檔的讀者無法一眼看出鏈接和當前文檔之間的關系,那么你的鏈接就是失敗的。只對鏈接使用少量、一致的可愛圖像,并僅以這種方式來幫助和引導讀者瀏覽文檔中的重要信息。同時還要注意的是:由于讀者可能來自世界各地(甚至可能來自外星球),所以你要保證所使用的圖像在不同的文化背景下不會產生歧義(聽說過在美國常用的OK手勢對日本人意味著什么嗎?)。
為一系列頁面創建一致的圖像是一件令人生畏的工作,這項工作必須要在那些從正式的可視化設計學校畢業的專業人員的幫助之下才能完成。請相信我們,那些能夠寫出漂亮的代碼和熟練使用XHTML的人很少會創建美麗的、引人注目的圖像。因此,找到一個好的平面設計師會使頁面和讀者都受益匪淺。
對鼠標敏感的圖像
一般情況下,放置在錨中的圖像只是作為錨內容的一部分。瀏覽器可能會以某種特殊的方式來改變圖像(通常是使用特殊的邊框),以提醒瀏覽者該圖像是一個超鏈接。但是用戶單擊圖像的方式并沒有改變,還和單擊文本超鏈接時一樣。
HTML和XHTML標準提供了一種特性,允許在同一副圖像中嵌入多個不同的鏈接。單擊圖像的不同區域可以使瀏覽器鏈接到不同的目標文檔。這種對鼠標敏感的圖像被稱為圖像映身(image map),它開創了多種創建鏈接的樣式。
創建圖像映身的方式有兩種,分別是服務和客戶端圖像映射。前一種圖像映射是在<img>標簽的ismap屬性中設置的,它要求訪問服務器和相關的圖像映射處理應用程序。后一種圖像映射是用<img>標簽的usemap屬性創建的,它要和對應的<map>和<area>標簽同時使用。
將鼠標在連接圖像中的位置轉換成到另一個文檔的鏈接,這種轉換發生在用戶的機器上,所以客戶端的圖像映射不需要專六的服務器連接,并且可以在沒有Web的環境下實現,例如,在本地硬盤驅動器上或基于CD-ROM的文檔集之中。
服務器端注意事項
在利用ismap屬性使用對鼠標敏感的圖像映射時,會要求瀏覽器僅向服務器傳送URL和 鼠標坐標。將這些坐標轉換成特定的文檔是由文檔服務器處理的。轉換過程根據服務器的不同而不同,這一點在HTML或XHTML標準中并沒有定義。
你需要向Web服務器管理員咨詢,可能還需要閱讀服務器的資料,這樣才能決定創建和編寫圖像映射的方法。大多數服務器自帶了一些能夠處理圖像映射查詢時,都使用包含圖像映射區域和圖像映射URL所引用的相關超鏈接的文本文件來處理。
這里有一個關于圖像映射文件的示例,它描述了我們的示例圖像中的敏感區域:
# Imagemap file=toolbar.map
drfault dflt.html
circ 100,30,290,500 link1.html
rect 180,120,290,500link2.html
poly 80,80,90,72,160,90link3.html
圖像映射的每個敏感區域都是由幾何形狀和以像素為單位定義的坐標描述的,例如,圓形用它的圓心和半徑來描述,矩形使用左上角和右下解的坐標來描述,多邊形使用它的各個頂點的坐標來描述。所有坐標都是以圖像的左上解(0.0)為參照。每種形狀都有其相對的URL。
圖像映射處理應用程序一般會按照圖形在圖像文件中出現的順序測試每種形狀,如困用戶鼠標的X和Y坐標位于某個形狀的邊界之內,就會向瀏覽器返回對應的URL所指定的文檔。這意味著形狀可以重疊;而具體哪個形狀會生效,則取決于它們在圖像文件中出現的先后順序。同樣,整個圖像無須被敏感區域全部覆蓋:如果傳送的坐標沒有位于任何一個指定的形狀邊界內,那么就會向瀏覽器返回默認文檔。
這里僅僅是一個示例,展示了處理圖像映射可能采用的方式,以及該處理過程所需的輔助文件。具體情況請向網絡管理員咨詢,并參考服務器使用手冊,以了解如何在自己的文檔和系統中使用網站服務器端圖像映射。