www.webdeveloper.com
Results 1 to 4 of 4

Thread: Help: What mouse event function should I use?

  1. #1
    Join Date
    Sep 2011
    Posts
    1

    Question Help: What mouse event function should I use?

    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?

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428

  3. #3
    Join Date
    Sep 2009
    Posts
    159
    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.

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,268
    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 n1">
    <img src="image2.gif" alt="image n2">
    <img src="image3.gif" alt="image n3">
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles