Как вставить одну картинку в другую?

@Блондинк@ · Регистрация: 16.01.2011

Студворк — интернет-сервис помощи студентам

Задание детское, но у меня тупик )))) Нужно добавить на страницу 2 картинки - одну в формате GIF, а вторую - в формате JPEG. Это все понятно. Но нужно ту, что JPEG разместить на на той, что GIF. И еще чтобы JPEG была при этом ссылкой на сайт с оригиналом этой картинки. Со ссылкой тоже проблем нет. Скажите, так возможно вообще размещать - одну на другую? Пишу в блокноте. Заранее спасибо откликнувшимся.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
  <head>
    <title>Моя страничка</title>
  </head>
  <body bgcolor=#f08080>
     <h1> 
       <div align="center"> 
          <font color=#800080> 
          ГРАФИКА В ГИПЕРТЕКСТЕ
          </font>
       </div> 
     </h1>
     <br>
  <center> <img src="узор.gif"> </center>
     <br>
  <div align="center"> <a href="http://mindal.mybb.ru/viewtopic.php?id=302&p=3"> <img src="цветок.jpg"> </a> </div> 
  </body>
</html>

@newJS · 22.10.2013, 07:30

CSS
1
2
.cont {position:relative; top:0; left:0;}
.cont a  {position:absolute; top:0; left:0;}

HTML5
1
2
3
4
5
<div class="cont">
<img src="pics/spiral.png" alt="">
<a href="#"><img src="pics/pict1.jpg" alt=""></a>
 
</div>

@SaNeK_71 · 22.10.2013, 10:02

Так же, допустим если gif - это фон, то можно его положить background'ом на body ну или html, а jpg картинку, на какой-нить div или img :-)

@Блондинк@ · 22.10.2013, 13:40 **[ТС]**

newJS, а что писать в атрибуте alt=" "?

Добавлено через 5 минут
Как-то не получается наложить одну картинку на другую. Можно описать механизм поподробнее?
SaNeK_71, первая картинка не должна быть фоном страницы, а именно одну вставить в другую.

@SaNeK_71 · 22.10.2013, 15:16

Блондинк@, пример

HTML5
1
2
3
4
<div class="pic">
    <img class="one" src="http://rewinet.com/wp-content/uploads/2013/02/yandex.gif" width="158" height="103">
    <img class="two" src="http://www.dmwmedia.com/wp-content/uploads/2011/07/Google-logo.jpg" width="200" height="300">
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div.pic{
    position:relative;
}
div.pic img.one{
    position:absolute;
    top:0;
    left:0;
    z-index:10;
}
div.pic img.two{
    position:absolute;
    top:10px;
    left:70px;
    z-index:15;
}

Комментарий модератора

Правила форума пункт 5.19

Запрещено размещать ссылки на коды программ, расположенные на других сайтах. Коды программ должны размещаться на форуме.

@newJS · 22.10.2013, 21:28

Сообщение от Блондинк@

а что писать в атрибуте alt=" "?

Это текст который должны показывать браузеры если картинка не загрузится. На сегодня это не столь актуально как было раньше на низких скоростях. А пустой атрибут требуется для валидации.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .

@SaNeK_71 Прописан в интернете... 94 / 78 / 11 Регистрация: 06.04.2012 Сообщений: 345
	22.10.2013, 10:02
	Так же, допустим если gif - это фон, то можно его положить background'ом на body ну или html, а jpg картинку, на какой-нить div или img :-) 1

@Блондинк@ 1 / 1 / 0 Регистрация: 16.01.2011 Сообщений: 28
	22.10.2013, 13:40 [ТС]
	newJS, а что писать в атрибуте alt=" "? Добавлено через 5 минут Как-то не получается наложить одну картинку на другую. Можно описать механизм поподробнее? SaNeK_71, первая картинка не должна быть фоном страницы, а именно одну вставить в другую. 0