Javascript-форум - Отображение картинки по частям

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Отображение картинки по частям (https://javascript.ru/forum/misc/41186-otobrazhenie-kartinki-po-chastyam.html)

Отображение картинки по частям

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

Код:

<!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, но они не отображаются. Как сделать, чтобы можно было отображать изображение по кусочкам ?

С area такого не добиться. Используйте background-position.

.test > div {
   background: url('myimage.jpg');
   height: 100px;
   width: 100px;
}

<div class="test">
   <div style="background-position: 50px 50px"></div>
   <div style="background-position: 150px 150px"></div>
</div>

С помощью этого свойства можно сделать эффект смены картинок как тут http://ww2.ru/ ?

Цитата:

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

С помощью этого свойства можно сделать эффект смены картинок как тут http://ww2.ru/ ?

да )))

тут почитал http://htmlbook.ru/css/background-position
до конца так и не понял как это работает
можете объяснить более подробно ? хотя бы как с его помощью разбить изображение на кусочки

Стал более понятен принцип работы. А по центру изображения как можно области вырезать ?

#div2 {
    background-position: -20px -20px;
    left: 40px;
}

Сам вроде разобрался. Правильно сделал код ?

Цитата:

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

А по центру изображения как можно области вырезать ?

разбить на большее число кусочков. некоторые скрыть (или вообще не добавлять в верстку)