Всплывающая картинка при перемещении по option select (title c картинкой)

Рейтинг: 0Ответов: 1Опубликовано: 05.03.2015
<select class="calc" name="uzor">
  <option title="Подсказка 1" value="1">узор 1</option>
  <option title="Подсказка 2" selected="selected" value="2">узор 2</option>
  <option value="3">узор 3</option>
  <option value="4">узор 4</option>
  <option value="5">узор 5</option>
  <option value="6">узор 6</option>
</select>

Подскажите, пожалуйста, как реализовать в подсказках всплывающую картинку?

javascript html jquery html-select
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

В общем, пока вы в долгих раздумьях над моим вопросом в комментарии, я могу предложить вариант с использованием jQuery. Смотрим и тестируем

HTML

<select class="calc" name="uzor">
    <option data-img="img1.jpg" value="1">узор 1</option>
    <option data-img="img2.jpg" selected="selected" value="2">узор 2</option>
    <option data-img="img3.jpg" value="3">узор 3</option>
    <option data-img="img4.jpg" value="4">узор 4</option>
    <option data-img="img5.jpg" value="5">узор 5</option>
</select>
<div id="tooltip">
    <img src="" alt="">
</div>

jQuery

var tooltip = $('#tooltip'),
    calc = $('.calc'),
    posLeft = calc.offset().left + calc.width();

$('option[data-img]', calc).on({
    mouseenter: function (e) {
        $('img', tooltip).attr('src', $(this).data('img'));
        tooltip.finish()
        .css({
            top: e.pageY,
            left: posLeft
        })
        .fadeIn();
    },
    mouseleave: function () {
        tooltip.fadeOut();
    }
});