graphicspaint.net

How do I split an image for use in a web page?

I have an image (source file in Paint.NET format) and it has two areas that need to be click-able when on the web. I've never done anything like this (I usually don't do very graphical sites). Is there an easy way to cut this image up and put it into a web layout?

Solution

  • You could use image maps, but they are difficult to author, and if you just need a rectangle area, consider using invisible absolutely positioned elements over an element with background image. You don't need to cut the image at all, just convert it to jpg format.

    <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>