0

I have <map> which contains an image of different districts. I need to change the background color for different hotspots while loading the page. Background color information is stored in a SQL Server table. While loading the page, I retrieved the color and stored it in list. Using JavaScript, I need to change the background color of a particular <area> element.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Indicator_Color_Map.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <%--<style>
    area
    {
        background-color:Red;
    }
    </style>--%>
    <script type="text/javascript">
        function setColor() {
            document.getElementById("area1").style.background-color = "green";
        }
    </script>
</head>
<body onload="setColor()">
    <form id="form1" runat="server" >
    <div>
    <img src="jammu.jpg" alt="Planets" usemap="#planetmap" style="height: 434px; width: 369px">
    <map  id="map1" name="planetmap">   
  <area shape="rect" coords="0,0,82,126" href="" alt="Sun" id="area1"  >
  <area shape="circle" coords="90,58,3" href="" alt="Mercury" id="2">
  <area shape="circle" coords="124,58,8" href="" alt="Venus" id="3">
</map>
    </div>
    </form>
</body>
</html>

I tried with ImageMap control, but I can't apply the style for different coordinates.

Would any other third party control be helpful?

TylerH
  • 20,799
  • 66
  • 75
  • 101
geetha samynathan
  • 1

1 Answers1

0

Use style.backgroundColor instead style.background-color

document.getElementById("area1").style.backgroundColor = "green";
Pavan Teja
  • 3,192
  • 1
  • 15
  • 22