Бесчинство бронзовых бюстов

Хотел всего лишь проиллюстрировать пришедшую в голову фразу "Товарищ Сталин играет в шахматы товарищами Калининым и Молотовым", а вышло вона что.

На самом деле это просто пример на перетаскивание картинок по странице, только теперь картинки не нарезаются с помощью стиля CSS из одной исходной, а спокойно лежат в своих файлах, причём, неважно, как именно они спозиционированы в документе изначально (точней, они вообще не спозиционированы, свойство position: absolute; нигде в HTML или CSS-коде не задано). Картинки будут спозиционированы как раз по загрузке страницы, чтобы ими потом можно было управлять.

Объекты, которые разрешено перетаскивать, а именно, помещённые в теги <img> изображения, берутся из одного раздела документа с идентификатором idOfBox, заданным аргументом функции positionOfElement.

Расставляя картинки, можно делать из них композиции, например:

Финалисты Кубка Бронзовых Бюстов (скриншот, уменьшено)

Небольшой скрипт и результат его работы показаны ниже. В картинках оставлены только вышедшие в финал 20 персонажей, а вы сколько узнаёте? Некоторые, впрочем, подписаны, чтобы облегчить жизнь.

 Этот скрипт в работе (новое окно/вкладка)

Текст скрипта можно увидеть из исходника страницы, для этого нажмите правой кнопкой мыши на свободном от рисунков месте и выберите команду меню "Исходный код страницы" или "Просмотр HTML-кода" и т.п., название пункта меню зависит от браузера.

Для подобного скрипта картинки должны быть в формате PNG (или GIF) с прозрачным фоном, чтобы изображения нормально накладывались в визуальном смысле.

17.08.2020, 03:47 [1184 просмотра]