Помощник
|
Хочу создать анимированную картинку с областями-ссылками |
sniip
|
Сообщение
#1
|
||
|
|
||
|
|||
yury_mw |
19.2.2012, 14:40;
Ответить: yury_mw
Сообщение
#2
|
|
sniip,
поскольку вы пишите в раздел форума "Javascript и языки разметки", то, надеюсь, рассказывать, как собственно, сделать картинку домика вам не нужно. ;) Так же надеюсь, что у вас уже есть и эта картинка и картинка(и), где у домика выделены интересующие вас места (стены, окна и прочая). Т.е. допустим у вас имеются эти картинки: house.png — картинка домика (неподсвеченного) и подсвеченные части дома (например, нарезаются из картинки подсвеченного домика): * roof_hl.png — крыша * walls_hl.png — стены * something_on_roof_hl.png — что-нить между крышей и окнами * window1_hl.png — окно * window2_hl.png — другое окно * door_hl.png — дверь * stairs_hl.png — лесенка и т.п. Тогда самая простая реализация изображения с активными прямоугольными областями с подсветкой выглядит примерно так (делается при помощи html и css с помощью абсолютного позиционирования. Соответсвенно, почитать вам будет полезно литературу именно про эти дела): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Естественно, на практике нужно будет убрать надписи из ссылок и фоновую заливку соответствующих блоков (в примере они использованы только для наглядности). Т.е., например, в стилях про лесенку будет не a#stairs{а a#stairs{ |
|
|
c0ns0l3 |
20.3.2012, 14:37;
Ответить: c0ns0l3
Сообщение
#3
|
|
В таком подходе будет немного некорректно работать ховеры, т.к. они будут срабатывать на прямоугольник (<a>), и этим самым можно получить некорректный ховер когда допустим тыкаешь на край крыши, а получается его перекрывает ссылка уже стены...
Правильней будет сделать 3мя дивами... 1й див - нижний - картинка дома без ховера. 2й див - средний - спрайт ховеров 3й див - area с четко заданными координатами, на которые уже прийдется прикрутить уже скрипт, что б она отрабатывала прокрутку спрайта во 2м диве. |
|
|
yury_mw |
20.3.2012, 16:31;
Ответить: yury_mw
Сообщение
#4
|
|
В таком подходе будет немного некорректно работать ховеры, т.к. они будут срабатывать на прямоугольник (<a>), и этим самым можно получить некорректный ховер когда допустим тыкаешь на край крыши, а получается его перекрывает ссылка уже стены... c0ns0l3, как было специально сказано — в примере приведена самая простая реализация. Тем не менее в нем (в примере) все срабатывает корректно: чтобы не уйти по неверной ссылке вам должна помочь подсветка (ее, соответственно, и надо сделать адекватно заметной во избежание). Само собой, скриптами, сложными (непрямоугольными) областями, а еще лучше флэшем можно сделать точнее и красивее. Но и повозиться придется заметно больше, чем на чистом css. |
|
|
c0ns0l3 |
21.3.2012, 11:18;
Ответить: c0ns0l3
Сообщение
#5
|
|
|
Само собой, скриптами, сложными (непрямоугольными) областями, а еще лучше флэшем можно сделать точнее и красивее. Но и повозиться придется заметно больше, чем на чистом css. Ну на самом деле там не такой уж и сложный скрипт... 1) прикрепить ховер 2) перехватить хреф, по нему сопоставить с масива на сколько надо сдвинуть спрайт что в сумме составить 4 строчки... А по поводу Флеша - флеш не индексируется поисковиками.. нужно уходить вообще от флеша, или оставлять его только в качестве пассивной анимации...
|
|
|
||
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Создать видеоканал лучше в ютуб или телеграм? | 16 | uahomka | 3055 | 11.4.2024, 20:10 автор: Alexand3r |
|
Биржа для продвижения крауд-ссылками Work2crowd | 22 | work2crowd | 12472 | 12.3.2024, 17:07 автор: 2Index |
|
Как создать бота Телеграм с приемом оплат? | 0 | rownong27 | 450 | 4.3.2024, 0:51 автор: rownong27 |
|
Хочу создать сайт кино. | 12 | jreset26 | 1887 | 30.1.2024, 0:12 автор: Liudmila |
|
Обмен ссылками (производство) | 1 | kabutops06 | 3478 | 13.10.2023, 5:14 автор: rhst9hook |
Текстовая версия | Сейчас: 18.4.2024, 9:28 |