您現在的位置是:電腦技術吧?>? 故障問題 ??>??map標簽,resultmap標簽??>??正文詳情

map標簽,resultmap標簽

佼思萌2019-11-25 13:41:28 人圍觀
簡介image map“映射”選項卡定義客戶端圖像映射。圖像映射是指可單擊區域區域元素總是嵌套在映射元素中的圖像。area元素定義圖像映射中的區域IMG標記中的usemap屬性引用映map什么意

map標簽  定義一個客戶端圖像映射。

圖像映射(image-map)指帶有可點擊區域的一幅圖像。

  area元素永遠嵌套在map元素內部。

area元素可定義圖像映射中的區域。

  img標簽中的usemap屬性可引用的map標簽中的id或name屬性(取決于瀏覽器),所以我們應同時向map標簽添加id和name屬性。

  示例  例如我們想在下面一張圖實現九個熱點區域,不切圖,就使用map標簽。

  首先用 ps 得到幾個坐標:

  然后代碼實現: CSS Code復制內容到剪貼板

  1. !DOCTYPE html html lang=en
  2. head meta charset=UTF-8
  3. titleDocument/title /head
  4. body img src=cat.jpg alt= usemap=#catmap
  5. map name=catmap area shape=rect coords=0,0,148,139 href =http://www.baidu.com target =_blank alt=
  6. area shape=rect coords=148,139,295,0 href =http://www.sina.com target =_blank alt= area shape=rect coords=295,0,439,140 href =http://www.qq.com target =_blank alt=
  7. area shape=rect coords=148,139,0,340 href =http://www.163.com target =_blank alt= area shape=rect coords=148,139,296,340 href =http://www.soso.com target =_blank alt=
  8. area shape=rect coords=296,340,439,140 href =http://sf.gg target =_blank alt= area shape=rect coords=0,340,148,493 href=http://www.zhihu.com target =_blank alt=
  9. area shape=rect coords=148,493,296,340 href=http://z.cn target =_blank alt= area shape=rect coords=296,340,436,490 href=http://jd.com target =_blank alt=
  10. /map /body
  11. /html
  就是這樣。

  關于area  area 可以是圓形(circ),多邊形(poly),矩形(rect),不同形狀要選取不同的坐標(coords).  圓形:shape=circle,coords=x,y,z  x,y為圓心坐標(x,y),z為圓的半徑  多邊形:shape=polygon,coords=x1,y1,x2,y2,x3,y3,...  每一對x,y坐標都定義了多邊形的一個頂點(0,0) 是圖像左上角的坐標)。

定義三角形至少需要三組坐標;高緯多邊形則需要更多數量的頂點。

  矩形:shape=rectangle,coords=x1,y1,x2,y2  第一個坐標是矩形的一個角的頂點坐標,另一對坐標是對角的頂點坐標,0,0 是圖像左上角的坐標。

請注意,定義矩形實際上是定義帶有四個頂點的多邊形的一種簡化方法。

(就是說,知道對角的兩個點的坐標就行了。

)

版權聲明:本文由 佼思萌 整理編輯。

原標題:resultmap標簽詳解,5map

轉載注明出處:http://www.dn9ww09s.icu/fault/14326.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 為什么小鳴單車不能用,小鳴單車怎么用

    為什么小鳴單車不能用,小鳴單車怎么用 相關圖片小鳴單車怎么加盟在小明自行車中,用戶只需使用自己賬戶的唯一邀請碼,就可以邀請朋友獲得獎勵。那么如何使用小明自行車的邀請碼呢?接下來,超人軟件編輯將介紹如何為iPhone版...

  • 淘寶查不到物流信息怎么辦,淘寶物流信息不更新

    淘寶查不到物流信息怎么辦,淘寶物流信息不更新 相關圖片開網店怎么聯系物流近日,不少喜歡淘寶的小伙伴回復小編,稱淘寶找不到順豐的物流信息。事實上,淘寶的安卓版本一直與SF存在爭議。淘寶網查不到順豐物流怎么了?讓我們一起來看...

  • notepad正則 查找,notepad如何進行正則查詢

    notepad正則 查找,notepad如何進行正則查詢 相關圖片notepad替換Notepad 和Dreamweaver編輯器在搜索功能上非常強大,但我們通常只使用普通的搜索。有時我們需要用或不用規則來代替某些東西。這可以用普通的來代替。notepad無法替換...

  • 目前國內bim收費標準一覽,2019北京道路停車收費標準一覽

    目前國內bim收費標準一覽,2019北京道路停車收費標準一覽 相關圖片佛山車船稅收費標準最近,小編要被一輛共享單車的出現蒙蔽雙眼。他只是一輛金色的小自行車和一輛很酷的自行車。到處都閃閃發光。就像純金一樣。酷騎小金車還可以給手機充電。...

  • 3動畫,補間動畫

    3動畫,補間動畫 相關圖片c4d動畫我翻譯了一篇煙花的基本文章(以下簡稱FW)。效果如下:由于瀏覽器的問題,您看到的圖片可能是靜態的,但是將圖片保存為本地的,我們可以看到圖片是動態的。這是一個簡單...

  • 飛豬上退票手續費多少,飛豬退票手續費合理嗎

    飛豬上退票手續費多少,飛豬退票手續費合理嗎 相關圖片飛豬國際機票退票手續費作為阿里巴巴的旅行軟件,很多人在旅行時會選擇使用飛豬頂票和火車票,但有時因為去不了,需要退票。那么飛豬的退票費是多少?接下來,超人軟件編輯將...

  • 17世紀對班級授課制,19世紀對班級組織的發展產生

    17世紀對班級授課制,19世紀對班級組織的發展產生 相關圖片小學每個班級有多少人世紀衛報是一款移動應用,學校和家長共同努力,更好地照顧孩子的成長。用戶可以通過世紀衛士加入您的課堂,查看學校和班級的最新情況,及時完成老師布置...

  • 導入,eclipse怎么導入文件

    導入,eclipse怎么導入文件 相關圖片amr文件用什么打開Template, shadow DOM custom element undertaker電腦文件怎么導入手機...

  • 樂視應用,樂視手機怎么備份

    樂視應用,樂視手機怎么備份 相關圖片樂視1s手機怎么導出聯系人近日,樂視云硬盤宣布關閉個人云服務,眾多小伙伴正忙著在樂視云硬盤上傳輸數據,而百度云安卓版也成為不少人的選擇。那么,樂視云硬盤的數據如何才能...

  • 創建輪廓,創建輪廓怎么取消

    創建輪廓,創建輪廓怎么取消 相關圖片ai創建輪廓在哪里這是一系列的flash CS3模擬藝術設計教程。我們將學習在flash CS3中繪制輪廓的應用。如果你不是很精通線和手的繪制操作,這個技巧可能更適合你渲染4:改創建輪廓快捷...

