Перейти к содержимому

Реферальная программа Мегаплана

Выбрать шаблон и создать сайт

Хочу создать анимированную картинку с областями-ссылками

#1 sniip

sniip
  • Пользователь
  • 2 сообщений
  • Репутация: 0
0

Отправлено 18 Февраль 2012 - 18:15

вообщем есть у меня сайт про строительство... хочу сделать картинку домика.. и так что, например наводишь на крышу.. она увеличилась или выделилась и можно кликнуть.. и уйти по соответствующему адресу... и так вся картинка.. стены.. окна и т.д. подскажите на чем проще всего реализовать?? какую программу использовать... что почитать?? любую информацию))) Спасибо заранее

 

 

  • 0

#2 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 19 Февраль 2012 - 13:40

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);
}

  • 1

#3 c0ns0l3

c0ns0l3
  • Пользователь
  • 264 сообщений
  • Репутация: 49

Отправлено 20 Март 2012 - 13:37

В таком подходе будет немного некорректно работать ховеры, т.к. они будут срабатывать на прямоугольник (<a>), и этим самым можно получить некорректный ховер когда допустим тыкаешь на край крыши, а получается его перекрывает ссылка уже стены...
Правильней будет сделать 3мя дивами...
1й див - нижний - картинка дома без ховера.
2й див - средний - спрайт ховеров
3й див - area с четко заданными координатами, на которые уже прийдется прикрутить уже скрипт, что б она отрабатывала прокрутку спрайта во 2м диве.
  • 0

#4 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 20 Март 2012 - 15:31

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

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

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

#5 c0ns0l3

c0ns0l3
  • Пользователь
  • 264 сообщений
  • Репутация: 49

Отправлено 21 Март 2012 - 10:18

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


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

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

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


Оформление форума – IPBSkins.ru