Не работает спецэффект

Энтомолог · Регистрация: 25.04.2012

Студворк — интернет-сервис помощи студентам

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<body>
<div id="slideshow">
<img width="512px" height="384px" src="1.gif" usemap="#slideshowMap">
<img width="512" height="384" src="2.gif">
<img width="512" height="384" src="3.gif">
<map name="slideshowMap">
<area shape="rect" coords="0, 0, 63, 47">
<area shape="rect" coords="64, 48, 127, 95">
<area shape="rect" coords="128, 96, 191, 143">
<area shape="rect" coords="192, 144, 255, 191">
<area shape="rect" coords="256, 192, 319, 239">
<area shape="rect" coords="320, 240, 383, 287">
<area shape="rect" coords="384, 288, 447, 335">
<area shape="rect" coords="448, 336, 511, 383">
</map>
</div>
</body>
</html>

У картинок установлен display none (пробовал также visibility hidden). Нужно, чтобы по очереди появлялись все area. Пробовал указывать им display block или visibility visible, но они не отображаются. Как сделать, чтобы можно было отображать изображение по кусочкам ?

Добавлено через 30 минут
Хочу сделать смену картинок как на этом сайте http://ww2.ru

@vovandr · 03.09.2013, 20:50

Этот эффект делается на js. Клонируется оригинальное изображенние, потом создаётся количество контейнреров на лету равное количеству кубиков. В эти кубики позиционируется клонированное изображение. В этих кубиков подбором left и top спозиционированные картинки обрезаются черех overflow. Затем обычными флотами выстраиваются

В сети есть готовые решения. Я делал сам, очень увлекательно так что советую попробовать

Энтомолог · 03.09.2013, 20:59 **[ТС]**

Что есть флот ?

@vovandr · 03.09.2013, 21:00

float:left

@newJS · 03.09.2013, 21:37

Сообщение от Alex9

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

area это область карты и оно тут не при делах, тут el.style.clip="..." нужно использовать, если требуется как в цитате, а по ссылке совсем другое. Неувязка получается.

Энтомолог · 03.09.2013, 22:11 **[ТС]**

По ссылке там вообще библиотека приделана. Я хочу без библиотек сделать.

Новые блоги и статьи Все статьи Все блоги /
Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек SDL3 и Box2D из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия SDL 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual. . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	03.09.2013, 20:50
	Этот эффект делается на js. Клонируется оригинальное изображенние, потом создаётся количество контейнреров на лету равное количеству кубиков. В эти кубики позиционируется клонированное изображение. В этих кубиков подбором left и top спозиционированные картинки обрезаются черех overflow. Затем обычными флотами выстраиваютсяВ сети есть готовые решения. Я делал сам, очень увлекательно так что советую попробовать 1

Энтомолог 141 / 182 / 44 Регистрация: 25.04.2012 Сообщений: 2,623 Записей в блоге: 5
	03.09.2013, 20:59 [ТС]
	Что есть флот ? 0

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	03.09.2013, 21:00
	float:left 1

Энтомолог 141 / 182 / 44 Регистрация: 25.04.2012 Сообщений: 2,623 Записей в блоге: 5
	03.09.2013, 22:11 [ТС]
	По ссылке там вообще библиотека приделана. Я хочу без библиотек сделать. 0