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

Question

Хорошо, что я пытаюсь сделать, это простой подсказку, которая, когда вы наводите указатель мыши на имя цвета, показывает небольшое изображение этого цвета. HTML разметка выглядит следующим образом:

<label class="colorPicker"> 
    <input type="radio" checked="" id="20" value="20" name="id[2]"> 
    <img width="16" height="16" title=" DinoBlack Mat " alt="DinoBlack Mat" src="images/attributes/color/dinoblack_mat.jpg">DinoBlack Mat 
</label> 
<label class="colorPicker"> 
    <input type="radio" id="874" value="874" name="id[2]"> 
    <img width="16" height="16" title="XrayBlue shiny" alt="XrayBlue shiny" src="images/attributes/color/xrayblue_shiny.jpg">XrayBlue shiny 
</label> 

Я использую плагин JQuery "Tooltip" и я добавил следующее к моей главной JS-файла:

$('.colorPicker').tooltip({ 
    track: true, 
    delay: 0, 
    showURL: false, 
    fade: 250, 
    bodyHandler: function() { 
     return $("<img/>").attr("src", [THE SOURCE FOR THE IMAGE]); 
    } 
}); 

Идея состоит в том, что изображение должно скрыть по умолчанию. Но когда вы наводите курсор на текст, появляется маленькое эскиз и позволяет легко распознать цвет. Проблема заключается в том, что я понятия не имею, как получить src для миниатюры. Я не знаю, как извлечь src из img внутри выбранного элемента. Я использовал различные комбинации, используя это ключевое слово, но ничего не работало.

Я также попытался добавить путь src как атрибут rel к метке, но также без каких-либо успехов. Не стоит говорить, что я также контролирую PHP-вывод ...

Я действительно надеюсь, что вы можете мне помочь. Я ищу в Интернете дни без везения. Я отчаялась: D

/Миккель Lund

Answer 1

$('.colorPicker').tooltip({ 
    track: true, 
    delay: 0, 
    showURL: false, 
    fade: 250, 
    bodyHandler: function() { 
     return $("<img/>").attr("src", $(this).children('img:first').attr('src')); 
    } 
}); 

и вы все сделали :)