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?
+1
A:
You can do an "image map"-like thing in CSS. A List Apart has a good guide. Essentially, you set the image as a background and use CSS to create invisible links and position them over the correct spots.
jball
2010-02-19 20:25:30
+2
A:
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>
George Polevoy
2010-02-19 20:53:28
I think this is probably the way I will go. There are only two areas, and I want the background centered, but I'll just make its container relative position, and then absolute positioning inside of it for the invisible hovering links. Thanks
Max Schmeling
2010-02-19 20:56:01