5 seconden tellen
ik moet gaan tellen of de muis 5 seconden op een plaatje staat. wanneer ze nu op een plaatje staan, wordt er een script uitgevoerd, enkel moet daar nog even 5 seconden omheen. ik dacht zelf iets met time() + 5, maar dat werkt niet echt
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var image = document.getElementById('some-img');
var hover = false;
image.onmousover = function (e) {
hover = true;
setTimeout(function () {
if (hover) {
image.somethingFunny();
} else {
alert('wat een pech muis is al weg!');
}
}, 5000);
};
image.onmouseleave = function (e) {
hover = false;
};
var hover = false;
image.onmousover = function (e) {
hover = true;
setTimeout(function () {
if (hover) {
image.somethingFunny();
} else {
alert('wat een pech muis is al weg!');
}
}, 5000);
};
image.onmouseleave = function (e) {
hover = false;
};
image.onmouseover
Ik denk ook dat onmouseleave niet goed ondersteund wordt (laat me daar voorlopig onmouseout van maken).
-----
Wat ik vaak gebruik in dit soort situaties is cleartimeout.
bv. bij ook bij (jQuery-ui) autocomplete.
bv. zo:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<img id="some_img" src="http://www.phphulp.nl/includes/image.php?file=http://www.phphulp.nl/img/avatar/wouter-j-23590.png">
<script>
var image = document.getElementById('some_img');
var hover = false;
var timer;
image.onmouseover = function (e) {
hover = true;
timer = setTimeout(function () {
doSomething(image);
}, 5000);
};
image.onmouseout = function (e) {
clearTimeout(timer);
};
function doSomething(img) {
// laat ons als voorbeeld een rode border toevoegen
img.style.border = "1px solid #ff0000";
}
</script>
<script>
var image = document.getElementById('some_img');
var hover = false;
var timer;
image.onmouseover = function (e) {
hover = true;
timer = setTimeout(function () {
doSomething(image);
}, 5000);
};
image.onmouseout = function (e) {
clearTimeout(timer);
};
function doSomething(img) {
// laat ons als voorbeeld een rode border toevoegen
img.style.border = "1px solid #ff0000";
}
</script>
Gewijzigd op 27/06/2013 11:15:28 door Kris Peeters