X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Хочу создать анимированную картинку с областями-ссылками
sniip
sniip
Topic Starter сообщение 18.2.2012, 19:15; Ответить: sniip
Сообщение #1


вообщем есть у меня сайт про строительство... хочу сделать картинку домика.. и так что, например наводишь на крышу.. она увеличилась или выделилась и можно кликнуть.. и уйти по соответствующему адресу... и так вся картинка.. стены.. окна и т.д. подскажите на чем проще всего реализовать?? какую программу использовать... что почитать?? любую информацию))) Спасибо заранее
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
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">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>house</title>
<style type="text/css">
#house{
position: relative;
width: 250px;
height: 250px;
background: #ccf url(house.png);
}
#house a{
display: block;
font: normal 12px Arial, "Nimbus Sans L", Helvetica, sans-serif;
color: #009;
text-decoration: none;
}
a#roof{
position: absolute;
top: 0px;
left: 0px;
width: 250px;
height: 75px;
background: #f99;
}
a#roof:hover{
background: #f66 url(roof_hl.png);
}
a#walls{
position: absolute;
top: 80px;
left: 0px;
width: 250px;
height: 170px;
background: #fcf;
}
a#walls:hover{
background: #f6f url(walls_hl.png);
}
a#something_on_roof{
position: absolute;
top: 25px;
right: 25px;
width: 100px;
height: 65px;
background: #fcc;
}
a#something_on_roof:hover{
background: #f00 url(something_on_roof_hl.png);
}
a#window1{
position: absolute;
top: 100px;
left: 10px;
width: 70px;
height: 100px;
background: #99f;
}
a#window1:hover{
background: #66f url(window1_hl.png);
}
a#window2{
position: absolute;
top: 100px;
right: 10px;
width: 70px;
height: 100px;
background: #99f;
}
a#window2:hover{
background: #66f url(window2_hl.png);
}
a#door{
position: absolute;
top: 100px;
left: 90px;
width: 70px;
height: 130px;
background: #9f9;
}
a#door:hover{
background: #6f6 url(door_hl.png);
}
a#stairs{
position: absolute;
top: 230px;
left: 75px;
width: 100px;
height: 20px;
background: #999;
}
a#stairs:hover{
background: #666 url(door_hl.png);
}
</style>
</head>
<body>
<div id="house">
<a href="roof/" id="roof" title="крыша">крыша</a>
<a href="walls/" id="walls" title="стены">стены</a>
<a href="something_on_roof/" id="something_on_roof" title="что-нить между крышей и окнами">что-нить между крышей и окнами</a>
<a href="window/" id="window1" title="окно">окно</a>
<a href="window/" id="window2" title="другое окно">другое окно</a>
<a href="door/" id="door" title="дверь">дверь</a>
<a href="stairs/" id="stairs" title="лесенка">лесенка</a>
</div>
</body>
</html>

Естественно, на практике нужно будет убрать надписи из ссылок и фоновую заливку соответствующих блоков (в примере они использованы только для наглядности). Т.е., например, в стилях про лесенку будет не
a#stairs{
position: absolute;
top: 230px;
left: 75px;
width: 100px;
height: 20px;
background: #999;
}
a#stairs:hover{
background: #666 url(door_hl.png);
}
а
a#stairs{
position: absolute;
top: 230px;
left: 75px;
width: 100px;
height: 20px;
}
a#stairs:hover{
background: url(door_hl.png);
}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
c0ns0l3
c0ns0l3
сообщение 20.3.2012, 14:37; Ответить: c0ns0l3
Сообщение #3


В таком подходе будет немного некорректно работать ховеры, т.к. они будут срабатывать на прямоугольник (<a>), и этим самым можно получить некорректный ховер когда допустим тыкаешь на край крыши, а получается его перекрывает ссылка уже стены...
Правильней будет сделать 3мя дивами...
1й див - нижний - картинка дома без ховера.
2й див - средний - спрайт ховеров
3й див - area с четко заданными координатами, на которые уже прийдется прикрутить уже скрипт, что б она отрабатывала прокрутку спрайта во 2м диве.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 20.3.2012, 16:31; Ответить: yury_mw
Сообщение #4


В таком подходе будет немного некорректно работать ховеры, т.к. они будут срабатывать на прямоугольник (<a>), и этим самым можно получить некорректный ховер когда допустим тыкаешь на край крыши, а получается его перекрывает ссылка уже стены...

c0ns0l3,
как было специально сказано — в примере приведена самая простая реализация. Тем не менее в нем (в примере) все срабатывает корректно: чтобы не уйти по неверной ссылке вам должна помочь подсветка (ее, соответственно, и надо сделать адекватно заметной во избежание).

Само собой, скриптами, сложными (непрямоугольными) областями, а еще лучше флэшем можно сделать точнее и красивее. Но и повозиться придется заметно больше, чем на чистом css.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
c0ns0l3
c0ns0l3
сообщение 21.3.2012, 11:18; Ответить: c0ns0l3
Сообщение #5


Само собой, скриптами, сложными (непрямоугольными) областями, а еще лучше флэшем можно сделать точнее и красивее. Но и повозиться придется заметно больше, чем на чистом css.


Ну на самом деле там не такой уж и сложный скрипт...
1) прикрепить ховер
2) перехватить хреф, по нему сопоставить с масива на сколько надо сдвинуть спрайт

что в сумме составить 4 строчки...

А по поводу Флеша - флеш не индексируется поисковиками.. нужно уходить вообще от флеша, или оставлять его только в качестве пассивной анимации...

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Создать видеоканал лучше в ютуб или телеграм?
 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


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 18.4.2024, 9:28

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet