本日志标题:如何用CSS实现图像替换链接文本显示并保证链接可点击        [2011-1-7]

一个很普通的网页中显示LOGO图像,按照以往的页面制作经验,基本是在页面中插入图像即可(<img src="logo.gif" />),不过以新WEB标准进行CSS布局,首先就对该XHTML源码进行改造,设置为纯文本

一、为什么不直接插入图像?

1、插入图像的XHTML语意性不强,搜索引擎也无法辨别
2、插入的图像后期维护不灵活,如果需要变动,必须将引用的页面全部修改

采用CSS定义图像替换文本,严格意义上来说还是文本(网页源代码中可看),但表现形式是图像化的内容(用户浏览可看),同时如果需要修改图像,只需修改CSS文件中定义的属性值即可。

二、CSS定义图像替换链接文本必须满足哪些要求?

1、能显示出LOGO图像
2、隐藏链接文本
3、同时实现LOGO区域可点击

三、将XHTML编码进行调整?

原先XHTML编码


<div id="logo"><a href="http://www.3826946.com/" title="手机祝福短信"><img src="logo.gif" /></a></div>



将以上插入的图片代码替换成文本


<div id="logo"><a href="http://www.3826946.com/" title="手机祝福短信">短纤维-手机祝福短信网</a></div>



这么修改看来,页面中不会存在具体的图像元素,实现XHTML文档的干净。从搜索引擎的角度也更利于信息的读取。

四、通过CSS定义图像替换该文本(表现形式上)

1、定义id是logo的div的背景图像,设置为背景图像不重复,靠左靠上对齐


#logo {
    background-image: url(/images/logo.gif);
    background-repeat: no-repeat;
    background-position: left top;
}



2、定义div内的a链接属性,设置宽度和高度(以背景图像LOGO的大小为基准),设置链接的显示为块状(display: block;)

此时的div区域既显示了背景图像,又显示了链接文本,并且也有了可点击区域,设置文本的缩进即可将文本隐藏(text-indent: -9999px;)


#logo a {
    height: 50px;
    width: 269px;
    display: block;
    text-indent: -9999px;
}



text-indent一般用在中文段落首行空两格的习惯中,如“text-indent:2em”,现在设置“-9999px”即将文本置于当前位置左侧9999px处,间接实现文本的不可见。

五,效果预览

[Ctrl+A 全部选择进行拷贝 提示:可先修改部分代码,再点击运行]
在百度搜索完整的如何用CSS实现图像替换链接文本显示并保证链接可点击内容,或者用Google搜索相关的更多内容

By [cnbruce] at 10:12:56 | 评论 [12] | 浏览 [15520] | TrackBack| 返回顶部

About Comments
老戴终于开言了,博客发霉了。
我的链接呢?我给你换到www.itbulu.com了。
By [itbulu] at 2011-1-10 19:00:55
布鲁斯狼,我也是扬州的,现在想做个企业网站,你知道扬州哪个网络公司的后台管理系统比较完善?对于选择网络公司进行网站建设方面,您有什么建议啊,希望您抽空回答我下!
By [seowang] at 2011-1-13 14:15:16
看楼上ID貌似对SEO比较敢兴趣哈,联系我Q吧:22814446
By [cnbruce] at 2011-1-13 14:55:26
呵呵,很抱歉今天才过来看留言,我加你QQ了!
By [seowang] at 2011-1-14 21:02:48
真的是,又学东西了,好久没来了,问声站长好。
By [ffjordan] at 2011-3-9 11:01:37
布鲁斯狼,在这里让我学到很多东西,谢谢你了
http://www.fubaoning.info/
http://www.shengrizhufu.com
By [xziaou] at 2011-3-10 15:21:27
图文替换的技术有好多种实现方法,如果考虑可用性,我觉得用 position 的方式比较好。

http://www.codebit.cn/css/image-replacement.html#gl
By [CodeBit.cn] at 2011-3-16 17:36:17
DIV+CSS?这个要好好学习一下
http://www.artkashop.net/
By [阿卡随心手艺] at 2011-3-24 4:49:44
代码实在是太难写了
http://www.mboxshop.net/
By [mbox音乐盒] at 2011-3-24 4:51:21
新知识,学习了,谢谢站长
By [cardvdplayer] at 2011-4-4 12:10:53
谢谢站长,辛苦了。我的网站:
http://www.361steel.com
By [361steel] at 2012-11-11 16:57:41


Post a Comment
呢称: 验证码: 
禁止笑脸转换 禁止UBB | 缩放输入框:6 5 | [Ctrl+Enter提交](1000个字符限制)