CSS图像地图技巧和教程

CSS图像地图是指在一张图片上定义多个点击的热点链接,显示信息或导航。它有很多的解决方案,以下我们列出的是迄今为止最好和最有用的技巧和教程。

标题所指的图像地图 ,并不意味着简单的图像替换,它指的是采用纯粹的CSS ,而不是CSS与JavaScript或Ajax混合(虽说也有很多解决方案采用了javascript)。我们只用唯一CSS,来完美实现这个效果。

CSS图像地图, Redux (教程)

CSS图像地图, Redux (教程)

网址 : CSS图像地图, Redux

这个教程采用a:hover效果结合定义列表,利用CSS属性中背景位置进行“定位”。

带有Pop-UP工具提示效果的CSS图像地图 (教程)

带有Pop-UP工具提示效果的CSS图像地图 (教程)

网址 : 带有Pop-UP提示效果的CSS图像地图

使用无序列表,两张图片,和少量的CSS代码 ,你就可以创造一个无障碍“图像地图”的弹出式工具提示,通过地图上的链接为您的读者提供更多信息。与其它图像地图不同的是它支持较旧版本的Internet Explorer 。

网址 : 带有Pop-UP提示效果的CSS图像地图 。
使用无序列表,两张图片,和少量的CSS代码 ,你就可以创造一个无障碍“图像地图”的弹出式工具提示,通过地图上的链接为您的读者提供更多信息。与其它图像地图不同的是它支持较旧版本的Internet Explorer 。

如何在自己的网站上使用CSS创建图像地图?(教程)

如何在自己的网站上使用CSS创建图像地图?(教程)

网址 : 如何在自己的网站上使用CSS创建图像地图?

依旧是一个使用无序列表+CSS创建图像地图的教程。

只使用CSS创建图像地图 (教程)

只使用CSS创建图像地图 (教程)

网址 : 只使用CSS创建图像地图

本教程展示如何让一个普通的定义列表变成一个影像地图,使用的无非就是CSS,所有在大部分浏览器上兼容。教程将带你一步步走,充分说明了使用每个风格的原因以及每一步的后果。

图像地图 (教程)

图像地图 (教程)

网址 : 图像地图

作者深入和详细的教程,将有助于使任何人学习,了解和整理CSS 。本教程中将使用CSS创建不可见的链接并使它们浮动在背景图像上面。

CSS图像翻转地图 (教程)

CSS图像翻转地图 (教程)

网址 : CSS图像翻转地图

这个地图包含鼠标落在国旗之上,是使用一个图片文件和定位悬停控制的CSS文件。

利用CSS图像翻转地图 (技术)

利用CSS图像翻转地图 (技术)

网址 : 利用CSS图像翻转地图

欧洲图片地图,当你悬停在每一个国家的板块时国旗将显示出来。

利用CSS图像翻转地图 (技术)

利用CSS图像翻转地图 (技术)

网址 : 实验利用CSS图像翻转地图

将鼠标悬停在图片显示的三个感兴趣的区域。当悬停在一个区域时,右边将显示一个更大的图片以及说明文字。

卷动图像地图 (技术)

卷动图像地图

网址 : 卷动图像地图

这是一个横向滚动图片,有10个白色矩形的热点。只要点击任何一个热点就看到右边显示的更大的图像和左下角一小区域的信息。

原文:CSS Image Map Techniques and Tutorials
翻译:Epile

您可能还对以下内容感兴趣



目前有4条评论 Add your own

  1. 小明猪 说:

    很棒,完蛋,发现太多东西要学了…

  2. Jutoy 说:

    原来还能这么用CSS…长见识了!
    噢,沙发板凳都没了,就剩下地板了。

  3. lemon 说:

    这个貌似好玩…仔细看下..

我有话说..