Django Admin - отображать изображение при наведении - PullRequest
Новая
       8

Django Admin - отображать изображение при наведении

0 голосов
/ 17 июня 2020

Я хотел бы отображать эскиз во всплывающем окне при наведении курсора на текст (смайлик камеры) в нашем Django режиме администратора. Код, который у меня есть, работает, но отображает изображение в строке, что нарушает остальную часть макета сайта

Я ни в коем случае не эксперт Django, так что может быть что-то легкое, что мне не хватает . Я полностью открыт для использования других библиотек, чтобы помочь, если это лучший путь вперед, но я не уверен, как правильно загрузить их в django admin. Я также открыт для чистых решений js / css - все, что работает лучше всего!

Вот код, который у меня есть 

def image_column(self, obj):
    format_html(foo + " " + \
            '''<a href="{}"" target="_blank" 
            style="font-size: 18pt" 
            onmouseover="document.getElementById('{}_img').style.display='block';"
            onmouseout="document.getElementById('{}_img').style.display='none';">?  
            <img id="{}_img" style="display:none" src="{}" />'''.format(img_url, img_id, img_id, img_id, img_url)

Я хотел бы получить любые мысли или предложения по лучшему способ сделать его всплывающим, а не встроенным. Спасибо !!

РЕДАКТИРОВАТЬ: Теперь все работает, за исключением смайликов камеры, отображаемых над всплывающим окном. Изображение на заднем плане - это карта (которая должна быть сверху). Изображение камеры находится в нижнем ряду

Camera emoji above pop over

1 Ответ

0 голосов
/ 17 июня 2020

Это может быть проблема только со свойством position изображения, если оно position: relative, тогда оно исправится среди других элементов, вы должны установить его на position: absolute и отсюда вы должны дайте ему top и left, например: top: 0px; left: 0px; относительно родительского элемента, который, я думаю, является элементом <a> ... И вы также должны применить position: relative к родительскому элементу: что опять же, я думаю - это <a> или родительский элемент для элемента <img>

...