Question

我有一个图像（Paint.NET格式的源文件），它有两个需要在网络上点击的区域。我从来没有做过这样的事情（我通常不会做很多图形网站）。是否有一种简单的方法可以将图像剪切并放入网页布局中？

Answer 1

Answer 2

您可以使用图像地图，但它们很难创作，如果您只需要一个矩形区域，请考虑在具有背景图像的元素上使用不可见的绝对定位元素。您根本不需要剪切图像，只需将其转换为jpg格式。

<html><head><title>Clickable Areas</title><style type="text/css">
#imageArea 
{
    position:relative;
    width:100px;
    height:60px;
    background-image:url(areaImage.jpg)
}
#imageArea a
{
    width:20px;
    height:20px;
    position:absolute;
}
#area1
{
    top:20px;
    left:20px;
}
#area2
{
    top:20px;
    left:60px;
}
</style></head>
<body>
<div id="imageArea">
    <a href="link1.htm" id="area1"></a>
    <a href="link2.htm" id="area2"></a>
</div>
</body>
</html>

Answer 3

您可以在CSS中执行类似“图像映射”的操作。 A List Apart has a good guide。基本上，您将图像设置为背景，并使用CSS创建不可见的链接并将它们放置在正确的位置。

Answer 4

尝试CSS精灵。 http://css-tricks.com/css-sprites/

如何拆分图像以在网页中使用？

4 个答案: