html按链接图片替换,标记语言——图片替换

标记语言——图片替换

互联网   发布时间：2008-10-17 18:55:58   作者：佚名   我要评论

点击这里返回网页教学网　HTML教程　栏目．想浏览CSS教程请点这里。

上文：标记语言——为文字指定CSS样式。

Chapter 14 图片替换

随着更多设计师与开发者开始使用标准(特别是CSS),每天都会有许多新技术被发现,达成相同目标的新方法,更好的方法也不断发展

技巧延伸

在这个单元中,首先先来看看两个真实世界里或许能正确应用的图片替换技术的地方,首先,我们先来看看标识(logo)替换的有用技巧,这是推广FIR技巧的(方法A)的Douglas Bowman最先告诉我的.其次,我会分享Fast Company的网站是如何不使用JavaScript单靠图片替换技术做出导航系统的.

标识替换

在本章开始的时候讨论了如何用CSS把文字替换成图片.这些方法都有些特定的缺点,但是这些缺点陷在一种特殊情况下会完全消失:那就是用图片.....替换掉另一个图片.

但是为什么会想这么做?

Hi-Fi和Lo-Fi

以图片替换掉另一个图片的理由之一,可能是为了提供不同的网站标识,一种给完全支持CSS(能正确处理background属性)的浏览器,另一种则是给老旧浏览器,手持设备,屏幕阅读器等.

如果你的标识有配合CSS设计的透明颜色,特殊颜色时,这个方法尤其便利,你或许会想显示Lo-Fi版本的标识,让页面在CSS关闭或者不支持的时候仍然有不错的外观.

示例

为了避开著作权律师的纠缠,我将再度以个人网站作为示例.它不仅替换了标识图片,同时还考虑到首页之外的其他页面,启用CSS版的标识仍能作为超链接点击,连回首页.

一起来看看我在首页上标记标识所使用的源代码,以及其他页面使用的源代码.

这是首页的:

其他所有页面的标识都能点击,将使用者带回到首页:

height="31" alt="SimpleBits" />

一对标识

图14-6和14-7是我使用的两个标识,前面这个是在未使用样式的页面里显示于行内的版本(Lo-Fi),而后面这个则是在现代浏览器之内被CSS引用的图片(Hi-Fi).

图14-6 未启用CSS的浏览器会看到的logo_lofi.gif

图14-7 启用CSS的浏览器会看到的logo_corn.gif

CSS内容

把这些东西搭在一起,加上CSS使每件事成为可能!

首先,把行内图片的宽度设为0将它隐藏起来,记得不要用display属性隐藏lo-fi标识,这样屏幕阅读器才比较有机会正确念出隐藏图片(的alt文字内容):

#logo img {

display: block;

width: 0;

}

接着,为我偷偷加上的标签以background属性指定hi-fi标识图片.对,这很没意义,语义上也很没意义,但是这次就当成例外吧.

#logo span {

width: 173px;

height: 31px;

background: url(../images/logo_corn.gif) no-repeat;

}

你应该发现了,我们该做的所有事情就是把高度,宽度设成与替换用的图片相同,同时把背景图片指定为hi-fi版.

恢复超链接

最后,对首页以外的其他页面来说,仍然希望使用者能够点击标识,回到首页.但是在把图片宽度设置成0之后要怎么办到呢?现在根本没有能够点击的区域.

我们为标识的加上一条声明,把它的点击范围"伸展"到覆盖整个背景图片的范围,宽度与替换的图片相同.

#logo a {

border-style: none;

display: block;

width: 173px;

}

通过用CSS指定的宽度,我们甚至能提供两张大小不同的图片,在这个例子中,他们的大小是一样的.

加上了border-style属性去掉了大多数浏览器为图片链接自动加上的预设边框(图14-8).

图14-8 超链接标识,显示选择范围

成果

看看图14-9和14-10,你能发现,再使用刚刚示范的标记源代码与样式之后,就能为无法使用样式,无法启动CSS的使用者分别提供一套标识.当标识有链接时,仍能以一条简单的CSS做出选择范围.

图14-9 支持CSS的浏览器显示hi_fi标识

图14-10 不支持CSS时显示的lo-fi标识

相信这个示例显示了现实世界里使用图片替换技术也不必内疚的情况,确切来说,就是将现存的行内图片用另一个CSS引用的图片取代的情况.

接下来,继续看看另一个现实世界的个案研究,这是我为Fast Company网站设计的导航系统,它结合了无序清单,图片置换..以及一点其他的手法.

相关文章

这篇文章主要介绍了html父子页面iframe双向发消息的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来2020-10-12

这篇文章主要介绍了如何在HTML里加载摄像头，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-29

这篇文章主要介绍了html-webpack-plugin使用，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-15

这篇文章主要介绍了html直接引用vue和element-ui的方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-02

这篇文章主要介绍了详解HTML中字体使用line-height依然不能垂直居中解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友2020-08-20

这篇文章主要介绍了前端html换肤功能的实现代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-08-20

这篇文章主要介绍了多个HTML页面共同调用一段html代码的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来2020-08-17

这篇文章主要介绍了HTML中图片不存在显示默认图片的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来2020-08-17

这篇文章主要介绍了HTML table行距的改变方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学2020-07-31

这篇文章主要介绍了HTML Table 空白单元格补全的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一2020-07-31

最新评论