1

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

4

4 回答 4

3

HTML 图像映射呢？

于 2010-02-19T20:23:35.917 回答
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>
于 2010-02-19T20:53:28.503 回答
1

您可以在 CSS 中执行类似“图像映射”的操作。A List Apart 有一个很好的指南。本质上，您将图像设置为背景并使用 CSS 创建不可见的链接并将它们放置在正确的位置上。

于 2010-02-19T20:25:30.037 回答
0

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

于 2010-02-19T20:25:35.660 回答