Блог

У меня есть таблица изображений (каждое изображение находится в своем собственном td), у меня есть div, который содержит операции, которые могут быть выполнены с изображением. Когда я наведу курсор мыши на изображение, я отображаю div поверх изображения. В данный момент я использую плагин jQuery UI Position. Я написал javascript, который решает эту задачу. У каждого изображения есть атрибут с именем ‘cam’, поэтому я использую селектор для подключения события наведения курсора мыши. Div с содержащимися в нем командами имеет идентификатор ‘dvCamControl’.

Проблема в том, что я не могу расположить div по центру над изображением.

Код:

         $('[cam]')
            .mouseover(function() {               
                $('#dvCamControl')
                    .show()
                    .position({ my: "center", at: "center", of: $(this), collision: 'none'});
            });
  

Изображение выглядит следующим образом

 <IMG style="WIDTH: 300px" alt="img" src="img" cam="img1">
  

Div центрируется вертикально, но не горизонтально. Вместо того, чтобы находиться в центре изображения, div заканчивается немного левее.

Благодаря Стиву Уэлленсу я разобрался с проблемой. Я использовал JSFiddle для воссоздания проблемы и в процессе решил проблему.

Проблема заключалась в том, что div, который я центрировал, не имел фиксированной ширины, поэтому по умолчанию он равен 100%. Мои элементы управления в div были выровнены по левому краю, что затрудняло определение того, что код работает правильно. Как только я указал ширину в div, все было в порядке.

Для справки: http://jsfiddle.net/C4HfL/4 /