Input type="image" ONCLICK

[hantz]

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

[Master_script_maker]

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

[hantz]

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

[jackbenimble4]

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

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.