Наложение Div на верхней части изображения в точном месте

0

Я проверил другие сообщения, но никто не упоминал о точном местоположении для наложения.

Подумайте, что у меня есть изображение, например. светофор. Мне нужно наложить (не уверен, что это правильный термин или нет), например, над точным расположением зеленой лампы. Это так, что я могу анимировать div через jQuery, чтобы изменить цвет div, чтобы иметь эффект, который анимация анимации.

Теперь проблема заключается в том, как быть точным в этом, так что расположение div полностью соответствует той части изображения? Означает ли это необходимость измерения пикселей перед установкой верхней и левой частей div? Или есть более умный способ? Я рассмотрел другие варианты, такие как использование холста (или svg или silverlight), чтобы перерисовать всю вещь вместо того, чтобы вставлять изображение (т.е. Перерисовать совершенно новое изображение светофора). Однако для этого я считаю, что это будет более сложным, чем то, что я спросил. Поправьте меня, если я ошибаюсь.

Пожалуйста, порекомендуйте.

  • 0
    да, вы можете сделать это таким образом.
  • 0
    @jimmyweb, спасибо, мой друг, но куда ты ссылался?
Показать ещё 2 комментария
Теги:
svg
silverlight
html5-canvas

1 ответ

0
Лучший ответ

Один из способов заключается в том, чтобы поместить изображение внутри div, которое либо расположено относительно друг друга, если вы хотите, чтобы оно было встроено с другими элементами или позиционировалось как абсолютное, если вы хотите установить его положение на странице. Затем поместите абсолютно перекрывающийся div внутри того же div, что и изображение.

например

Стили

#holder {
    position:relative;
}

#over {
    position:absolute;
    width:40px;
    height:40px;
    left:20px;
    top:30px;
}

тело

<div id='holder'>
    <img src='IMAGE SOURCE'>
    <div id='over'></div>
</div>

Вам нужно будет отрегулировать ширину, высоту, левый и верхний части div с id = 'over' по мере необходимости.

Вы можете заменить div id = 'over', используя позицию изображения, абсолютную на этом изображении, и при необходимости установите слева и вверх.

  • 0
    спасибо, вы имеете в виду, что точное позиционирование все еще должно быть скорректировано / сделано вручную, верно?
  • 0
    Да, немного систематических проб и ошибок должно дать вам нужные вам значения.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню