Бесчинство бронзовых бюстов
Хотел всего лишь проиллюстрировать пришедшую в голову фразу "Товарищ Сталин играет в шахматы товарищами Калининым и Молотовым", а вышло вона что.
На самом деле это просто пример на перетаскивание картинок по странице, только теперь картинки не нарезаются с помощью стиля CSS из одной исходной, а спокойно лежат в своих файлах, причём, неважно, как именно они спозиционированы в документе изначально (точней, они вообще не спозиционированы, свойство position: absolute;
нигде в HTML или CSS-коде не задано). Картинки будут спозиционированы как раз по загрузке страницы, чтобы ими потом можно было управлять.
Объекты, которые разрешено перетаскивать, а именно, помещённые в теги <img>
изображения, берутся из одного раздела документа с идентификатором idOfBox
, заданным аргументом функции positionOfElement
.
Расставляя картинки, можно делать из них композиции, например:
Финалисты Кубка Бронзовых Бюстов (скриншот, уменьшено)
Небольшой скрипт и результат его работы показаны ниже. В картинках оставлены только вышедшие в финал 20 персонажей, а вы сколько узнаёте? Некоторые, впрочем, подписаны, чтобы облегчить жизнь.
Этот скрипт в работе (новое окно/вкладка)
Текст скрипта можно увидеть из исходника страницы, для этого нажмите правой кнопкой мыши на свободном от рисунков месте и выберите команду меню "Исходный код страницы" или "Просмотр HTML-кода" и т.п., название пункта меню зависит от браузера.
Для подобного скрипта картинки должны быть в формате PNG (или GIF) с прозрачным фоном, чтобы изображения нормально накладывались в визуальном смысле.
17.08.2020, 03:47 [1175 просмотров]