Advanced Search

Results 1 to 4 of 4

Thread: Input type="image" ONCLICK

  1. #1
    Join Date
    Sep 2007
    Posts
    58
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Input type="image" ONCLICK

    how can i make js place a point on the area the user checked?

    that is an exmple for getting the cordinations, my code will have only a plain image where i want the user will pick a location and after submiting th cordinations will be posted.

    http://stephane.moriaux.pagesperso-...ruc/coord_carte

    *the image wont be the submit button.
    the user will click on the image and some Point\X will apear on the cordination he choose...
    THAT is the part i cannot solve by myself

  2. #2
    Join Date
    Jun 2007
    Posts
    543
    Thanks
    3
    Thanked 78 Times in 78 Posts
    Blog Entries
    1

    Default

    not sure if there is an "input type='image'" but i think you want to know where the user clicked on an image, right? so check this out: http://w3schools.com/tags/tag_map.asp and http://w3schools.com/htmldom/prop_img_usemap.asp
    [Jasme Library (Javascript Motion Effects)] My Site
    /\/\@ /\/\@|{
    There are 10 kinds of people in the world, those that understand binary and those that don't.

  3. #3
    Join Date
    Sep 2007
    Posts
    58
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default nope

    i plan to show image of map and user will click on some exact point and there will be automaticaly a red pixel or a char on that exact point...

    after wards after the user will fill the text form he will submit the form

  4. #4
    Join Date
    Aug 2007
    Location
    Ohio
    Posts
    79
    Thanks
    0
    Thanked 15 Times in 15 Posts

    Default

    I cannot write your script for you but you might find this snippet helpful:

    Code:
    var MouseCoordinates = {
        
        init: function() {
            //Core.addEventListener(getId('gamercardBg'), 'mouseover', MouseCoordinates.mouseOverListener);
            if(getId('gamercardBg')) {
                Core.addEventListener(getId('gamercardBg'), 'mouseout', MouseCoordinates.mouseOutListener);
            
                Core.addEventListener(getId('gamercardBg'), 'mousemove', MouseCoordinates.mouseMoveListener);
                
                Core.addEventListener(getId('gamercardBg'), 'click', MouseCoordinates.saveCurrent);
                
                // add custom prop to coordinates
                getId('coords')._saved = false;
            }
        },
        
        saveCurrent: function(event) {
            var coords = getId("coords");
            if(Core.hasClass(coords,'saved')) {
                Core.removeClass(coords,'saved');
                coords._saved = false;
            } else {
                Core.addClass(coords,'saved');
                coords._saved = true;
            }
        },
        
        mouseOutListener: function(event) {
            if(getId('coords')._saved == true) {
                return;
            }
            getId("coords-x").removeChild(getId("coords-x").firstChild);
            var txt = document.createTextNode("--");
            getId("coords-x").appendChild(txt);
    
            getId("coords-y").removeChild(getId("coords-y").firstChild);
            var txt = document.createTextNode("--");
            getId("coords-y").appendChild(txt);
        },
        
        mouseMoveListener: function(event) {
            if(getId('coords')._saved == true) {
                return;
            }
            /*var x = event.clientX - this.X;
            var y = event.clientY - this.Y;*/
            if(event.offsetX) {
                var x = event.offsetX;
                var y = event.offsetY;
            } else {
                var x = event.layerX;
                var y = event.layerY;
            }
            
            getId("coords-x").removeChild(getId("coords-x").firstChild);
            var xcord = document.createTextNode(x);
            getId("coords-x").appendChild(xcord);
            
            getId("coords-y").removeChild(getId("coords-y").firstChild);
            var ycord = document.createTextNode(y);
            getId("coords-y").appendChild(ycord);
        }
    }
    I wrote it for a project of mine. It uses a very basic library from the SitePoint book "Simply Javascript." You can probably modify it to use your own library or own code. The MouseCoordinates.init() is run when the window loads. The getId() function is simply an abbreviated document.getElementById(). The Core.whatever methods are all a part of the library. I would include the library but I don't know if it's allowed as it was sent with the book.

Bookmarks

Posting Permissions

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