CODEWITHSUNDEEP
javascriptjqueryeventsmouseover
NVG
NVG

Reputation: 3343

JavaScript/jQuery onmouseover problem

I want that when mouse is over an image, an event should be triggered ONCE, and it should be triggered again only after mouse is out of that image and back again, and also at least 2 seconds passed. My current function is called continuously (refreshcash) if I leave the mouse over my image

<img src="images/reficon.png" onmouseover="refreshcash()" onmouseout="normalimg()" id="cashrefresh"/>

function refreshcash() {
 $("#showname").load('./includes/do_name.inc.php');
 $("#cashrefresh").attr("src","images/reficonani.gif");
}

function normalimg() {
 $("#cashrefresh").attr("src","images/reficon.png");
}

code update This code seems to have a bug,but the algorithm is kinda logical

<script type="text/javascript">
var canhover = 1;
var timeok = 1;
function redotimeok() {
    timeok = 1;
}
//
function onmenter()
{
if (canhover == 1 && timeok == 1) 
    {
  enter();
  canhover = 0;
    }
}
//
function onmleave()
{
  leave();
  canhover = 1;
  setTimeout(redotimeok(), 2000);
  leave();
}
//
$('#cashrefresh').hover(onmenter(),onmleave());

function enter(){
  $("#showname").load('./includes/do_name.inc.php');
  $("#cashrefresh").attr("src","images/reficonani.gif");
}

function leave(){
  $("#cashrefresh").attr("src","images/reficon.png");
}
</script>

Upvotes: 2

Views: 680

Answers (2)

Energiequant
Energiequant

Reputation: 889

Do you have the images cached in some way? If you replace them by their src attribute without specifying width/height elsewhere (best would be CSS) or having them readily available then the hovered box (img element) will collapse into a smaller (or no) box until the image has been loaded far enough for the browser to know the correct dimensions of the image to resize the box (which may affect other elements being adjusted to the image). The exact effect depends on the browser but you may lose the hover state causing the call of your mouseout function.

I assume that both images are the same size, so if you didn't already, you could try adding the dimensions to your CSS for #cashrefresh and see if that fixes the problem.

For the delay I would recommend using the jQuery timers plugin (or a similar one) which eases handling of timers compared to doing it on your own. You would probably want to give your timers names and try to stop older ones before you add the next one.

Upvotes: 1

Sarfraz
Sarfraz

Reputation: 382879

Try the hover:

$('#cashrefresh').hover(function(){
  $("#showname").load('./includes/do_name.inc.php');
  $("#cashrefresh").attr("src","images/reficonani.gif");
}, function(){
  $("#cashrefresh").attr("src","images/reficon.png");
});

And your image should look like:

<img src="images/reficon.png" id="cashrefresh"/>

Update:

Modify your code like this:

var e = null;
var l = null;

$('#cashrefresh').hover(function(){
  e = setTimeout(enter, 2000)
}, function(){
  l = setTimeout(leave, 2000)
});

function enter(){
  $("#showname").load('./includes/do_name.inc.php');
  $("#cashrefresh").attr("src","images/reficonani.gif");
  clearTimeout(e);
}

function leave(){
  $("#cashrefresh").attr("src","images/reficon.png");
  clearTimeout(l);
}

Upvotes: 2

Related Questions