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

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

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

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

HTML5

<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

<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

<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

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=" "?

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

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

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

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	22.10.2013, 21:28	6
	Сообщение от Блондинк@ а что писать в атрибуте alt=" "? Это текст который должны показывать браузеры если картинка не загрузится. На сегодня это не столь актуально как было раньше на низких скоростях. А пустой атрибут требуется для валидации. 0