Разделите изображение на пиксельные строки и прикрепите события

Question

Разделите изображение на пиксельные строки и прикрепите события

0

У меня есть div, который содержит изображение, которое является вертикальной колоркой. Это то, что я хочу сделать:
Когда вы наводите указатель мыши на любое местоположение цветовой панели, текстовое окно отслеживает указатель мыши, указывающее соответствующее значение colourbar. Вот изображение, которое я быстро сделал для демонстрационных целей:

То, как я думал сделать это, - это разделить изображение на строки пикселей и затем привязать событие hover к каждой строке пикселя, к которой я могу добавить информацию. Однако я не знаю, как это сделать.

Таким образом, как я могу разделить изображение на ряд строк пикселей, чтобы добавить к ним события, или есть лучший способ сделать это?

Roman 13 май 2014, в 15:12

Источник

Теги:

javascript

html

css

google-maps

image

4 ответа

Ещё вопросы

David · Answer 1 · 2014-05-13T12-24-00.000Z

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

Manu · Answer 2 · 2014-05-13T11-48-00.000Z

Для этого потребуется немного усилий. Но для начала вы можете использовать свойство html5 canvas и создать требуемый эффект градиента.

Вот демо, которое я создал: http://jsfiddle.net/manublueheart/XSWeK/

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

Посмотрите, поможет ли это вам.

Учебное пособие: http://www.elated.com/articles/snazzy-animated-pie-chart-html5-jquery/

Демо: http://www.elated.com/res/File/articles/development/javascript/snazzy-animated-pie-chart-html5-jquery/

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,0,800);
grd.addColorStop(1,"blue");
grd.addColorStop(0,"green");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,200,600);

Spiked · Answer 3 · 2014-05-13T11-13-00.000Z

Вам нужна функция для перевода y-координаты указателя мыши на соответствующий цвет, который я назвал getValueForPos (..) здесь.

div.addEventListener('mousemove', function(e) {
  var yPos = parseInt(e.y - img.getBoundingClientRect().top);
  var colorValue = getValueForPos(yPos);
  // Do something with colorValue in a hover
});

Daniele94 · Answer 4 · 2014-05-13T10-27-00.000Z

У меня есть идея, но она немного сложна. Теперь я пытаюсь объяснить это: вам нужно пересечься с вашим изображением, невидимой таблицей. В таблице должно быть несколько строк, например количество цветовых вариаций. В каждой строке вам нужна только одна ячейка. Вы можете сделать эту таблицу с циклами. С помощью css просто назначьте для всех ячеек один и тот же класс, чтобы вы могли управлять зависанием во всех ячейках. Скажи мне, если я не понял