图片超链接和文字超链接是一样的,在图像上插入链接:点击图片,跳转页面:<a></a>之间插入<img/>元素。如:<a href="超链接地址"><img src="路径" alt="替代文本"></a>。(如图)
2、局部链接
在某种情况下,我们不希望整张图片加链接。希望的效果是:点击图片某个区域,链接到某地址。是通过map标签和<area>标签结合使用的。如:
(1)、<img src="超链接地址" alt="替换文本" usemap="#map名称" width="链接区域宽度" height="链接区域高度"/>
(2)、<map name="map名称" id="id名称"><area shape="描述区域的形状" coords="坐标" href="链接地址" target="打开方式" alt="替换文本" /></map>
扩展资料:
<img>元素向网页中嵌入一幅图像。
img元素的属性:
(1)、src:图片来源URL。
(2)、alt:规定图像的替代文本。
(3)、height和width:单位为像素,如果不指定,则为默认;如果只指定height或width,则自动调整大小。
(4)、ismap :将图像定义为服务器端图像映射。
(5)、usemap:将图像定义为客户器端图像映射。
(6)、longdesc: 指向包含长的图像描述文档的 URL。
<map>元素定义一个客户端图像映射。
map元素的属性:
(1)、id:为 map 标签定义唯一的名称。
(2)、name:为 image-map 规定的名称。
注意:<img>中的 usemap 属性可引用 <map>中的 id 或 name 属性(取决于浏览器),所以应同时向 <map>添加 id 和 name 属性。
<area>元素定义图像映射中的区域。
area元素的属性:
(1)、alt:规定图像的替代文本。
(2)、shape:用于描述区域的形状,rect\poly\circle\default可选,default指的是还没有被定义的区域。
(3)、coords:指定区域的坐标。比如矩形有4个坐标,前两个是左上角的x,y坐标,后两个是右下角的x,y坐标。
(4)、href和nohref:href指定目的的链接,如果不指定href属性,则需要指定nohref,nohref="nohref"
(5)、target:和<a>标签的作用一样。
注意:area 元素永远嵌套在 map 元素内部。
参考资料:
百度百科-链接图像
HTML使用定义锚<a>创造链接,可用于文本,图片,HTML元素……一,将文本作为超链接
<a href="链接地址">文本</a>
二,将图像作为超链接
<a href="链接地址"><img border="0" src="图像地址"/></a>
三,将书签作为超链接
<a name="tips">(在网页上显示的)书签文本</a>
① 在同文档中创建指向该锚的链接。
<a href="#tips">文本</a>
② 在其他页面创建指向该锚的链接。
<a href="链接地址#tips">文本</a>
注:tips可以改成任意值。
用#符号添加到链接地址的末端,就可以直接链接到tips这个命名了。
其他更多细分的就不说了,大致使用上就这几个
使用 <a>标签的href 属性进行实现;
写法:<a href="url">Link text</a>;应用使用实例:<a href="希望链接到的网址" target="_blank">爸爸妈妈!</a>;
<a>标签定义超链接,用于从一张页面链接到另一张页面。
<a>元素最重要的属性是 href 属性,它指示链接的目标。
扩展资料:
使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签。
语法 :<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>;
例如:<a href="http://www.zhaolion.com" title="点击进入我的博客">click here!</a>;
title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大,主要方便搜索引擎了解链接地址的内容(语义化更友好)
参考资料:html-百度百科
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)