图片的热点链接(img map area)

news/2024/7/8 5:20:46 标签: 图形, url, border, 2010

怎么在一个图片中做多个链接呢?

热点链接可以帮你解决。这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超链接。要完成地图区域超链接要用到三种标签:<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>

 

转自 http://www.cnblogs.com/eastday/archive/2010/03/17/1688058.html


http://www.niftyadmin.cn/n/1585841.html

相关文章

制作FastDFS的RPM包

首先获取fastdfs的源码&#xff0c;因为fastdfs还依赖一个libfastcommon的库&#xff0c;所以也要准备好。 fastdfs的源码目录结构&#xff1a; libfastcommon的源码目录结构&#xff1a; 接下来将以CentOS 7来进行制作&#xff1a; 首先安装开发环境&#xff1a;  yum -y gro…

javascript中substr()和substring()方法的区别

substr 方法 返回一个从指定位置开始的指定长度的子字符串。 stringvar.substr(start [, length ]) 参数 stringvar 必选项。要提取子字符串的字符串文字或 String 对象。 start 必选项。所需的子字符串的起始位置。字符串中的第一个字符的索引为 0。 length 可选项。在返回…

HTML中的自动换行

在样式中添加如下属性 <p style"word-break: break-all;">就搞定了。 其中可能对英文换行可能会分开一个单词问题&#xff1a;解决如下&#xff1a; 语法&#xff1a; word-break : normal | break-all | keep-all 参数&#xff1a; normal :  依照亚洲…

android-基础编程-ExpandableListview

ExpandableListView继承ListView&#xff0c;具有LIstVIew的基本功能。此外具有group/child&#xff0c;由组与子元素组成。 1.布局主要有是三个。 a.主布局&#xff1a; <ExpandableListViewandroid:layout_width"match_parent"android:layout_height"match…

EAServer 普通jsp网页中调用组件

2019独角兽企业重金招聘Python工程师标准>>> 我们都知道&#xff0c;在pb的4GL页面中&#xff0c;要想访问EAServer上的pb组件是很方便&#xff0c;也是很简单的&#xff0c;只要在页面属性的EAServer属性页上&#xff0c;定义个组件变量即可。 但如果我们是用普通的…

2016 最流行的 Java EE 服务器

如今是我们发布有关 Java 领域统计资料的第四个年头。每年春天&#xff0c;我们对从 JVM 的 Plumbr 代理监测器收集到的数据进行挖掘&#xff0c;发现了以下几点&#xff1a; Java 版本的使用情况&#xff08;是 Java6、7&#xff0c;还是 8&#xff09;&#xff1b; 虚拟机使用…

php--strlen()与mb_strlen的作用与区别

在PHP中&#xff0c;strlen与mb_strlen是求字符串长度的函数PHP内置的字符串长度函数strlen无法正确处理中文字符串&#xff0c;它得到的只是字符串所占的字节数。对于GB2312的中文编码&#xff0c;strlen得到的值是汉字个数的2倍&#xff0c;而对于UTF-8编码的中文&#xff0c…

015-HQL中级5-hive创建索引

索引是hive0.7之后才有的功能&#xff0c;创建索引需要评估其合理性&#xff0c;因为创建索引也是要磁盘空间&#xff0c;维护起来也是需要代价的 创建索引hive> create index [index_studentid] on table student_3(studentid) > as org.apache.hadoop.hive.ql.index.co…