Member Avatar for sweet.virat

Hey i want navigation menu with image ... It means that if in my manu there is 3 button home,serviceses,about us than when onmouseover on that text it shows images which i choose..this type of implemntation done by me.. But when images change there is no effect ... And i dont have brif knowlde about jquary so please help me regarding this.. And for more brief information here is my html file download and fix this problem...

https://drive.google.com/file/d/0B6V-9RLYdFzeVUVQdzJyNnd1MEk/edit?usp=sharing

  • 2 Contributors
  • 2 Replies
  • 288 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by sweet.virat

Dani AI

Generated

A reliable, simple pattern for a hover image-preview with a smooth transition is to keep one preview container with two stacked <img> elements and cross-fade between them on mouseenter/focus. This avoids the flash that happens when replacing a single image source, supports keyboard focus, and is easy to debug inline (as suggested). The example below uses a data attribute on each menu item to hold the image path, preloads images, and swaps the two images with jQuery fade animations.

HTML/CSS (minimal structure):

<ul class="menu">
  <li data-img="images/home.jpg"><a href="#">Home</a></li>
  <li data-img="images/services.jpg"><a href="#">Services</a></li>
  <li data-img="images/about.jpg"><a href="#">About</a></li>
</ul>

<div id="preview" aria-hidden="true">
  <img class="front" src="images/default.jpg" alt="">
  <img class="back" src="" alt="">
</div>
#preview { position:relative; width:400px; height:250px; overflow:hidden; }
#preview img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; display:block; }
#preview img.back { display:none; }

jQuery cross-fade logic (straightforward, easy to read):

$(function(){
  var $preview = $('#preview');
  var $front = $preview.find('img.front');
  var $back  = $preview.find('img.back');

  // preload images
  $('.menu li').each(function(){ var s = $(this).data('img'); if(s) (new Image()).src = s; });

  // hover / keyboard support
  $('.menu').on('mouseenter focusin', 'li', function(){
    var src = $(this).data('img');
    if(!src || $front.attr('src') === src) return;
    $back.stop(true,true).attr('src', src).fadeIn(300);
    $front.stop(true,true).fadeOut(300, function(){
      var tmp = $front; $front = $back; $back = tmp; // swap roles
    });
  }).on('mouseleave focusout', 'li', function(){
    // optional: revert to default or keep last image
  });
});

Common causes of "no effect" or flicker: missing/preload failures, incorrect image paths (404 in console), very short animation times, or mouse movement leaving the source element and triggering rapid toggles. For touch devices, replace hover with tap behavior. Keep images appropriately sized for performance and use a small debounce if rapid pointer movement is an issue. If the original project is attached as an archive (as did), posting the minimal HTML/CSS/JS inline makes it faster for others to reproduce and suggest precise fixes.

Recommended Answers

All 2 Replies

Member Avatar for pritaeas

Can you post your code here?

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.