Как разделить изображение для использования на веб-странице?
У меня есть изображение (исходный файл в формате Paint.NET), и у него есть две области, которые должны быть доступны при нажатии в Интернете. Я никогда не делал ничего подобного (я обычно не делаю очень графических сайтов). Есть ли простой способ вырезать это изображение и поместить его в веб-макет?
4 ответа
Вы можете использовать карты изображений, но их сложно создавать, и если вам просто нужна прямоугольная область, подумайте об использовании невидимых абсолютно позиционированных элементов над элементом с фоновым изображением. Вам вообще не нужно вырезать изображение, просто конвертируйте его в формат 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>
Вы можете сделать что-то вроде "карты изображений" в CSS. A List Apart имеет хорошее руководство. По сути, вы устанавливаете изображение в качестве фона и используете CSS для создания невидимых ссылок и размещения их в правильных местах.