怎么在一个图片中做多个链接呢?
热点链接可以帮你解决。这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超链接。要完成地图区域超链接要用到三种标签:<img><map><area>。
<img src="图形文件名" usemap="#图的名称">
<map name="图的名称">
<area shape=形状 coords=区域座标列表 href="URL资源地址">
<!--可根据需要定义多少个热点区域-->
<area shape=形状 coords=区域座标列表 href="URL资源地址">
</map>
【1】shape -- 定义热点形状
shape=rect: 矩形
shape=circle:圆形
shape=poly: 多边形
【2】coords -- 定义区域点的坐标
a.矩形:必须使用四个数字,前两个数字为左上角座标,后两个数字为右下角座标
例:<area shape=rect coords=100,50,200,75 href="URL">
b.圆形:必须使用三个数字,前两个数字为圆心的座标,最后一个数字为半径长度
例:<area shape=circle coords=85,155,30 href="URL">
c.任意图形(多边形):将图形之每一转折点座标依序填入
例:<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">
demo :
<img src="../menu.gif" width="204" height="510" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="12,37,181,88" href="http://www.qq.com" onFocus="this.blur()"/>
<area shape="rect" coords="12,97,182,143" href="http://www.yahoo.com" />
<area shape="rect" coords="18,155,179,200" href="http://www.sina.com" />
<area shape="rect" coords="18,211,182,260" href="http://www.baidu.com" />
<!--<area shape="rect" coords="12,444,182,490" href="sm-textfile.html" target="pcs"/> -->
<!-- onFocus="this.blur()" 去掉虚线框 -->
</map>
分享到:
相关推荐
vue实现在图片中画矩形框(JS图片画方块定位坐标),并得到对角坐标,并拿到对应坐标制作图片热区并设置map中area的样式(图片热区map area的用法)
imgmaptool 轻松创建html图像地图的工具
img标签中的usemap属性可引用的map标签中的id或name属性(取决于浏览器),所以我们应同时向map标签添加id和name属性。 示例 例如我们想在下面一张图实现九个热点区域,不切图,就使用map标签。 首先用 ps 得到几...
imgSrc是img网址 用法 import { ImageMap } from '@qiuz/react-image-map' ; 道具 ImageMapProps(扩展React.ImgHTMLAttributes) 名称 类型 默认 className String '' src String '' onClick () => void ...
<img >/images/dl.gif" width="81" height="22" border="0" usemap="#Map"> 上面的图片在<body>中 而下面这句放入<body>外 <map name="Map"> <area shape="rect" coords="3,3,36,19" href="#"> <area ...
<img src="img/机器猫.png" usemap="map" width="%" height="%"> <map id="map" name="map"> <area shape="circle" coords="200,50,30" href="Introduce.html" title="这是机器猫的左眼睛" target="_blank"> ...
<td width="530" height="175" valign="top"><img src="images/main.gif" width="530" height="175" border="0" usemap="#Map"> <td height="36" valign="top"><table width="530" border="0" cellspacing="0...
(1)定义热点区域:使用<map>标签定义热点区域,每个热点区域使用<area>标签说明。热点区域的形状、位置坐标、及其指向的url地址信息都需要指定。 (2)热点区域的形状和坐标:<area>标签的shape属性指定热点区域...
var map , mapName , img , nodeName = element . nodeName . toLowerCase ( ) , isTabIndexNotNaN = ! isNaN ( $ . attr ( element , 'tabindex' ) ) ; if ( 'area' === nodeName ) { map = element . ...
<img src="http://img03.taobaocdn.com/imgextra/i3/136488456/T2bvodXi8aXXXXXXXX_!!136488456.jpg" width="750" height="104" border="0" usemap="#Map11"> <map name="Map11"> <area shape="rect" coords="14,35...
8.4.3 创建图像映射(map元素、area元素) 8.4.4 设置热点默认链接 8.4.5 创建服务端图像映射 8.4.6 客户端图像映射和服务端图像映射混合 8.5 飘浮对象和图文混排 8.5.1 飘浮对象的定义 8.5.2 飘浮对象周围的文本的...
" ></iframe> </div><br> <img name="map" src="/image/maptop.gif" width="950" height="976" border="0" id="map" usemap="#m_map" alt="" /> <map name="m_map" id="m_map"> <area ...
<TD width=978><IMG src="http://vip12.us.la/QQ10周年庆典之 - 用户周年挖宝行动.files/00.gif"></SPAN></TD> </TR></TBODY></TABLE><MAP id=Map name=Map> <AREA shape=RECT coords=418,199,529,222 href=...
* `<area>`: 定义图像映射内部的区域 链接标签 * `<a>`: 定义链接 * `href`: 规定链接指向的页面的 URL * `target`: 规定在何处打开链接文档 表格标签 * `<table>`: 定义表格 * `<tr>`: 定义表格行 * `<td>`: ...
{maccms:link_map_google} Google SiteMap链接 {maccms:count_vod_all} 视频数据总量 {maccms:count_vod_day} 视频当天更新数据量 {maccms:count_art_all} 文章数据总量 {maccms:count_art_day} 文章当天更新数据量 ...
<img src="images/spacer.gif" alt="setalpm" width="120" height="120" border="0" usemap="#Map" class="rss" /> <map name="Map"> <area shape="circle" coords="60,60,63" href="sc.chinaz.com"> </map> ...
6、<area> 定义图像映射中的区域。 7、<article> 定义外部的内容。 8、<aside> 定义article 以外的内容。 9、<audio> 定义声音内容。 10、<b> 定义粗体文本。 11、<base> 定义页面中链接的基准 URL。 12、<bdo> 定义...
if("area"===e){var f=b.parentNode,g=f.name,h;if(!b.href||!g||f.nodeName.toLowerCase()!=="map")return!1;h=a("img[usemap=#"+g+"]")[0];return!!h&&d(h)}return(/input|select|textarea|button|object/.test(e)...
- new log prefix "IMG" for hdimage messages - floppy - added write protect option for floppy drives (based on @SF patch by Ben Lunt) - vvfat support - bugfix: close images on exit - SB16 - ...