Comments 9
Я на Хабре не так давно и статьи не видел, о которой Вы говорите, но как решение могу предложить следующее:
- создать 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>
- создать 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>
Извиняюсь — добавлю еще, что если все спрайты будут слева направо, то можно даже #elementX:hover объединить в .dynimg:hover {background-position:0 -64px;}
непонятно, почему просьбы о помощи на хабре заминусовывают(
ведь польза значительно выше, чем от перепечатывания очередной новости
ведь польза значительно выше, чем от перепечатывания очередной новости
Если я правильно понял, нечто вроде такого?
http://soiders.narod.ru/map.html
А всплывающую подсказку можно сделать или при помощи title, или на яваскриптах =)
http://soiders.narod.ru/map.html
А всплывающую подсказку можно сделать или при помощи title, или на яваскриптах =)
Sign up to leave a comment.
Подсветка фрагмента картинки.