如何用层(DIV)给一张图片上的固定文字添加超链接?

其实是一个导航菜单来的,只是这个菜单以前给别做成了图片形式,图片右侧上方原有A、B、C这三项文字,后来我自己用DW打开复制了一个层什么的,加了一项D,这ABCD都在同一个层里,如果移动这四项的任何一个,其他三项也跟着动。

现在又要在这张图片上加多一项菜单(E),但位置是图片右上角,我再利用复制这个方法就行不通了,因为E与原来的菜单不在同一行(不知道这样说是否正确?)

又想着用[热点]工具来加链接,可用[热点]加,得选中图片啊,我在DW里老是选不到那个图片啊,一点就是选中那些蓝色框框的层。

怎么加链接呢?文字已经是做死在图片上的(就是放大会看到格子的那种字了)~~~~~~~~~
我可能将简单问题复杂化了,简单点说:如何在一张图片上,用DIV为图片上的文字加链接,文字的位置很杂乱。

”DIV“在一个有超链接的图片上再加几个文字链接,首先需要在有图片的超链接后面添加一些span或者是p标签,同样的也是使用a标签包裹就实现了链接的同步实现,通过代码来理解:
html>
<head>
</head>
<body>
<div><a href=''><img src='图片地址'><span>我也是有图片的链接地址</span></a></div>
</body>
</html>
解释:以上在href中放入相应的超链接地址,之后点击此行文字,就可以实现超链接访问。
温馨提示:内容为网友见解,仅供参考
第1个回答  推荐于2017-10-03
把图片放到一个临时的页里,画好热区,然后把代码复制回来就行了.

<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也可以。。呵

本回答被提问者采纳
第2个回答  2011-10-14
这个是用模板的悲剧,不知道在说啥,也不贴代码
第3个回答  2011-10-14
把代码晒出来 截图说明下 不然不明白

如何用层(DIV)给一张图片上的固定文字添加超链接?
”DIV“在一个有超链接的图片上再加几个文字链接,首先需要在有图片的超链接后面添加一些span或者是p标签,同样的也是使用a标签包裹就实现了链接的同步实现,通过代码来理解:html> <head> <\/head> <body> <div><a href=''><img src='图片地址'><span>我也是有图片的链接地址<\/span><\/a><\/...

如何用层(DIV)给一张图片上的固定文字添加超链接?
把图片放到一个临时的页里,画好热区,然后把代码复制回来就行了.<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的位置,把&换成半角的,全角在这里会被转换成空格,...

怎么在DIV里面的图片上添加超链接
首先你得给图片加<a>标签,图片标签是<img>,所以框架是这样子的 <div><a href="#" target="_blank" title=""><img src="images\/20.jpg" width="200" height="500"><\/a><\/div> <a>标签里面的(href="#")是跳转链接的意思,#是空链接,#可以更改你想跳转的链接。(target="_blank...

dw div 图片中加文字超链接
<div>里面包含一个a标签,图片放div里面 然后文字放a标签里面 是要这效果?说明是什么说明,简单的标识性的说明就有title属性就有了

dw中怎么实现对图片上文字的超链接
div+css定义。一个在另一个之上。就是文字div在图片之上.文字设置超链接。就可以了。

如何把一个图片和文字放在一个〈div〉里面超链接?
<div> <a href="list05.html"> <img src="xxx"\/> <p>这里是文字<\/p> <\/a> <\/div> 为了a标签的高度不缺失,a标签必须块状化。img也块状化吧

如何在图片上添加文字把文字弄成超链接???淘宝网店上用的.
在图片上添加1个新的图层,就是“插入记录”-》“布局对象”-》ap div(a),然后在这个层里添加文字,设置为超级链接,这是在dreamwear制作网页中的办法,你试试行不行,我也不是很确定!

dreamweaver 图片上添加文字 文字带超链接
可以做成热区。 就是选中图片 设计最底下有个指针热点工具 可以选中画个不同形状的图形 然后超链接 就可以点击了。。在一个就是把图片截取成小图片然后加载到网页做成超链接两个都可以。。可以用绝对定位的层,把图片做成表格的背景,然后在表格中添加文字 在给文字加超链接,看你自己怎么选啦。。

我想给一张地图图片制作超链接,效果是这样的
方法1:可以用Dreamweaver 做热点链接 在网页中插入一张<img src="">然后在到设计视图里面去选中图片 点最下方的属性栏用热点工具给图片做热链接。方法2:把这张图片放到一个标签里面去如DIV等标签 ,然后在写一个DIV标签把这个DIV标签定位浮动在那张图片标签上做链接。方法3:就是在Dreamweaver 里面...

DW CS4如何在图片上上添加文字的超级链接。就是导航栏上的文字。
普遍的有两种 1,把图片当成背景,然后在这背景里输入文字再加上超链接。如:<div style="width:200px; height:200px; background:url(pic.jpg) no-repeat 0 0;"><a href="#">文字链接<\/a><\/div> \/\/图片是pic.jpg 自己换一下。 2,写一个浮动层浮在这个图片层的上面。这个比前面...

相似回答