How do I split an image for use in a web page?
I have an i开发者_运维百科mage (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?
What about HTML Image Maps?
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>
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.
Try CSS sprites. http://css-tricks.com/css-sprites/
加载中,请稍侯......
精彩评论