Hi Ruksana,
I noticed it wasn’t displaying properly in firefox so had to tweak it a little, sorry about that I should have checked it before I posted the code, anyways here is a modified version which should work ok.
And with a function to show/hide the buttons.
<html>
<head>
<style type="text/css">
.cont{
width : 900px;
height : 302px;
}
.div1{
position : absolute;
}
.colourDoor{
position : absolute;
top : 88px;
left : 165px;
}
.colourPilaster{
position : absolute;
top : 10px;
left : 131px;
border : none;
}
.men{
display : none;
}
</style>
<script type="text/javascript">
function changeImage(id,img){
document.getElementById(id).src=img;
}
function showMenu(id){
var oid=id=="mPl"?"mDr":"mPl";
document.getElementById(id).style.display="block";
document.getElementById(oid).style.display="none";
}
</script>
</head>
<body>
<div class="cont">
<div class="div1">
<img id="img1" src="bathroom.jpg">
<img id="dr1" src="doors1.png" class="colourDoor">
<img id="pl1" src="pilasters1.png" class="colourPilaster" usemap="#map1">
</div>
</div>
<div id="mDr" class="men">
Change door colour:
<input type="button" onclick="changeImage('dr1','doors2.png')" value="blue">
<input type="button" onclick="changeImage('dr1','doors3.png')" value="red">
<input type="button" onclick="changeImage('dr1','doors1.png')" value="Clear">
</div>
<div id="mPl" class="men">
Change pilaster colour:
<input type="button" onclick="changeImage('pl1','pilasters2.png')" value="blue">
<input type="button" onclick="changeImage('pl1','pilasters3.png')" value="red">
<input type="button" onclick="changeImage('pl1','pilasters1.png')" value="Clear">
</div>
<map name="map1">
<area shape="poly" coords="3,6,2,271,33,267,32,9" href="javascript:showMenu('mPl')">
<area shape="poly" coords="144,7,144,250,197,244,197,7" href="javascript:showMenu('mPl')">
<area shape="poly" coords="290,4,292,229,335,225,335,4" href="javascript:showMenu('mPl')">
<area shape="poly" coords="417,2,417,208,435,208,435,1" href="javascript:showMenu('mPl')">
<area shape="poly" coords="38,264,139,252,139,10788,99,35,113" href="javascript:showMenu('mDr')">
<area shape="poly" coords="200,243,285,230,286,97,243,90,199,106" href="javascript:showMenu('mDr')">
<area shape="poly" coords="339,222,411,210,4112,87,376,79,337,91" href="javascript:showMenu('mDr')">
</map>
</body>
</html>