Расположение 2-х картинок на странице

228
03 ноября 2017, 09:44

Такое вопрос. Хочу расположить 2 картинки друг на друга, что б на нажатие на верхнюю она удалялась и оставалась только одна картинка.

<img style="width: 100%; height: 100%" src="Img/Simpsons/BartSkirt.jpg">
<img style="width: 100px; height: 100px; position: relative; top: -100%;" src="Img/Simpsons/Homer.jpg">

Так вроде работает но есть 1 минус. Пространство под фотками(где по идеи должна быть 2-ая фотка) пустое. Все тупо съезжает. Как это исправить?

Answer 1

А почему бы при нажатии, просто не менять атрибут src и не использовать одну картинку?

jQuery(document).ready(function($) { 
  var urls = [ 
    'https://yt3.ggpht.com/-A58yPmvdnIc/AAAAAAAAAAI/AAAAAAAAAAA/2o1tCSQHEG0/s100-c-k-no-mo-rj-c0xffffff/photo.jpg', 
    'https://yt3.ggpht.com/-DBNBnMLsnrs/AAAAAAAAAAI/AAAAAAAAAAA/onFqjfb9JQs/s100-c-k-no-mo-rj-c0xffffff/photo.jpg', 
    'https://i.pinimg.com/736x/8f/cc/53/8fcc536c373eea4264d20a01f29341b5--homer-simpson-donuts-simpsons-donut.jpg', 
    'http://www.drawingstep.com/images/smmaggie.jpg' 
  ]; 
  var idx = 0; 
  $('#img').click(function() { 
    if (idx < urls.length) 
      this.src = urls[idx++]; 
  }).click(); 
});
#img { 
  height: 100px; 
  width: 100px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<img id="img" />

Или на чистом JS

var urls = [ 
  'https://yt3.ggpht.com/-A58yPmvdnIc/AAAAAAAAAAI/AAAAAAAAAAA/2o1tCSQHEG0/s100-c-k-no-mo-rj-c0xffffff/photo.jpg', 
  'https://yt3.ggpht.com/-DBNBnMLsnrs/AAAAAAAAAAI/AAAAAAAAAAA/onFqjfb9JQs/s100-c-k-no-mo-rj-c0xffffff/photo.jpg', 
  'https://i.pinimg.com/736x/8f/cc/53/8fcc536c373eea4264d20a01f29341b5--homer-simpson-donuts-simpsons-donut.jpg', 
  'http://www.drawingstep.com/images/smmaggie.jpg' 
]; 
var idx = 0; 
 
function imgClick(AImg) { 
  if (idx < urls.length) 
    AImg.src = urls[idx++]; 
}
#img { 
  height: 100px; 
  width: 100px; 
}
<body onload="imgClick(document.getElementById('img'))"> 
  <img id="img" onclick="imgClick(this)" /> 
</body>

READ ALSO
Hover присваивается к каждому элементу
HTML

Hover присваивается к каждому элементу

Столкнулся с проблемой: Hover присваивается к каждому элементу в таблице, а по начальным данным должен работать на каждой ячейке при наведении...

 268
Переобьявление CSS-свойств
HTML

Переобьявление CSS-свойств

Подключая какую-нибудь стороннюю библиотеку, например Bootstrap, её CSS-свойства могут не совпасть с требуемыми к определённой страницеДопустим,...

 250
Как картинку наложить позади параграфа?
HTML

Как картинку наложить позади параграфа?

Такой эффект хочу получить

 237
Подводные камни HAVING
MySQL

Подводные камни HAVING

Сейчас пишу кое какую штука с генерацией SQL запросов налету, и поэтому решил спросить чтобы не наступить на грабли

 341