非矩形CSS图像链接 [英] Non Rectangular CSS Image Links

问题描述

我有以下要求：

大图像包含需要链接到其他页面的多个热点。听起来很简单。我已经创建了一个简单的html页面，一个带有背景图片的div，以及使用CSS和图片精灵翻转的绝对定位链接。

然而，我现在已经看到另一个图像并且热点不是方形的，而是不规则的形状。在一个例子中，它们与冲浪板相似。任何想法如何让链接只响应图像的实际边界框。也有一些情况下，'热点'是平行四边形形状，并彼此紧挨着对接。

在这种情况下创建矩形图像并不能达到所需的结果。

我认为imagemaps可能是一种解决方案，但我希望先探索所有的替代方案。

希望这是有道理的。

解决方案

HTML映像映射的替代方法是Css sprites，如列表分开的文章。阅读不规则形状一节。

这需要一些工作，但最终的HTML在语义上会更吸引人（比如搜索引擎），而不是标准图像地图。

I have the following requirement:

A large image contains several 'hotspots' that need to link to other pages. Sounds simple. I have created a simple html page, a div with the background image and absolute positioned links using CSS with image sprite rollovers.

However, I have now been presented with another image and the hotspots are not square, but irregular shapes. In one example they are similar to surfboards. Any ideas how I can get the links to respond to only the actual bounding box of the image. There are also instances where the 'hotspots' are parallelogram shaped and butted up next to each other.

Creating rectangular images in this instance just doesn't achieve the results required.

I think imagemaps might be a solution, but I want explore all alternatives first.

Hope this makes sense.

解决方案

The alternative to HTML image maps are Css sprites as described in this a list apart article. Read the section under "irregular shapes".

It takes some work but the final HTML will be semantically more appealing (ie. to search engines) than with the standard image maps.

这篇关于非矩形CSS图像链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！