Member Avatar for coollife

http://www.braiform.com/Menu-Two/Hanger-Catalogue/?id=29

check the above website . on mouse over of any image a pop up appears and displays the image information i want to achieve the same thing in my project

Please tell me which language is used for this purpose and how to do that.

  • 2 Contributors
  • 4 Replies
  • 269 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by coollife

Dani AI

Generated

wanted the same hover pop-up shown on the linked site; ’s snippet is a good start because it creates a floating preview, but it only re-displays the image and doesn’t include descriptive text. A cleaner, more robust pattern is to store the caption (and an optional higher‑res image) on each thumbnail with data attributes, create one reusable floating popup element, and populate + position it on pointer/focus events. That keeps DOM churn low, works better on keyboard and touch, and avoids enlarging tiny thumbnails (use a data-large URL for a crisp preview).

Example (compact, modern approach — HTML, CSS, JS):

<!-- HTML: mark thumbnails with data attributes -->
<img src="thumb.jpg" alt="Metal hanger" class="has-popup"
     data-large="hanger-large.jpg"
     data-caption="Hanger, model 29 — metal, pack of 10">

<!-- CSS: simple styling for the floating popup -->
<style>
.image-popup {
  position: fixed;
  z-index: 9999;
  max-width: 320px;
  background: #fff;
  border: 1px solid #ccc;
  padding: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  border-radius: 4px;
  display: none;
  pointer-events: none;
}
.image-popup img { max-width: 100%; display: block; }
.image-popup .caption { font-size: 12px; color: #333; margin-top: 6px; }
</style>

<!-- JS: create one popup, populate on pointer events and keyboard focus -->
<script>
(function(){
  const popup = document.createElement('div');
  popup.className = 'image-popup';
  popup.setAttribute('role','tooltip');
  popup.innerHTML = '<img alt=""><div class="caption"></div>';
  const pImg = popup.querySelector('img');
  const pCap = popup.querySelector('.caption');
  document.body.appendChild(popup);

  let active = null;
  function place(e){
    const pad = 12;
    let x = (e.pageX || (e.target.getBoundingClientRect().right + window.pageXOffset)) + pad;
    let y = (e.pageY || (e.target.getBoundingClientRect().top + window.pageYOffset)) + pad;
    popup.style.left = x + 'px';
    popup.style.top = y + 'px';
    const r = popup.getBoundingClientRect();
    if(r.right > window.innerWidth) popup.style.left = (window.pageXOffset + window.innerWidth - r.width - pad) + 'px';
    if(r.bottom > window.innerHeight) popup.style.top = (window.pageYOffset + window.innerHeight - r.height - pad) + 'px';
  }

  document.addEventListener('pointerover', e => {
    const img = e.target.closest('img.has-popup'); if(!img) return;
    active = img;
    pImg.src = img.dataset.large || img.src;
    pImg.alt = img.alt || '';
    pCap.textContent = img.dataset.caption || img.alt || img.title || '';
    popup.style.display = 'block';
    place(e);
  });

  document.addEventListener('pointermove', e => { if(active) place(e); });

  document.addEventListener('pointerout', e => {
    if(!active) return;
    if(e.relatedTarget && (e.relatedTarget === popup || popup.contains(e.relatedTarget))) return;
    popup.style.display = 'none'; active = null;
  });

  // keyboard support
  document.addEventListener('focusin', e => {
    const img = e.target.closest('img.has-popup'); if(!img) return;
    active = img;
    pImg.src = img.dataset.large || img.src;
    pCap.textContent = img.dataset.caption || img.alt || img.title || '';
    popup.style.display = 'block';
    const rect = img.getBoundingClientRect();
    popup.style.left = (rect.right + 8 + window.pageXOffset) + 'px';
    popup.style.top = (rect.top + window.pageYOffset) + 'px';
  });
  document.addEventListener('focusout', () => { popup.style.display = 'none'; active = null; });
})();
</script>

Notes and tips: use data-large for a real preview image (don’t just scale the thumbnail). For touch devices, replace hover with a tap-to-toggle or provide a dedicated info button because hover doesn’t exist there. Keep role="tooltip" and provide focus handlers for keyboard users. Preload large images to reduce flicker, and adjust placement logic near viewport edges. This approach extends ’s idea without repeatedly inserting HTML, and it directly supplies the descriptive text that requested.

Member Avatar for latha m n 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>lance</title>
</head>
<body>
<script type="text/javascript">        
function show(_this) 
{
    document.getElementById("enlarge_images").innerHTML = "<img src='" + _this.src + "'+'width=416 height=188' >";
}
function hide(_this) 
{
    document.getElementById("enlarge_images").innerHTML = "";
}
function move_layer(event)
{
 event = event || window.event;
 enlarge_images.style.left=event.clientX+document.body.scrollLeft+10;
 enlarge_images.style.top=event.clientY+document.body.scrollTop+10;
}
document.onmousemove = move_layer;
</script>
    <form id="form2" runat="server">
        <div align="center" style="overfow: hidden; width: 100px; height: 100px">

            <img src="image/gdse.gif" width="208" height="70" border="2" onmouseover="show(this)" onmouseout="hide(this)" />

        </div>
        <div id="enlarge_images" style="position: absolute; z-index:2"></div>
    </form>
</body>
</html>
Edited by Reverend Jim because: Fixed formatting
Member Avatar for latha m n

Use this code it wil help you to solve your Problem

Member Avatar for coollife

madam did u checked the link of the website i have given.

Will ur code displays the information regarding the image in another small window

Member Avatar for coollife

Madam what the code is doing is just displaying the image on mouse over the image, i mean its not displaying anything just showing the image again . please help me in displaying some text in the pop up image . Thank u

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.