您的位置：首页 > Web前端 > JQuery

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

2013-10-29 00:21 417 查看

插件说明：

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

使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>

<
head
>

<
meta
http-equiv
=
"Content-Type"
content
=
"text/html;charset=utf-8"
/>

<
title
>ImageMapstest</
title
>

<
script
type
=
"text/javascript"
language
=
"javascript"
src
=
"javascript/jquery-1.4.2.min.js"
></
script
>

<
script
type
=
"text/javascript"
language
=
"javascript"
src
=
"javascript/jquery.image-maps.js"
></
script
>

<
script
type
=
"text/javascript"
language
=
"javascript"
>

$(function(){

$('#imgMap').imageMaps();

});

</
script
>

</
head
>


<
body
>

<
div
id
=
"imgMap"
>

<
img
src
=
"womanExercise150.jpg"
name
=
"test"
width
=
"417"
height
=
"264"
border
=
"0"
usemap
=
"#Map"
ref
=
'imageMaps'
/>

<
map
name
=
"Map"
>

<
area
shape
=
"rect"
coords
=
"203,134,383,187"
href
=
"http://yiye.name"
/>

</
map
>

</
div
>

</
body
>

</
html
>


使用说明:
<divid=”imgMap”>为整个编辑功能的容器，其中包括两个部分：

1、img标签，当然这个img标签外层你可以再嵌套其他的标签，值得注意的是ref=’imageMaps’这个属性，这是必需的，不然程序将忽略掉这个图片。

2、map标签，name属性与img标签的usemap属性对应起来，这个标签包含初始化时这个图片具有的热点链接。
$(‘#imgMap’).imageMaps();绑定插件功能。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航