如何拆分圖像以便在網頁中使用？

我有一個圖像（Paint.NET格式的源文件），它有兩個區域需要在網頁上點擊。我從來沒有做過這樣的事情（我通常不會做非常圖形化的網站）。有沒有簡單的方法來裁剪這個圖像並將其放入網頁佈局中？如何拆分圖像以便在網頁中使用？

2010-02-19 Max Schmeling

您可以使用圖像映射，但它們很難創作，如果您只需要一個矩形區域，請考慮在具有背景圖像的元素上使用不可見的絕對定位元素。根本不需要剪切圖像，只需將其轉換爲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-19 20:53:28

我想這可能是我會走的路。只有兩個區域，我希望背景居中，但我只是將它的容器相對位置，然後絕對定位在它的內部，用於隱形懸停鏈接。謝謝 –