Home/ Questions/Q 621315
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T18:51:39+00:00

I have an image (source file in Paint.NET format) and it has two areas

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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