0

So, my problem is the following: I made an imagemapster map of an image of teeth, and i want to select more than one tooth, and some bridges between teeth, and click a button, make some verifications, and if all good, save the chosen teeth and bridges in a mysql database.. The thing is, I don't know how to do it.. Im new to this, and I only know a bit of php and html... What is the easiest / simplest way of doing this? I read about AJAX but it seemed too complicated to be learning how to do it.. Also read about hidden forms? Tried it but didn't work, probably did something wrong.. This is the simple mapster script i have now..

    <script>
    $(document).ready(
        function ()
        {
            $('#img').mapster(
            {
                mapKey: 'tooth',
                fillColor: '118f3b',
                fillOpacity: 0.5,
                render_highlight:
                {
                    fillColor: '78e99d',
                    fillOpacity: 0.5
                },
            });
        }
    );
    </script>

EDIT: I tried this now, and it kind of worked.. It seems the current clicked map doesnt count, only on the second click is the first one saved.. e.g i click on 1 and 2, but only the 1 is shown.. i click 3 and 1 and 2 are shown.. like this problem here: ImageMapster (JavaScript)- "onClick" function wont work properly

    onClick: function(data)
    {
        var test = image.mapster('get');
        document.cookie = "cookie_with_info = " + test_var;
    }
Community
  • 1
  • 1
Decao
  • 1
  • 3

1 Answers1

0

I finally managed to solve my problem.. Maybe it's not the best solution, but it's working! So, after seeing this: http://www.outsharked.com/ImageMapster/examples/usa.html i saw the down part about showing the selected area and checked the code and got to this answer, this is my basic script:

<script>
var image = $('#teeth_map');

$(document).ready(function ()
{
        image.mapster(
        {
            mapKey: 'tooth',
            fillColor: '118f3b',
            fillOpacity: 0.5,
            render_highlight:
            {
                fillColor: '78e99d',
                fillOpacity: 0.5
            },
        });

        function showTeeth(){
            $("#send_button").bind("click", function (e)
            {
                e.preventDefault();
                var test = image.mapster("get");
                document.cookie = "teeth_cookie = " + test;
            });
        }

        showTeeth();
});
</script>

$('#teeth_map') is the map i made of my image, $("#send_button") is the id of the send/save button, now, this script just saved the clicked areas into the cookie, now i need some php to read it:

<?php
if(isset($_COOKIE['teeth_cookie']))
{
    $cookie = $_COOKIE['teeth_cookie'];
    echo "The selected areas are: " . $cookie;
}
else
    echo "Text to show that there are no cookies!";
?>

now after all this, that now seems extremely simple but was hard to get (for me), the variable $cookie has the values of the selected areas of an image map..

Decao
  • 1
  • 3