代码之家 › 专栏 › 技术社区 › Max Schmeling

如何分割图像以便在网页中使用?

paint.net graphics

Max Schmeling · 技术社区 · 16 年前

我有一个图像(以Paint.NET格式的源文件),它有两个区域,需要在网上点击时可以。我从来没有做过这样的事情(我通常不做非常图形化的网站)。有没有一个简单的方法来削减这个形象,并把它放到一个网页布局?

4 回复 | 直到 16 年前

George Polevoy 16 年前

你可以使用图像地图,但是它们很难编写,如果你只需要一个矩形区域,考虑在背景图像元素上使用不可见的绝对定位元素。您根本不需要剪切图像,只需将其转换为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>