PHP/AJAX: Change a value in database(mysql) when image clicked

Question

I'm currently working on a project which is nearly done, but there's one more problem to fix, and it is pretty crucial.

What i am trying to do is change a value (activeID) in my database when i click a certain image.

I know i'm gonna need php as well as javascript, but my javascript-skills aren't really good, if anyone could help me out, that would be amazing!

To help you guys understand, here the structure of the table in database:

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

CREATE TABLE IF NOT EXISTS `artikel` (
  `Titel` varchar(100) CHARACTER SET utf8 NOT NULL,
  `ArtikelID` int(255) NOT NULL,
  `content` text CHARACTER SET utf8 NOT NULL,
  `imagepath` varchar(255) CHARACTER SET utf8 NOT NULL,
  `activeID` int(11) NOT NULL,
  `thumbpath` varchar(255) CHARACTER SET utf8 NOT NULL,
  `shortcontent` text CHARACTER SET utf8 NOT NULL,
  `categorie` varchar(10) CHARACTER SET utf8 NOT NULL,
  PRIMARY KEY (`ArtikelID`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

INSERT INTO `artikel` (`Titel`, `ArtikelID`, `content`, `imagepath`, `activeID`, `thumbpath`, `shortcontent`, `categorie`) VALUES
('Zware hinder op E313 door dodelijk ongeval in Geel', 1, 'Het ongeval gebeurde rond 12 uur. Er had zich een file gevormd doordat de afrit Geel-West is afgesloten wegens werken.', 'images/bin1.jpg', 0, 'images/bin1thumb.jpg', 'Op de E313 richting Antwerpen is vandaag ter hoogte van de afrit Geel-West.', 'bin'),
('België geeft 12 miljoen voor heropbouw Afghanistan na 2014', 2, 'Eind 2014 trekt de NAVO zich terug uit Afghanistan. De militairen dragen dan de verantwoordelijkheid voor de veiligheid definitief over aan de Afghaanse veiligheidstroepen.', 'images/bin2.jpg', 0, 'images/bin2thumb.jpg', 'Na de terugtrekking van de Belgische militairen uit Afghanistan eind 2014 zal België voor maximaal 12 miljoen euro bijdragen aan de heropbouw van het land.', 'bin'),
('Oppositie hekelt gebrek aan visie en groei in debat begrotingscontrole', 3, 'De controle was nodig omdat de regering bij de initiële begroting 2012 uitgegaan was van een economische groei van 0,8% van het bbp, terwijl dat cijfer in de economische begroting van februari teruggebracht werd 0,1%.', 'images/bin3.jpg', 0, 'images/bin3thumb.jpg', 'De plenaire Kamer buigt zich vandaag over de begrotingscontrole die het begrotingstekort voor 2012 moet beperken tot 2,8 procent van het bbp, overeenkomstig het stabiliteitsprogramma. Daarvoor was een inspanning van 1,8 miljard euro nodig.', 'bin')

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Here is the connection i use for the database:

<?php 

        session_start();
        
        $sHost = "localhost";
        $sUser = "root";
        $sPassword = "";
        $sDatabase = "project";
        
        $link = mysqli_connect($sHost, $sUser, $sPassword, $sDatabase) or die("MySQL Error: " . mysqli_error());  
        
?>

Here is the php and html code i have to get the content out of the database, notice that there is an image being called through a path for each record (only the first select statement you see is relevant to this topic because i have cut the rest of the HTMLcode out to keep the topic short):

        <?php
                
                //session_start();
                
                //include("classes/connection.php");
                include_once("classes/connection.php");
                
                $getBinnenland = mysqli_query($link,"SELECT * FROM artikel WHERE categorie = 'bin';");
                //$getBuitenland = mysqli_query($link,"SELECT * FROM artikel WHERE categorie = 'bui';");
                //$getSport = mysqli_query($link,"SELECT * FROM artikel WHERE categorie = 'spo';");
                //$getPolitiek = mysqli_query($link,"SELECT * FROM artikel WHERE categorie = 'pol';");
                //$getMilieu= mysqli_query($link,"SELECT * FROM artikel WHERE categorie = 'mil';");
                //$getBizar = mysqli_query($link,"SELECT * FROM artikel WHERE categorie = 'biz';");
                
                ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <title>Digital Press overview</title>
                <link rel="stylesheet" href="style.css" type="text/css" />
            </head>
            
            <body>
                
                <div id="wrapper">
        <ul id="Binnenland">            
                    <?php
                    if(mysqli_num_rows($getBinnenland) > 0)
                    {       
                        while($Binnenland = mysqli_fetch_assoc($getBinnenland))
                        {
                            echo "<li><a href='#'><h3>".$Binnenland['Titel']."</h3><img src='". $Binnenland['thumbpath'] ."' alt='thumbnail'/></a><p>".$Binnenland['shortcontent']. "</p>";
                            
                        }
                    }
                    else
                    {
                        echo "<li>Nog geen designs</li>";   
                    }
                    
                    ?>
        </ul>
</div>
</body>

SO NOW FOR THE QUESTION: If i click a certain image, i want it to change the activeID of that record into 1 instead of 0, and if i click it again i want it to change back to 0

I don't have a clue on how to start this, so any help would be most welcome, Thank you in advance to all who will help me with this! Greetings

EDIT

i have implemented the code from the answer below, get no errors, but database does not change activeID either. anyone know what i can do to fix this?

The onclick event:

echo "<li><a href='#'><h3>".$Binnenland['Titel']."</h3><img onClick = 'javascript: setActive();' src='". $Binnenland['thumbpath'] ."' alt='thumbnail'/></a><p>".$Binnenland['shortcontent']. "</p>";

the javascript:

 <script type="text/javascript">
function setActive()
{
if (window.XMLHttpRequest)
   {
   xmlhttp=new XMLHttpRequest();
   }
 else
   {
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   } 
 xmlhttp.onreadystatechange=function()
   {
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {
         //Return Value. Handle as you wish. Display or ignore.
         var x = xmlhttp.responseText;
     }
   }
 xmlhttp.open("POST","setActive.php",true);
 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 xmlhttp.send(p_str);
  }
</script>

The setActive.php file:

<?php            

    session_start();           

    $sHost = "localhost";           
    $sUser = "root";           
    $sPassword = "";           
    $sDatabase = "project";           

    $link = mysqli_connect($sHost, $sUser, $sPassword, $sDatabase) or die("MySQL Error: " . mysqli_error());             

     $res = mysqli_fetch_row(mysqli_query($link,"select activeID from artikel"));
     $active = $res[activeID];
     $activeID = ($active == 0) ? 1 : 0; 
     $res = mysqli_query($link,"update artikel set activeID = $activeID");
     if ($res) echo "Success, ActiveID = $activeID";
          else echo "Failure, unable to update ActiveID to $activeID";
?>           

Answer 1

HERE IS Artikel.php . LATEST POST 12:40 PST

<?
mysql_connect("xxxxxxxxxxx", "xxxxxxxxxx", "xxxxxxxxx");  
mysql_select_db("xxxxxxxx");  

$res = mysql_query("select * from artikel");  
$fcount = mysql_fetch_assoc(mysql_query("select count(*) as count from artikel"));  

while ($Binnenland =  mysql_fetch_assoc($res)) { 
    $jS = '"'.$Binnenland[ArtikelID].'"'; 
    echo "<font size=2 face='Century Gothic'><center><li><b>ARTICLE ID: ".$Binnenland['ArtikelID']."</b><br><font size=2><a href='#'><h3>".$Binnenland['Titel']."</h3><a href='javascript:setActive(".$jS.")'> <img src='$Binnenland[thumbpath]' width=75 style='border: 0px; -moz-border-radius: 8px; border-radius: 8px' alt='thumbnail'></a><p>".$Binnenland['shortcontent']. "</p></center>"; 
    echo "<span style='color: black;' id='".$Binnenland[ArtikelID]."'><center><font face='Century Gothic'>ActiveID: ".$Binnenland[activeID]."</font></center><br><br><hr></span>";
} 

?> 

<script type="text/javascript">  

function setActive(ObjID)  {  

if (window.XMLHttpRequest)  {  
    xmlhttp=new XMLHttpRequest();  
}  
else  
{  
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  
}   

xmlhttp.onreadystatechange=function()   {  

if (xmlhttp.readyState==4 && xmlhttp.status==200)  
      {  

        //Return Value. Handle as you wish. Display or ignore.  
        var x = xmlhttp.responseText; 

        if (document.getElementById(ObjID).style.color == 'black') document.getElementById(ObjID).style.color='red';
                else document.getElementById(ObjID).style.color='black';

        document.getElementById(ObjID).innerHTML = '<center><font face="Century Gothic">ActiveID: ' + x + '</font></center><br><br><hr>'; 
      }  
}  
    var p_str = "a="+ObjID; 
    xmlhttp.open("POST","setActive.php",true);  
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
    xmlhttp.send(p_str);  
}  

</script> 

AND HERE IS setActive.php

<?php              

mysql_connect("xxxxx", "xxxxx", "xxxxxx");  
mysql_select_db("xxxxx"); 
$ArtikelID = $_REQUEST[a]; 

$res = mysql_query("select activeID from artikel where ArtikelID = ".$ArtikelID);  
$row = mysql_fetch_assoc($res); 

$active = $row[activeID];  
$activeID = ($active == 0) ? 1 : 0;   
$res = mysql_query("update artikel set activeID = $activeID  where ArtikelID = ".$ArtikelID);  

if ($res) echo $activeID;  
       else echo "Failure, unable to update ActiveID to $activeID";  
?>