html基础 图片热点,给一张图片加多个链接

镇场诗:
    清心感悟智慧语,不着世间名与利。学水处下纳百川,舍尽贡高我慢意。
    学有小成返哺根,愿铸一良心博客。诚心于此写经验,愿见文者得启发。
——————————————————————————————————————————

code:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
</head>
<body>
    <!--图片热点,给一张图片加多个链接-->
    <img src="images/picture.jpg" usemap="#Map" width="500" height="500"/>
    <map id="Map" name="Map"><!--通过id 将两者关联起来 id是唯一的 js要用的,但是name可以相同-->
        <area href="#" shape="rect" coords="173, 106, 273, 206"/><!--【左上角距离左边num1,距离上边num2】,【右下角距离左边num3,距离上边num4】-->
        <area href="#" shape="circle" coords="221, 358, 50"/><!--圆心坐标 num1,num2  半径num3-->
    </map>
</body>
</html>

result:

——————————————————————————————————————————
博文的精髓,在技术部分,更在镇场一诗。编辑器 VS2015,浏览器 Firefox。
html+css+js,强,值得努力学习。我是跟着 传智播客的PHP基础视频_html+css+js 视频教程学习的,推荐。
我是一个新手,所以如果博文的内容有可以改进的地方,甚至有错误的地方,请留下评论,我一定努力改正,争取成就一个良心博客。
注:此文仅作为科研学习,如果我无意中侵犯了您的权益,请务必及时告知,我会做出改正。

时间: 2024-08-24 14:40:36

html基础 图片热点,给一张图片加多个链接的相关文章

通过图片定位给一张图片添加多个链接

我们在建站的时候使用图片素材能为整个网站增色不少,但是太多的边框按钮图片会增加请求次数,从而降低网站加载速度,这时我们可以考虑将多个小图片元素集合到一张图片中,然后通过图片定位的方式来调用,这样所有的小图片总共只请求一次.跟着ytkah来试试吧 设计好图片,上传.我们先确定所要的小图片元素的位置和面积,可以用photoshop来查找,也可以通过下面这个小工具来实现: http://www.w3school.com.cn/tiy/t.asp?f=html_ismap 修改图片地址,在<img>位

HTML基础(二)——表单,图片热点,网页划区和拼接

一.表单 <form id="" name="" method="post/get" action="负责处理的服务端"> id不可重复:name可重复:get提交有长度限制,并且编码后的内容在地址栏可见,post提交无长度限制,且编码后内容不可见. </form> 1.文本输入 文本框<input type="txt" name="" id="&

iOS开发基础-图片切换(2)

延续:iOS开发基础-图片切换(1),对(1)里面的代码进行改善. 在 ViewController 类中添加新的数组属性:  @property (nonatomic, strong) NSArray *infoArray; //存放图片信息 通过 self.infoArray 的 getter 方法对其实现初始化(懒加载),其中代码中的 _infoArray 不能用 self.infoArray 替换: 1 //infoArray的get方法 2 - (NSArray *)infoArray

图片热点,网页划区等和表单

今天我们学习了图片热点,网页划区以及比较重要的表单.记忆性的东西比较多,都是基础.多写多用下面我们来看一下今天的知识点 图片热点 ________________________________________________________________________________________________________________________________ 网页划区 在一个网页里,规划出一个区域用来展示另一个网页的内容. _______________________

HTML练习-图片热点

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

4.C#WinForm基础图片(显示和隐藏)

要求: 软件上有一张图片,默认是隐藏的.用户在文本框中输入身份证号(131226198105223452),点击按钮,如果年龄大于18岁,则显示图片. 知识点: 取当前年份,Date Time Now Year所需用到的函数 函数一: string string.Substring(int startIndex,int length)(+1重载)                从此实例检索字符串.子字符串从指定的字符位置开始且具有指定的长度          异常:              

图片热点、网页划分与拼接

1.图片热点 就是对图片上某个区域进行超链接 首先引用一张图片,其次用<map>标签,map里面有area,最后再在图片里调用<map>. <img src=""  usemap="123"> <map name="123" > <area shape="rect" coords=""338,161,528,330""/>---

03 XHTML DTD 表格标记 图片热点 多媒体标记

复习: XHTML DTD文档类型定义 <meta> 表格标记 <table>的常用属性 <tr> 行的常用属性 <td>或<th>列的属性 综合案例:月福首页 图片热点(图像地图) 多媒体标记(插入Flash的标记) 多媒体标记<object> <object>的主要属性 复习: 超级链接.锚点 <a>标记属性: Href:链接目标文件的URL,绝对URL和相对的URL 绝对URL:远程的绝对URL地址,一般

html5 图片热点area,map的用法

今天看了一个html5在图片上面创建热点的标签,所谓图片热点就是给你一张图片然后你可以设置点击图片不同的位置进入不同的链接!如果下面是一张图片的话,里面在长方形.圆形.三角形区域都可以进入其他网页! 下面,我们来实例介绍map,area这些标签的用法!  1,制作矩形热点 (1),shape标签表示热点的形状,有矩形(rectangle),圆形(circle),多边形(polygon)和整个图片(default) (2),coords是每个形状的坐标,不同形状坐标表示不同!上面矩形的坐标(x1,