How to change a Div background url which is inside a <a> tag? : I have 6 div tags with background images, inside a <a> tags. What I want to do is highlight or change the relevant background image of the div tag once clicked it.

<td><a href="../pages/index.php"><div id="dashboardDiv" style="background:url(../images/home.png) no-repeat center";)></div></a></td>
<td></td>

<td><a href="../pages/suppliers.php"><div id="suppliersDiv" style="background:url(../images/Suppliers.png) no-repeat center";)></div></a></td>
<td></td>

<td><a href="../pages/customers.php"><div id="customersDiv" style="background:url(../images/customers.png) no-repeat center";)></div></a>
</td>
<td></td>

<td><a href="../pages/purchases.php"><div id="purchasesDiv" style="background:url(../images/Purchases.png) no-repeat center";)></div></a>
</td>
<td></td>

<td><a href="../pages/sales.php">
<div id="salesDiv" style="background:url(../images/Sales.png) no-repeat center";)></div></a></td>
<td></td>

<td><a href="../pages/inventory.php"><div id="inventoryDiv" style="background:url(../images/Inventory.png) no-repeat center";)></div></a></td>
<td></td>


<td><a href="../pages/reports.php"><div id="reportsDiv" style="background:url(../images/Reports.png) no-repeat center";)></div></a></td>
<td></td>

</tr>

        CSS:
    
    #dashboardDiv{
    	border:thin;
    	float:left;
    	height: 133px;
    	width: 133px;
    		}		
    		