圖片上多圖形點擊觸發事件html標簽


  作用:

  點擊圖片上不同形狀的區域觸發不同的事件

  例子: 

  <img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

  <map name="planetmap" id="planetmap">
    <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
    <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
    <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />

    。。。。。想加幾個事件寫幾個
  </map>

  分析:

  <img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

  src想要展示的圖片  border邊框  usemap使用map的id或者name(由瀏覽器決定)   alt:如果該圖像無法顯示就展示那些字段

  <map name="planetmap" id="planetmap">

  id,name要跟上面的圖片的想對應

  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />

  shape:類型  coords:坐標值參數  href:點擊后跳轉的頁面  alt:同上

    圓形:shape="circle",coords="x,y,z"  

       x 和 y 圓心的位置("0,0" 是圖像左上角的坐標),z是以像素為單位的圓形半徑。

    矩形:shape="rectangle",coords="x1,y1,x2,y2"

      兩組坐標(x1,y1)(x2,y2)表示圖形的左上角和右下角的坐標是多邊形的一種簡化方法

    多邊形:shape="polygon",coords="x1,y1,x2,y2,x3,y3,..."

      定點的坐標組比如三角形要三個頂點就是三組坐標

  擴展:

  <area >

    nohref="nohref"  表示除選擇以外的圖片的所有區域,比如一張圖片上選擇了一個方形區域,加上該屬性后則表示除了選擇的方形區域之外的所有區域

    target ="_blank"  表示連接的方式同<a>標簽的該屬性

    title="aaa"       表示鼠標懸浮提示

  注意:

    1、area 元素永遠嵌套在 map 元素內部。area 元素可定義圖像映射中的區域。

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM