圖片熱區(qū)??

最近在做項目的時候,前輩說到了“圖片熱區(qū)”這個高大上的詞兒修己,聽完立馬百度了一下给郊,原來這么簡單~~~

?什么是圖片熱區(qū)

1.熱區(qū)就是在網(wǎng)頁上進行了鏈接的區(qū)域。形象點說就是在網(wǎng)頁上鼠標箭頭變成小手的那個區(qū)域彪笼。
2.熱區(qū)是在網(wǎng)頁制作時設(shè)定的钻注。比如一個版面里面(落地頁)表面上看上去是一張整體的圖,但是實際上后臺用切割的方式切割成一塊一塊的不同的鏈接區(qū)域配猫,就成為“熱區(qū)”幅恋。

?熱區(qū)應用

1.中國地圖電子圖中的,用熱區(qū)分割成每一個區(qū)域泵肄,鏈接到每一個指定的地方捆交。
2.有一些網(wǎng)頁版的密室逃生和尋寶游戲,用的也是這種技術(shù)【我猜的??O(∩_∩)O哈哈~】

?熱區(qū)實現(xiàn)

    <img src="bg.jpg" border="0" usemap="#bgImg" alt="" />
    <map name="bgImg" id="bgImg">
      <area shape="circle" coords="180,139,14" href ="table1.htmll" alt="" />
      <area shape="circle" coords="129,161,10" href ="table2.html" alt="" />
      <area shape="rect" coords="1820,0,1920,100" href ="table3.html" alt="" />
   </map>

    shape="circle" coords="x,y,r" 區(qū)域為圓形  后面是圓心坐標和以像素為單位的半徑
   shape="rect" coords="x1,y1,x2,y2" 區(qū)域為矩形  矩形的左上右下兩點的坐標
   shape="poly" coords="x1,y1,x2,y2,x3,y3....區(qū)域為多邊形  多邊形所有頂點的坐標
      以上所有坐標都是相對于圖形img左上腳坐標而言的

**<img>中的 usemap 屬性可引用 <map> 中的 id 或 name 屬性(取決于瀏覽器)腐巢,所以我們應同時向 <map> 添加 id 和 name 屬性品追。
其中如果area劃分的區(qū)域部分交叉則前面的area覆蓋后面的area.即第一個area覆蓋第二個area。

你瞧冯丙,熱區(qū)就這么簡單的??肉瓦。以上只是添加簡單的跳轉(zhuǎn)事件,如果想做稍微復雜一點的胃惜,則添加相應的onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur事件泞莉。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市船殉,隨后出現(xiàn)的幾起案子鲫趁,更是在濱河造成了極大的恐慌,老刑警劉巖捺弦,帶你破解...
    沈念sama閱讀 216,402評論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件饮寞,死亡現(xiàn)場離奇詭異,居然都是意外死亡列吼,警方通過查閱死者的電腦和手機幽崩,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來寞钥,“玉大人慌申,你說我怎么就攤上這事。” “怎么了蹄溉?”我有些...
    開封第一講書人閱讀 162,483評論 0 353
  • 文/不壞的土叔 我叫張陵咨油,是天一觀的道長。 經(jīng)常有香客問我柒爵,道長役电,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,165評論 1 292
  • 正文 為了忘掉前任棉胀,我火速辦了婚禮法瑟,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘唁奢。我一直安慰自己霎挟,他們只是感情好,可當我...
    茶點故事閱讀 67,176評論 6 388
  • 文/花漫 我一把揭開白布麻掸。 她就那樣靜靜地躺著酥夭,像睡著了一般。 火紅的嫁衣襯著肌膚如雪脊奋。 梳的紋絲不亂的頭發(fā)上熬北,一...
    開封第一講書人閱讀 51,146評論 1 297
  • 那天,我揣著相機與錄音狂魔,去河邊找鬼蒜埋。 笑死,一個胖子當著我的面吹牛最楷,可吹牛的內(nèi)容都是我干的整份。 我是一名探鬼主播,決...
    沈念sama閱讀 40,032評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼籽孙,長吁一口氣:“原來是場噩夢啊……” “哼烈评!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起犯建,我...
    開封第一講書人閱讀 38,896評論 0 274
  • 序言:老撾萬榮一對情侶失蹤讲冠,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后适瓦,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體竿开,經(jīng)...
    沈念sama閱讀 45,311評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,536評論 2 332
  • 正文 我和宋清朗相戀三年玻熙,在試婚紗的時候發(fā)現(xiàn)自己被綠了否彩。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,696評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡嗦随,死狀恐怖列荔,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤贴浙,帶...
    沈念sama閱讀 35,413評論 5 343
  • 正文 年R本政府宣布砂吞,位于F島的核電站,受9級特大地震影響崎溃,放射性物質(zhì)發(fā)生泄漏蜻直。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,008評論 3 325
  • 文/蒙蒙 一笨奠、第九天 我趴在偏房一處隱蔽的房頂上張望袭蝗。 院中可真熱鬧,春花似錦般婆、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至配名,卻和暖如春啤咽,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背渠脉。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評論 1 269
  • 我被黑心中介騙來泰國打工宇整, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人芋膘。 一個月前我還...
    沈念sama閱讀 47,698評論 2 368
  • 正文 我出身青樓鳞青,卻偏偏與公主長得像,于是被迫代替她去往敵國和親为朋。 傳聞我的和親對象是個殘疾皇子臂拓,可洞房花燭夜當晚...
    茶點故事閱讀 44,592評論 2 353

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務發(fā)現(xiàn)习寸,斷路器胶惰,智...
    卡卡羅2017閱讀 134,651評論 18 139
  • 我還是很喜歡你 像春風吹了一季 不問歸程 愿你心事隕落 相思勿念明月 春風十里 只因是你 圖片來自網(wǎng)絡,版權(quán)屬于原...
    落小白閱讀 274評論 2 2
  • 許多人的思維都是破碎的坊饶,只是他們不知道。他們不知道的原因是忽你,他們從來沒有對自己做過測試...... 1. 能滔滔不...
    核聚閱讀 579評論 4 6
  • 在前一章幼东,你學習到了變量作用域——變量的存在和允許調(diào)用范圍。這個作用域會被一對兒尖括號包裹住。這個尖括號的作用是將...
    這雙鞋好貴閱讀 762評論 0 1
  • 還有誰記得貓王根蟹?看過法國電影《最后一個貓王》以后脓杉,我對偶像的力量又多了一分了解。 主人公作為一名工人简逮,迷戀貓王球散,只...
    看笑話兒不嫌事大閱讀 625評論 0 0