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

最新推荐文章于 2022-11-28 10:44:50 发布

软件-攻城狮

最新推荐文章于 2022-11-28 10:44:50 发布

阅读量3k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/smshuxue/article/details/13434503

版权

JavaScript 专栏收录该内容

67 篇文章 0 订阅

订阅专栏

插件说明：

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

使用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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 >Image Maps test</ 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 >

使用说明:

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

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

软件-攻城狮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery图片热点链接添加编辑插件

插件说明：制作这个插件的的场景：有客户要求我给他做一个图片banner，且一张图片上会有多个链接。思前想后决定制作这个插件，以便后用。使用：1234567891011121314151617181920212223html PUBLIC "-//W3C//DT
复制链接

扫一扫

专栏目录