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

 

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

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

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


 

 

 

 

 

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

 

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

 

<!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>
 

 


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

 

 

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

Иногда появляется необходимомость создать эффект увеличения изображения при наведении мышки. ...
Время от времени возникает необходимость подбора цвета.  И именно поэтому ниже представлена таблица с кодами цветов.   ...
Возникла у меня необходимость сделать для заголовка красивый трехмерный текст.  Всё оказалось достаточно просто.....
Время от времени возникает необходимость  делать кнопки и красочные подсказки....
Рейтинг: 0 Голосов: 0 1039 просмотров
Комментарии (2)
Александр # 30 апреля 2013 в 14:44 0
Спасибо за полезную информацию ! Это как раз то что мне нужно было.
Завсегдатай # 2 февраля 2014 в 15:31 0
Пжл aa_victory
Добавить комментарий RSS-лента RSS-лента комментариев