用html区域替换按钮

Newbie Alert !

I know I am missing something fundamental but I cannot work out what ... I have a page with html buttons in a form. The form method is "post" and each button is used to run one of a number of scripts which live on the host webserver and are called (if that is the word) by php ie included on the web page is php script like this:

<?php

$cmd = $_POST["action"];
if ($cmd=="snap")
{
    exec("sudo ./snap_web.sh");
}
?>

It works just fine but as an exercise, I wanted to substitute a single image for the array of buttons and have user clicks on specific parts of the image take the place of the separate html buttons. I know how to identify the parts of the image with "coords" but I cannot work out how to pass a click on those areas on to the PHP script in the way that the html button does. As I "just" want to substitute one html element for another, I am hoping that the answer is simple, but if I have to get into js or other things, so be it ! Many Thanks for any assistance.

I would do it with jQuery $.post()

The PHP code would be placed into a file on its own. (process.php) for example.

<form action="" method="get">
    <img src="someImage.png" onclick="calcCoords()">
</form>


<script>
function calcCoords(){
    /**
     *     Here you get the action via to coords however you are currently doing it.
     */
    var action = 'someAction';
    $.post( "process.php", { action: action } function( data ) {
        $( ".result" ).html( data );
    });
}
</script>

However, if you wanted the form to submit, without ajax, maybe use javascript to force a $_GET submit?

<form action="" method="get">
    <img src="someImage.png" onclick="calcCoords()">
</form>


<script>
function calcCoords(){
    /**
     *     Here you get the action via to coords however you are currently doing it.
     */
    var action = 'someAction';
    window.location = window.location + '?action=' + action;
}
</script>

Just change your PHP slightly

<?php
$cmd = isset($_GET["action"]) ? $_GET["action"] : null;
if ($cmd=="snap")
{
    exec("sudo ./snap_web.sh");
}
?>