Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.11.2019, 20:45
Аватар для Pahom
Новичок на форуме
Отправить личное сообщение для Pahom Посмотреть профиль Найти все сообщения от Pahom
 
Регистрация: 08.11.2019
Сообщений: 9

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

Нормально появляется фоновая картинка "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>

Заранее благодарен тем, кто попытается мне помочь! )))
Ответить с цитированием
  #2 (permalink)  
Старый 08.11.2019, 21:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,216

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

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

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 08.11.2019, 21:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,216

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>
Ответить с цитированием
  #4 (permalink)  
Старый 08.11.2019, 21:18
Аватар для Pahom
Новичок на форуме
Отправить личное сообщение для Pahom Посмотреть профиль Найти все сообщения от Pahom
 
Регистрация: 08.11.2019
Сообщений: 9

Спасибо!
Ответить с цитированием
  #5 (permalink)  
Старый 08.11.2019, 21:38
Аватар для Pahom
Новичок на форуме
Отправить личное сообщение для Pahom Посмотреть профиль Найти все сообщения от Pahom
 
Регистрация: 08.11.2019
Сообщений: 9

Не вник в код, увидел, что запостили что-то красивое и поблагодарил. Потом отвлёк реал. А вернувшись к компу лишний раз убедился, что лучшее - враг хорошего. Да, мой код был не гламурный и не кавайный, но он работал одинаково и в IE и в Mozile. А этот причёсанный точно так же работает в мозиле (то есть продвижение по сабжу - нулевое), а под IE не выводит мелкие картинки. Так что прошу не обращать внимания на отформатированный код, бо он нетолерантным к IE оказался (а меня как раз IE больше всего интересует), а помочь мне в первоначальным вариантом. Он хотя и не построен, как рядовые перед генералом, но хотя бы почти рабочий и всего с одним изъяном (а нижний с двумя).
Продолжаю ждать следующих комментов...
Ответить с цитированием
  #6 (permalink)  
Старый 08.11.2019, 22:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,216

Pahom,
Сообщение от Pahom
А хотелось бы, чтобы и эта маленькая картинка и последующие маленькие картинки, которые меняются в цикле, не убивали бы фон (или хотя бы полностью не убивали).
что такое фон?
Ответить с цитированием
  #7 (permalink)  
Старый 08.11.2019, 22:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,216

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>
Ответить с цитированием
  #8 (permalink)  
Старый 08.11.2019, 22:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,216

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>
Ответить с цитированием
  #9 (permalink)  
Старый 09.11.2019, 12:23
Аватар для Pahom
Новичок на форуме
Отправить личное сообщение для Pahom Посмотреть профиль Найти все сообщения от Pahom
 
Регистрация: 08.11.2019
Сообщений: 9

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

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


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как обернуть картинку в <a> c ссылкой на саму картинку ufaclub jQuery 1 17.07.2014 22:45
Динамическое создание iframe в Firefox mrbean11 Firefox/Mozilla 8 02.11.2012 20:23
Фоновую картинку поменять. Jurasmi Элементы интерфейса 11 08.10.2012 15:25
[Closure Compiler] Как запретить инлайнить функцию, которая вызывается из setTimeout? xintrea Events/DOM/Window 4 11.02.2011 16:23
Как сделать ссылку картинку, которая изменяется при наводе курсора на неё? Кирилл Общие вопросы Javascript 2 10.03.2009 15:14