如何用层（DIV）给一张图片上的固定文字添加超链接？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用层（DIV）给一张图片上的固定文字添加超链接？相关的知识，希望对你有一定的参考价值。
其实是一个导航菜单来的，只是这个菜单以前给别做成了图片形式，图片右侧上方原有A、B、C这三项文字，后来我自己用DW打开复制了一个层什么的，加了一项D，这ABCD都在同一个层里，如果移动这四项的任何一个，其他三项也跟着动。
现在又要在这张图片上加多一项菜单（E），但位置是图片右上角，我再利用复制这个方法就行不通了，因为E与原来的菜单不在同一行（不知道这样说是否正确？）
又想着用[热点]工具来加链接，可用[热点]加，得选中图片啊，我在DW里老是选不到那个图片啊，一点就是选中那些蓝色框框的层。
怎么加链接呢？文字已经是做死在图片上的（就是放大会看到格子的那种字了）~~~~~~~~~
我可能将简单问题复杂化了，简单点说：如何在一张图片上，用DIV为图片上的文字加链接，文字的位置很杂乱。
html>
<head>
</head>
<body>
<div><a href=''><img src='图片地址'><span>我也是有图片的链接地址</span></a></div>
</body>
</html>
解释：以上在href中放入相应的超链接地址，之后点击此行文字，就可以实现超链接访问。 参考技术A 把图片放到一个临时的页里,画好热区,然后把代码复制回来就行了.
<div style="position:absolute;left:100px;top:100px;"><a href="Page.htm" style="text-decoration:none;">＆nbsp;＆nbsp;＆nbsp;＆nbsp;</a></div>
用left和top样式控制DIV的位置,把＆换成半角的,全角在这里会被转换成空格,就看不到了.
感觉这个没有图像热区的方法好.追问
谢谢，你这个方法似乎我没有尝试成功。我想问：
为何不能直接在原来的代码里加 层 来控制位置，而要把图片放到另外一个页面调用？
不是让你把图片放到另外的页面调用,而是让你把图片放到另外的文件里就能圈划热区了.当然,你并没有说那张图是不是背景图,如果是背影图是无法做热区的.
在原来的代码里也许是可以再加层的,但是要看你的代码是以何种形式生成的,如果是在一个循环里,你就不能把加层的代码也写到循环里,这样有可能会产生多个层,还可能因此而发生冲突.
其实不能马上帮你找到解决方法的原因还是没有看到代码和你想实现功能的截图.
Auto
CONTACT US
CUSTOMER SERVICE
这个就是原来的菜单导航，原来只有下面两项的，我后面在此层里加多了B.html，但现在加的不在这一层了。而是在这个菜单的上方。你的方法基本接近我要的效果了。只是链接与层还不能对应起来。
看起来比较像样式引起的问题.你说B.html那一行是你添加的,那么class="no1"你有没有验证过?有没有定义过这个样式? 这个样式是否与no3,no2相同或相似?
追问有的。
.no1
left:58px;
width:99px
.no2
right:-42px;
width:155px
.no3
left:-33px;
width:74px
.no4
left:133px;
width:84px
no3与no4就是我后来添加的，no3对应B.html，现在加no4好像没什么效果？
我按照你的方法新加了一层在此层上方，层的位置是对了（覆盖图片文字了），但在所添加层的链接却在这个图片文字之外，所以鼠标放过去点就自然点不到。我说明了没有？
＆nbsp;＆nbsp;＆nbsp;＆nbsp;
试过用z-index将层提到前面来吗? 也许是在你当前层的下面呢.
另外,试试给A标签加width, height和display:block样式来控制A标签大小,以覆盖你所要的区域.
test
我要放置的层位置如上所示，现在是test这个文字似乎并不在层里？我加图片吧。就是层与图片上的Company Culture对应了，但链接（即test）不在层里。你上面那个z-index我加了，没见效。
怎么感觉你的A标签已经被样式定义为浮动了呢?
＆nbsp;＆nbsp;＆nbsp;＆nbsp;
你这样试试,不使用DIV了,直接使用A标签的浮动对象,我已把背影色设为红色,这样很醒目,很容易找到.
按以上方法做，不用DIV，我看到红色块并将其移动到我图片的文字上面，然后去掉这些红色背景与＆nbsp之类的，但链接的长宽不够。就是比如我图片的文字 是一个英文单词，这单词只有一半有链接，另一半没有。
追答你改一下内嵌样式里的width,height不就行了么.或者多用几个nbsp也可以把A标签宽度撑大的.
追问是的，现在就这样搞了一下，似乎又变长了，超出了。不过没关系啦。谢谢。不用DIV也可以。。呵
本回答被提问者采纳 参考技术B 这个是用模板的悲剧,不知道在说啥,也不贴代码 参考技术C 把代码晒出来 截图说明下 不然不明白如何在一张图片上制作多个超级链接？
当浏览者在网页图片上的不同位置按下鼠标左键，此时就会连接至不同的网页，这个效果不错吧？FrontPage 2002提供了非常简便的在一张图片上制作多个超链接的制作工具，利用鼠标在图片上拖曳，我们就可以直接将图片划分出许多不同的区域并制作出多个超链接了。
1、请先开启一个新的网页，然后点击工具栏上的“插入文件中的图片”按钮。
2、在“图片”对话框中搜寻自己要插入的图片（点击“视图”右边的三角形选“预览”可在下面的预览窗口中查看你要选的图片），选定图片后点“插入”。
3、回到主编辑画面后，在插入的图片上单击鼠标左键，此时图片四周就会被八个点所包围起来，同时，在图片下方就会出现“图片工具条”。有时，“图片工具条”不会自动跳出，选择菜单“视图→工具栏→图片”，即可让“图片工具条”出现。
4、在“图片工具条”的右边，可以找到我们操作要用到的工具按钮，它们分别是“长方形热点”、“圆形热点”。我们直接选取“长方形热点”按钮进行长方形作用区域的设置。
5、点一下“长方形热点”按钮，直接在要产生超链接的图片区域上按住鼠标左键不放，之后拖曳出超链接区域的范围直到符合我们理想的区域大小，然后放开鼠标左键结束区域设定。如果点的是“圆形热点”按钮，开始点应放在所要选定的圆形超链接区域的中心。
6、在紧接着弹出的“建立超链接”对话框中，可以直接选择或输入我们要进行超链接的网页地址，然后按下“确定”按钮关闭“建立超链接”对话窗口。
7、依照步骤5—6所说明的方法在图片别的区域加入其他的超链接。以后打开这个网页，当我们将鼠标指针移至图片各个超链接区域上时，鼠标指针都会改变为“手指”的形状，这就表示我们已经成功地在一张图片上建立了多个超链接了。交流QQ：2881064157
以上是关于如何用层（DIV）给一张图片上的固定文字添加超链接？的主要内容，如果未能解决你的问题，请参考以下文章