熱評文章

  • 作業互助組,作業互助組官網

    作業互助組,作業互助組官網 相關圖片作業互助組網頁版家庭作業小組是一個非常實用的閱讀和學習軟件。在這個軟件中,用戶可以在網上找到家庭作業的答案,并且對解決問題有一個非常清晰的想法。不過,一些合作伙伴...

  • 規則,升級規則

    規則,升級規則 相關圖片大師規則4CSS規則由選擇器和聲明組成。本文將討論第二部分:聲明聲明聲明由兩部分組成:properties和values屬性指示要影響元素的哪個方面(顏色、高度等),而v象棋的規則口訣...

  • VUE如何添加音樂,vue不能添加音樂

    VUE如何添加音樂,vue不能添加音樂 相關圖片vue音樂怎么添加一部分近年來,Vue因其使用小型軟件制作視頻大片的優勢而越來越受歡迎。然而,有許多朋友不知道如何添加音樂到Vue。然后,超人軟件將向您介紹Vue iPhonevue如何添加第...

  • web消息通知,web通知session更新

    web消息通知,web通知session更新 相關圖片html通知代碼使用網絡版Gmail時,每當收到新郵件時,屏幕右下角會彈出一個提示框。有了HTML5提供的通知API,我們也可以輕松實現這樣的功能,確保瀏覽器支持如果你是在特定ad認證通知...

  • 2份PDF合并,合并pdf文件最簡單的方法

    2份PDF合并,合并pdf文件最簡單的方法 相關圖片多個pdf如何合并在正常生活中,許多小伙伴遇到了這樣的情況,他們需要將兩個PDF文件合并在一起。那么如何將PDF文件合并成PDF呢?接下來,超人軟件編輯器將介紹如何合并PDF文件如何...

  • 神州u 司機端,神州專車u十司機

    神州u 司機端,神州專車u十司機 相關圖片神州專車u十作為神舟特種車的官方開發,一款永遠不會被提取的關鍵軟件,只要司機加入,每月就可以輕松進入一萬多個。那么加入神舟U 車手的條件是什么?接下來,超人軟件編輯將...

  • flash簡單實例教程,flash的教程

    flash簡單實例教程,flash的教程 相關圖片flash新手教程實例表明,水中的浮詞與水中的浮詞相似,隨波浪起伏,主要利用了掩模效應和文本透明度的變化。步驟1:啟動Flash MX,創建一個新文件,右鍵單擊該階段的空白區域并自己...

  • 顯示桌面按鈕,桌面設置

    顯示桌面按鈕,桌面設置 相關圖片桌面不顯示圖標怎么辦我敢肯定很多孩子不知道,他們不使用電腦的時候可以把電腦設成睡眠模式。如果他們再開始的話會很快。然而,在win7系統中,sleep按鈕和shutdown按鈕一起使桌面上...

  • 摩拜單車不鎖會怎么樣,摩拜單車鎖不了怎么辦

    摩拜單車不鎖會怎么樣,摩拜單車鎖不了怎么辦 相關圖片怎么關摩拜單車的鎖摩比自行車已經成為許多人旅行的必要選擇。但當一些孩子使用安卓版摩比自行車時,他們發現掃描后無法解鎖。怎么了?怎么解決?讓我們看看解決方案摩拜單車...

  • 一張張什么笑臉,她那張笑臉

    一張張什么笑臉,她那張笑臉 相關圖片每一張笑臉都是今天,您將了解名為canvas的web技術及其與文檔對象模型(通常稱為dom)的關聯。這項技術非常強大,因為它使web開發人員能夠使用JavaScript訪問和看到一張張笑臉...

關注微信

变脸官网查询