javascript - Show picture while hovering over DropDownList items ASP.NET -

edit apparently can not thought of, found no solution problem.

i learning asp.net, , associate picture every item asp:dropdownlist. using c# programming language, , asp.net webform.

example of trying do:

when user opens dropdownlist, , hovers through items, in sort of picturebox i'd show every item's associated image.

imagine dropdownlist containing: dog ,cat ,lion.

when user opens dropdownlist , hovers on these items, either dog or cat or lion shown next dropdownlist.

i not wish use selectedindexchanged event of dropdownlist, because triggered after option selected.

thank you!

one more thing, know supposed use jquery or/ , css, please specific if have solution.

you can this...

in code-behind add items dropdownlist , loop through them add custom attribute imagename:

dropdownlist1.items.insert(0, new listitem("dog", "dog", true)); dropdownlist1.items.insert(1, new listitem("cat", "cat", true)); dropdownlist1.items.insert(2, new listitem("lion", "lion", true));  string[] imagearray = new string[] { "dog.jpg", "cat.jpg", "lion.jpg" }; int = 0; foreach (listitem item in dropdownlist1.items) {     item.attributes.add("imagename", imagearray[i]);     i++; } 

and on .aspx page bind hover function dropdownlist options show image:

<script> $(document).ready(function () {     $("#<%=dropdownlist1.clientid %> option").hover(function (event) {         var image = $(this).attr("imagename");         document.getelementbyid('imagepanel').innerhtml = '<img src="' + image + '">';     }); }); </script>  <div id="imagepanel"></div> <br /> <asp:dropdownlist id="dropdownlist1" runat="server"></asp:dropdownlist> 

you may want add hoverintent script delay loading of images when hovering.