Форум

_Alex9_ · #1 (**permalink**) 03.09.2013, 16:00

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

Код:

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

ruslan_mart · #2 (**permalink**) 03.09.2013, 16:06

С 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>

_Alex9_ · #3 (**permalink**) 03.09.2013, 16:24

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

рони · #4 (**permalink**) 03.09.2013, 16:57

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

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

да )))

_Alex9_ · #5 (**permalink**) 03.09.2013, 17:30

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

Яростный Меч · #6 (**permalink**) 03.09.2013, 17:37

http://jsfiddle.net/jxA7f/

_Alex9_ · #7 (**permalink**) 03.09.2013, 18:29

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

_Alex9_ · #8 (**permalink**) 03.09.2013, 18:34

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

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

Яростный Меч · #9 (**permalink**) 03.09.2013, 18:39

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

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

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

Форум

Справочник

Discord чат

Курсы javascript