Member Avatar for navi17

I have lots of pets in a dropdown. what i want to achieve is that when ever i hover on dropdown, it will display the image of particular pet as a popup.

Any idea how can i achieve that?

  • 3 Contributors
  • 2 Replies
  • 122 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

opened this thread asking for a hover-popup image for items in a dropdown. As noted, this is a JavaScript/DOM problem rather than PHP, and raised that duplicates make answers harder to track. The important technical constraint: native <option> elements are text-only and cannot reliably contain HTML (images), so embedding an <img> inside an <option> will not work cross‑browser — see the HTML spec notes on the option element (MDN).

Three practical routes:

  • Keep the native <select> and show a single floating preview when the control changes or when the closed select is hovered (simple but limited).
  • Replace the select with a custom list (recommended). Each item can hold a data- attribute with the image URL; mouseenter/mousemove on items can show an absolutely positioned preview div with the image.
  • Use a select plugin that supports templating (for example jQuery UI selectmenu or Select2) so entries can render images while keeping select-like behavior.

Minimal example (custom list + preview). The list items store the image URL in data-img; mouse events update and position #preview:

<ul class="fake-select" tabindex="0">
  <li data-img="/images/cat.jpg">Cat</li>
  <li data-img="/images/dog.jpg">Dog</li>
  <li data-img="/images/rabbit.jpg">Rabbit</li>
</ul>

<div id="preview" style="position:absolute;display:none;">
  <img src="" alt="" width="140" />
</div>

<script>
$('.fake-select li').on('mouseenter mousemove', function(e){
  var src = $(this).data('img');
  $('#preview img').attr('src', src);
  $('#preview').show().css({ left: e.pageX + 12, top: e.pageY + 12 });
}).on('mouseleave', function(){
  $('#preview').hide();
}).on('focus', function(){
  var ofs = $(this).offset(), src = $(this).data('img');
  $('#preview img').attr('src', src).show().css({ left: ofs.left + $(this).outerWidth() + 6, top: ofs.top });
}).on('blur', function(){ $('#preview').hide(); });
</script>

Notes and cautions: add keyboard focus handling and ARIA for accessibility; provide a touch-friendly fallback (tap to preview) since hover doesn't exist on many mobile devices; preload images or lazy-load to prevent flicker; avoid huge previews for large lists. For small projects the custom-list pattern is simplest; for production features consider a tested plugin (see jQuery UI selectmenu docs) and jQuery event helpers for robust mouse/keyboard handling (jQuery API).

Recommended Answers

All 2 Replies

Member Avatar for ko ko

This is PHP forum. You question rather like Javascript. Move to Javascript forum.

Member Avatar for Member #120589

You already posted about this once: http://www.daniweb.com/web-development/php/threads/369402

We replied, but you didn't come back. Opening another thread about this, especially in the wrong forum AGAIN is just bad.

Good luck. Hope somebody else can help you.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.