Поместить картинку на картинку

29 апреля 2013 - Завсегдатай

Постараюсь максимально сжато рассказать как сделать так, чтобы на картинку большого размера поместить маленькую картинку и чтобы маленькая картинка была кликабельной.

Для этого можно использовать один из описываемых ниже способов.

Первый способ.

Подключить отдельным файлом, в котором будут прописаны стили:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Картинка в картинке</title>

<style type="text/css">
#big_img {
position: relative;
display: block;
}
#img1 {
position: absolute;
left: 370px; bottom: 110px;
display: block;
}
#img2 {
position: absolute;
left: 190px; top: 140px;
display: block;
}
</style>
</head>
<body>
<div id="big_img"><img width="600" height="345" alt="" src="/images/world.jpg" />
<div id="img1"><a href="http://puksinka.me/stati/grafika-i-dizain/pomestit-kartinku-na-kartinku.html"><img title="Москва" width="160" height="120" alt="Москва" src="/images/1b.jpg" /></a></div>
<div id="img2"><a href="http://puksinka.me/stati/grafika-i-dizain/pomestit-kartinku-na-kartinku.html"><img title="Питер" width="160" height="120" alt="Питер" src="/images/2b.jpg" /></a></div></div>
</body>
</html>

Положение маленьких картинок на большой регулируется размерами left: 370px; bottom: 110px; прописаных после кода position: absolute;

Я этот же самый код подцепил внешним файлом и вывел его в эту статью и вот что получилось:

Картинка в картинке

Второй способ.

В файл стилей вашего шаблона добавляем код:

#big_img {
position: relative;
display: inline-block;
}
#img1 {
position: absolute;
left: 370px; bottom: 110px;
display: inline-block;
}
#img2 {
position: absolute;
left: 190px; top: 140px;
display: inline-block;
}

Затем на сайте в месте, где требуется поместить картинку на картинку добавляем код:

Проверяем и высказываемся)

Похожие статьи:

Кнопки и всплывающие подсказки на css В разделе - Графика и дизайн Время от времени возникает необходимость делать кнопки и красочные подсказки....	Трёхмерный текст на страницу В разделе - Графика и дизайн Возникла у меня необходимость сделать для заголовка красивый трехмерный текст. Всё оказалось достаточно просто.....
Увеличение картинки при наведении на неё мышью В разделе - Графика и дизайн Иногда появляется необходимомость создать эффект увеличения изображения при наведении мышки. ...	Таблица HTML кодов цветов В разделе - Графика и дизайн Время от времени возникает необходимость подбора цвета. И именно поэтому ниже представлена таблица с кодами цветов. ...