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



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

#1 sniip

sniip
  • Неактивные
  • 2 сообщений
  • Репутация: 0
0

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

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

 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Бесплатные фотобанки или ищем картинки для своего сайта на фотостоках
  2. Как создать баннер для сайта?
  3. 10 способов украсить сайт
  4. Куда можно залить картинку?
  5. Продвижение сайта картинками, фотографиями и видео

#2 yury

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

Отправлено 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
  • Пользователь
  • 636 сообщений
  • Репутация: 183

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

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

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

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

#5 c0ns0l3

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

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

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


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

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

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


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