0
<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>

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

1
  • @Dikkiy, Вы не указали главное - какие средства допустимы для решения вашей задачи.
    – Deonis
    5 мар 2015 в 18:16

1 ответ 1

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();
    }
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.