Question

I want to set time on mouse-over function in JavaScript.

My code is as follow.

<img class="product-image" 
  src='<?php echo $item['0']; ?>' 
  onmouseover="this.src='<?php echo $item2['0']; ?>'" 
  onmouseout="this.src='<?php echo $item['0']; ?>'" />.

This code is working properly but I want to set time when images replaces on mouse-over event.

Answer 1

You can create this JavaScript function to change the image only after t msec.

function delayedImage(obj, src, t)
{
  setTimeout(function() {
    obj.src = src;
  }, t);
}

Then use this HTML:

<img class="product-image" 
  src='<?php echo $item['0']; ?>' 
  onmouseover="delayedImage(this, '<?php echo $item2['0']; ?>', 2000)" 
  onmouseout="delayedImage(this, '<?php echo $item['0']; ?>', 2000)" />

Maybe you don’t need it on the mouseout though, but that’s easy enough to change 🙂