jQuery图片热点链接添加编辑插件

淡淡的烟草味﹌ 2022-05-12 22:24 292阅读 0赞

### 插件说明： ###

制作这个插件的的场景：有客户要求我给他做一个图片banner，且一张图片上会有多个链接。思前想后决定制作这个插件，以便后用。

### 使用： ###

<table style="line-height:normal;"> 
 <tbody> 
  <tr> 
   <td style="font-size:12px;font-family:Verdana, '宋体', sans-serif;line-height:18px;"> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div> 
    <div>
      22 
    </div> 
    <div>
      23 
    </div> </td> 
   <td style="font-size:12px;font-family:Verdana, '宋体', sans-serif;line-height:18px;"> 
    <div> 
     <div> 
      <code>&lt;!DOCTYPE&lt;wbr&gt;html&lt;wbr&gt;PUBLIC&lt;wbr&gt;"-//W3C//DTD&lt;wbr&gt;XHTML&lt;wbr&gt;1.0&lt;wbr&gt;Transitional//EN"&lt;wbr&gt;"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&amp;gt;&lt;wbr&gt;&lt;/wbr&gt;&lt;/wbr&gt;&lt;/wbr&gt;&lt;/wbr&gt;&lt;/wbr&gt;&lt;/wbr&gt;&lt;/wbr&gt;&lt;/wbr&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>html</code> 
      <code>xmlns</code> 
      <code>=</code> 
      <code>"http://www.w3.org/1999/xhtml"</code> 
      <code>&gt;&lt;wbr&gt;&lt;/wbr&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>head</code> 
      <code>&gt;&lt;wbr&gt;&lt;/wbr&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>meta</code> 
      <code>http-equiv</code> 
      <code>=</code> 
      <code>"Content-Type"</code> 
      <code>content</code> 
      <code>=</code> 
      <code>"text/html;&lt;wbr&gt;charset=utf-8"&lt;/wbr&gt;</code> 
      <code>/&gt;&lt;wbr&gt;&lt;/wbr&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>title</code> 
      <code>&gt;Image&lt;wbr&gt;Maps&lt;wbr&gt;test&amp;lt;/&lt;/wbr&gt;&lt;/wbr&gt;</code> 
      <code>title</code> 
      <code>&gt;&lt;wbr&gt;&lt;/wbr&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>script</code> 
      <code>type</code> 
      <code>=</code> 
      <code>"text/javascript"</code> 
      <code>language</code> 
      <code>=</code> 
      <code>"javascript"</code> 
      <code>src</code> 
      <code>=</code> 
      <code>"javascript/jquery-1.4.2.min.js"</code> 
      <code>&gt;&lt;/</code> 
      <code>script</code> 
      <code>&gt;&lt;wbr&gt;&lt;/wbr&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>script</code> 
      <code>type</code> 
      <code>=</code> 
      <code>"text/javascript"</code> 
      <code>language</code> 
      <code>=</code> 
      <code>"javascript"</code> 
      <code>src</code> 
      <code>=</code> 
      <code>"javascript/jquery.image-maps.js"</code> 
      <code>&gt;&lt;/</code> 
      <code>script</code> 
      <code>&gt;&lt;wbr&gt;&lt;/wbr&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>script</code> 
      <code>type</code> 
      <code>=</code> 
      <code>"text/javascript"</code> 
      <code>language</code> 
      <code>=</code> 
      <code>"javascript"</code> 
      <code>&gt;&lt;wbr&gt;&lt;/wbr&gt;</code> 
     </div> 
     <div> 
      <code>$(function(){&lt;wbr&gt;&lt;/wbr&gt;</code> 
     </div> 
     <div> 
      <code>&lt;wbr&gt;&lt;wbr&gt;&lt;wbr&gt;&lt;wbr&gt;&lt;/wbr&gt;&lt;/wbr&gt;&lt;/wbr&gt;&lt;/wbr&gt;</code> 
      <code>$('#imgMap').imageMaps();&lt;wbr&gt;&lt;/wbr&gt;</code> 
     </div> 
     <div> 
      <code>});&lt;wbr&gt;&lt;/wbr&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>script</code> 
      <code>&gt;&lt;wbr&gt;&lt;/wbr&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>head</code> 
      <code>&gt;&lt;wbr&gt;&lt;/wbr&gt;</code> 
     </div> 
     <div> 
      <code>&lt;wbr&gt;&lt;/wbr&gt;</code>&lt;wbr&gt;&lt;/wbr&gt; 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>body</code> 
      <code>&gt;&lt;wbr&gt;&lt;/wbr&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>id</code> 
      <code>=</code> 
      <code>"imgMap"</code> 
      <code>&gt;&lt;wbr&gt;&lt;/wbr&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>img</code> 
      <code>src</code> 
      <code>=</code> 
      <code>"womanExercise150.jpg"</code> 
      <code>name</code> 
      <code>=</code> 
      <code>"test"</code> 
      <code>width</code> 
      <code>=</code> 
      <code>"417"</code> 
      <code>height</code> 
      <code>=</code> 
      <code>"264"</code> 
      <code>border</code> 
      <code>=</code> 
      <code>"0"</code> 
      <code>usemap</code> 
      <code>=</code> 
      <code>"#Map"</code> 
      <code>ref</code> 
      <code>=</code> 
      <code>'imageMaps'</code> 
      <code>/&gt;&lt;wbr&gt;&lt;/wbr&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>map</code> 
      <code>name</code> 
      <code>=</code> 
      <code>"Map"</code> 
      <code>&gt;&lt;wbr&gt;&lt;/wbr&gt;</code> 
     </div> 
     <div> 
      <code>&lt;wbr&gt;&lt;wbr&gt;&lt;/wbr&gt;&lt;/wbr&gt;</code> 
      <code>&lt;</code> 
      <code>area</code> 
      <code>shape</code> 
      <code>=</code> 
      <code>"rect"</code> 
      <code>coords</code> 
      <code>=</code> 
      <code>"203,134,383,187"</code> 
      <code>href</code> 
      <code>=</code> 
      <code>"http://yiye.name"</code> 
      <code>/&gt;&lt;wbr&gt;&lt;/wbr&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>map</code> 
      <code>&gt;&lt;wbr&gt;&lt;/wbr&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;&lt;wbr&gt;&lt;/wbr&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>body</code> 
      <code>&gt;&lt;wbr&gt;&lt;/wbr&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>html</code> 
      <code>&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

### 使用说明: ###

<div<wbr>id=”imgMap”>为整个编辑功能的容器，其中包括两个部分：<br> 1、img标签，当然这个img标签外层你可以再嵌套其他的标签，值得注意的是ref=’imageMaps’这个属性，这是必需的，不然程序将忽略掉这个图片。<br> 2、map标签，name属性与img标签的usemap属性对应起来，这个标签包含初始化时这个图片具有的热点链接。</wbr>

$(‘\#imgMap’).imageMaps();绑定插件功能。