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

Постараюсь максимально сжато рассказать как сделать так, чтобы на картинку большого размера поместить маленькую картинку и чтобы маленькая картинка была кликабельной.
Для этого можно использовать один из описываемых ниже способов.
Первый способ.
Подключить отдельным файлом, в котором будут прописаны стили:
<!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>
<!-- Styles -->
<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;
}
Затем на сайте в месте, где требуется поместить картинку на картинку добавляем код:
<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>
Проверяем и высказываемся)
Похожие статьи:
![]() Время от времени возникает необходимость делать кнопки и красочные подсказки.... | ![]() Иногда появляется необходимомость создать эффект увеличения изображения при наведении мышки. ... |
![]() Таблица HTML кодов цветовВ разделе - Графика и дизайнВремя от времени возникает необходимость подбора цвета.
И именно поэтому ниже представлена таблица с кодами цветов.
... | ![]() Трёхмерный текст на страницуВ разделе - Графика и дизайнВозникла у меня необходимость сделать для заголовка красивый трехмерный текст.
Всё оказалось достаточно просто..... |
![]() |
Добавить комментарий | ![]() |
RSS-лента комментариев |
Мы в Twitter Мы в Фейсбуке Мы в LiveInternet Мы в Google+ Мы в ЖЖ