Javascript-форум (https://javascript.ru/forum/)
-   Internet Explorer (https://javascript.ru/forum/css-html-internet-explorer/)
-   -   Как сохранить начальную фоновую картинку, которая исчезает? (https://javascript.ru/forum/css-html-internet-explorer/78817-kak-sokhranit-nachalnuyu-fonovuyu-kartinku-kotoraya-ischezaet.html)

Pahom 08.11.2019 20:45

Как сохранить начальную фоновую картинку, которая исчезает?
 
Как сохранить большую начальную фоновую картинку, которая исчезает после того как на ёё фоне появляется маленькая картинка?

Нормально появляется фоновая картинка "https://mdn.github.io/dom-examples/streams/png-transform-stream/png-logo.png" (Это для примера).
Но как только выводится маленткая картинка "https://js.pngtree.com/v3/images/home/paradrop.png" - фоновая картинка исчезает бесследно.

А хотелось бы, чтобы и эта маленькая картинка и последующие маленькие картинки, которые меняются в цикле, не убивали бы фон (или хотя бы полностью не убивали).

Полный текст программы:

<html>
<head>
<title>Программа приветствия</title>
</head>
<body>
<script type="text/javascript">
(function(i) {
window.setInterval(
function() {
var element = document.getElementById('img');
images = ['https://js.pngtree.com/v3/images/home/paradrop.png',
'https://img.pngio.com/instagram-logo-png-images-instagram-logo-clipart-free-download-instagramlogo-png-310_308.jpg',
'https://www.pngarts.com/files/3/Light-PNG-Image-Background.png',
'https://png.pngtree.com/png-clipart/20190929/ourmid/pngtree-creative-irregular-solid-graphic-text-box-png-image_1755152.jpg'],

j = images.length;
++i < j ? element.src = images[i] : i = -1;
}, 1500);
}(-1));
</script>
<img src="https://mdn.github.io/dom-examples/streams/png-transform-stream/png-logo.png" alt="" id="img" />
</body>
</html>

Заранее благодарен тем, кто попытается мне помочь! )))

рони 08.11.2019 21:03

Pahom,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони 08.11.2019 21:12

Pahom,
<html>
<head>
<title>Программа приветствия</title>
</head>
<body>
<script type="text/javascript">
addEventListener('load', () => {
let element = document.getElementById('img');
images = ['https://js.pngtree.com/v3/images/home/paradrop.png',
'https://img.pngio.com/instagram-logo-png-images-instagram-logo-clipart-free-download-instagramlogo-png-310_308.jpg',
'https://www.pngarts.com/files/3/Light-PNG-Image-Background.png',
'https://png.pngtree.com/png-clipart/20190929/ourmid/pngtree-creative-irregular-solid-graphic-text-box-png-image_1755152.jpg'],
j = images.length, i = 0,
show = () =>  {i = ++i % j; element.src = images[i]; setTimeout(show, 1500)};
show();
})

</script>
<img src="https://mdn.github.io/dom-examples/streams/png-transform-stream/png-logo.png" alt="" id="img" />
</body>
</html>

Pahom 08.11.2019 21:18

Спасибо!

Pahom 08.11.2019 21:38

Не вник в код, увидел, что запостили что-то красивое и поблагодарил. Потом отвлёк реал. А вернувшись к компу лишний раз убедился, что лучшее - враг хорошего. Да, мой код был не гламурный и не кавайный, но он работал одинаково и в IE и в Mozile. А этот причёсанный точно так же работает в мозиле (то есть продвижение по сабжу - нулевое), а под IE не выводит мелкие картинки. Так что прошу не обращать внимания на отформатированный код, бо он нетолерантным к IE оказался (а меня как раз IE больше всего интересует), а помочь мне в первоначальным вариантом. Он хотя и не построен, как рядовые перед генералом, но хотя бы почти рабочий и всего с одним изъяном (а нижний с двумя).
Продолжаю ждать следующих комментов...

рони 08.11.2019 22:19

Pahom,
Цитата:

Сообщение от Pahom
А хотелось бы, чтобы и эта маленькая картинка и последующие маленькие картинки, которые меняются в цикле, не убивали бы фон (или хотя бы полностью не убивали).

что такое фон?

рони 08.11.2019 22:20

Pahom,
а пока всё тоже самое для всех браузеров
<html>
<head>
<title>Программа приветствия</title>
</head>
<body>
<script type="text/javascript">
addEventListener('load', function(){
var element = document.getElementById('img');
images = ['https://js.pngtree.com/v3/images/home/paradrop.png',
'https://img.pngio.com/instagram-logo-png-images-instagram-logo-clipart-free-download-instagramlogo-png-310_308.jpg',
'https://www.pngarts.com/files/3/Light-PNG-Image-Background.png',
'https://png.pngtree.com/png-clipart/20190929/ourmid/pngtree-creative-irregular-solid-graphic-text-box-png-image_1755152.jpg'],
j = images.length, i = 0,
show = function(){i = ++i % j; element.src = images[i]; setTimeout(show, 1500)};
show();
})

</script>
<img src="https://mdn.github.io/dom-examples/streams/png-transform-stream/png-logo.png" alt="" id="img" />
</body>
</html>

рони 08.11.2019 22:25

Pahom,
вариант как я понимаю, что такое фон
<html>
<head>
<title>Программа приветствия</title>
<style type="text/css">
html, body{
  height: 100%;
}

body{
    background-image: url(https://mdn.github.io/dom-examples/streams/png-transform-stream/png-logo.png);
    background-size: cover;
    background-repeat: no-repeat;

}

</style>
</head>
<body>
<script type="text/javascript">
addEventListener('load', function(){
var element = document.getElementById('img');
images = ['https://js.pngtree.com/v3/images/home/paradrop.png',
'https://img.pngio.com/instagram-logo-png-images-instagram-logo-clipart-free-download-instagramlogo-png-310_308.jpg',
'https://www.pngarts.com/files/3/Light-PNG-Image-Background.png',
'https://png.pngtree.com/png-clipart/20190929/ourmid/pngtree-creative-irregular-solid-graphic-text-box-png-image_1755152.jpg'],
j = images.length, i = 0,
show = function(){i = ++i % j; element.src = images[i]; setTimeout(show, 1500)};
show();
})

</script>
<img id="img" />

</body>
</html>

Pahom 09.11.2019 12:23

"что такое фон?" - это та самая самоя большая по размеру картинка, в левом верхнем углу которой, должны в цикле на короткое время появляться маленькие картиночки, частично заслоняя эту большую картинку. Но большая часть большой картинки должна (ну хочу так сделать!) остаться неизменной и не исчезать. Я сейчас в профиле с англоязычной мозилой (русскоязычную нельзя ставить, т.к. в неё принудительно шпионский яндекс внедрили) и в нём больше ничего нет. Нет CodeLobsterа, нет KomodoIDE, нет EmEditorа и других инструментов, к которым я привык. Когда буду в моём привычном профиле с привычными инструментами и комфортной русскоязычной средой (ненавижу пендосов) посмотрю новые варианты. Но это не скоро - есть дела в этом профиле. Однако БОЛЬШОЕ СПАСИБО за Помощь! )))

laimas 09.11.2019 14:21

Цитата:

Сообщение от Pahom
русскоязычную нельзя ставить, т.к. в неё принудительно шпионский яндекс внедрили

?!


Часовой пояс GMT +3, время: 13:10.