balvardo23 июл 2008 в 19:43

Подсветка фрагмента картинки.

1 мин

682

Чулан

-4

Комментарии 9

elanc 23 июл 2008 в 20:14

Я на Хабре не так давно и статьи не видел, о которой Вы говорите, но как решение могу предложить следующее:
- создать div по размерам статического изображения; указать для него "position:relative;"
- разместить в нем div'ы с изменяющимися изображениями, позиционируя их при помощи "position:absolute;"
- а для изменяющихся изображений использовать css-спрайты..

На деле получится что-то вроде:

<html><head>
<style type="text/css">
#backimg {background:url('/img/background.png');height:640px;width:480px;position:relative;}
.dynimg {height:64px;width:64px;position:absolute;} /* предположил, что все изменяющиеся картинки одинакового размера */
#element0 {background:url('/img/element0.png');top:40px;left:40px;}
#element0:hover {background-position:0 -64px;}
#element1 {background:url('/img/element1.png');top:80px;left:120px;}
#element1:hover {background-position:0 -64px;}
... /* по аналогии и остальным элементам */
</style>
</head><body>
<div id="backimg">
<div class="dynimg" id="element0"></div>
<div class="dynimg" id="element1"></div>
...
</div>
</body></html>

elanc 23 июл 2008 в 20:21

Извиняюсь — добавлю еще, что если все спрайты будут слева направо, то можно даже #elementX:hover объединить в .dynimg:hover {background-position:0 -64px;}

balvardo 23 июл 2008 в 20:34

Спасибо, сейчас попробую... (Добавил вам кармы =))

myx 23 июл 2008 в 21:32

непонятно, почему просьбы о помощи на хабре заминусовывают(
ведь польза значительно выше, чем от перепечатывания очередной новости

НЛО прилетело и опубликовало эту надпись здесь

soider 24 июл 2008 в 06:53

Если я правильно понял, нечто вроде такого?
http://soiders.narod.ru/map.html

А всплывающую подсказку можно сделать или при помощи title, или на яваскриптах =)

soider 24 июл 2008 в 07:25

http://soiders.narod.ru/map2.html

А ещё можно сделать так, чтобы не трогать первоначальную картинку вобще =)

balvardo 24 июл 2008 в 08:30

Супер, что то такое явление как gif у меня из головы вылетело =) Спасибо вам =)

soider 24 июл 2008 в 08:40

Так во втором варианте, наоборот как раз png используется =) Но вобщем, пожалуйста =)

Зарегистрируйтесь на Хабре, чтобы оставить комментарий