首页  韩国资源  酷站加油  我的展厅  设计名站  古典元素  推荐下载  设计欣赏  每周专访  招募精英  人才专区  网页教程  平面设计  编程开发  设计竞赛
当前位置:首页 > 网页教程 > HTMLCSS教程 > 正文
标记语言——图片替换
来源:蓝色理想 作者:zergine 2008年08月20日 12:09 网友评论:0条 点击:

方法C: Phark法

网络最棒的地方,就是一只会有人改进现有技术,寻找出要完成相同目标可用的不同方法.在2003年8月,开发者Mike Rundle制造出自己的图片替换法变形(http://phark.typepad.com/phark/2003/08/accessible_imag.html),以特殊的点子,为想要隐藏的文字指定很大的负数text-indent值.文字理论上仍然会出现在屏幕上,但是超出显示范围太多,就算在最大的屏幕上也不会显示出来,这真是聪明的方法.

标记语言和CSS

与方法B类似,Phark法(以Mike网站的昵称为名)同样不需要额外的标签就能正常运作.使用方法C后标题标记源代码就像这样:

<h1 id="phark">The Phark Method</h1>

这个方法不必用上FIR法额外需要的<span>标签,让我们看看隐藏文字,把它置换成图14-5中的图片所需的简单CSS内容:

图14-5 我们用来替换文字的高26像素的图片phark.gif

#phark {
  height: 26px;
  text-indent: -5000px;
  background: url(phark.gif) no-repeat;
  }

如你所见,方法C是目前最简单的方法,不需要打上盒模型Hack或额外的标签,通过为文字设定夸张负缩进值,就能把文字推到屏幕之外,让使用者看不见它的内容.

与方法B一样,使用这个方法的时候,屏幕阅读器的使用者应该也能正常听到标题文字的内容,这的确是个进步.

仍然不完美

虽然Phark法最容易实现,但是它仍然会在"关闭图片显示,启用CSS"的情况下发生问题,虽然听起来实在不容易发生,但是这代表了在撰写这段文字的时候,暂时还没有完美的解决方法可用.

让我们复习一下先前展示的三种方法,并且归纳它们的差异.

首页 上一页 [1] [2] [3] [4] [5] [6] [7] [8] 下一页 尾页
上一篇:几个经典的css技巧   下一篇:Javascript——浅析注册事件
收藏此页】【打印】【关闭
 相关文章  我要点评
·文章中插入图片的用户体验
·用Flash制作漂亮流动的图片效果
·成龙汽车网焦点图片轮换代码
·百度日文排名从1000变300 图片视频搜索比例高
·焦点图片轮换第三季-iFocus
·Photoshop打造图片高清质感效果
·图片的焦点设计
·是牛粪还是佛祖?浅谈图片投射方法的应用

免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。对本文有任何异议,请联络:68design#163.com
转载要求:作者及来源信息必需保留。转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印。



关于我们 | 在线反馈 | 广告报价 | 友情链接 | 联系我们 | 免责声明 | 在线投稿 | 网站地图
Copyright © 2003-2007 68design.net, All Rights Reserve 【找网页设计师,当然上网页设计师联盟】