First of all, I am new to JS as a language itself, so this question may be really simple to answer, but my research has come to no avail.
Problem: I have a web page. This web page has multiple pictures. When the user places his mouse over the image and clicks (left or right click), another function is called.
What mouse event do I use to do this effectively and efficiently? I was thinking "mouseOver" or "mouseMove", but I'm not sure which one would work.
PseudoCode:
Function Mouse_LeftClick() {
if (mouseOverPicture()) { do something;}
}
Function Mouse_RightClick() {
if (mouseOverPicture()) { do something else;}
}
How exactly do I check if a mouse is over a picture at a click or not?
Well in order to click an image, you might need to move your cursor on the image first. I hope my logic here is right. If you agree, you just need to use onClick event.
Or if you need to trigger an event as soon as you move the cursor on any part of the image, your best bet is onmouseover as Kor already suggested.
This script shows (with images files for Firefox) how too determine the target of a click on the page... It's not a good idea too change the right click.
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="fr"><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="generator" content="PSPad editor, www.pspad.com"><title>Untitled</title><style type="text/css"></style><script type="text/javascript">
function clc(e){var t=e?f.target:f.srcElement;
alert("HTML element "+t.tagName+"\nImage src "+t.src+"\nImgage alt "+t.alt);
}
document.onclick=clc;
</script></head><body><img src="image1.gif" alt="image n°1"><img src="image2.gif" alt="image n°2"><img src="image3.gif" alt="image n°3"></body></html>
Help: What mouse event function should I use?
Reply With Quote
Bookmarks