Change background color of HTML <area> element

Question

I have an image with more than 100 geometrical shapes with different size and dimensions. I used image mapping over it and assign ID to each <area> like <area id="1">. I stored records in MySQL db about each shape like:

--------------------
box_id | color_code
--------------------
   1      #AEEE11
   2      #AEEE01
   3      #DEEF11
   4      #0EE001
--------------------

Now I want to set background-color for each area with respect to their IDs.

Here I paste HTML code for some area as whole page will increase my post:

<img src="images/map.gif" border="0" usemap="#Msj_Map" alt="map" class="map" />
<map name="Msj_Map" id="Msj_Map">   
    <area id="8" shape="poly" coords="436,141,486,141,486,207,436,206" />
    <area id="1" shape="poly" coords="163,148,163,170,159,170" />
    <area id="2" shape="poly" coords="163,207,153,207,159,173,163,173" />
    <area id="189" shape="poly" coords="198,281,199,307,161,307,161,282" />
    <area id="190" shape="poly" coords="198,309,199,333,161,334,161,309" />
    <area id="165" shape="poly" coords="540,230,570,230,577,236,577,271,540,271" />
    <area id="40" shape="poly" coords="384,1156,419,1156,419,1180,383,1180" />
    <area id="39" shape="poly" coords="422,1156,458,1156,458,1180,422,1181" />
    <area id="54" shape="poly" coords="321,1109,353,1109,359,1116,360,1159,321,1159" />
    <area id="29" shape="poly" coords="356,1235,387,1235,387,1274,356,1274" />
    <area id="22" shape="poly" coords="390,1277,457,1277,457,1311,453,1315,390,1315" />
    <area id="23" shape="poly" coords="321,1277,387,1277,387,1315,321,1315" />
    <area id="24" shape="poly" coords="319,1277,319,1316,252,1316,252,1277" />
</map>

I also tried:

<area id="1" shape="poly" coords="604,140,657,140,677,160,677,234,605,234" style="background-color:#00FFEE;" />

but not work... :(

Answer 1

I think you should use a jquery imagemap plugin ... this is my favorite

Link : http://archive.plugins.jquery.com/project/maphilight

Demo : http://davidlynch.org/projects/maphilight/docs/demo_usa.html

This topic has also been discussed in detail here .....

Using JQuery hover with HTML image map

I don't think there is need for duplication

============= Update on your comments ===================

Go to https://github.com/kemayo/maphilight/blob/master/jquery.maphilight.js

Can you see the following that maphilight accept fillColor: '000000' ;

You need to change fillOpacity to 1.0 to remove opacity

All you need to do is make with work without mouse over by editing the code below and replace with yours

        $(map).trigger('alwaysOn.maphilight').find('area[coords]')
            .bind('mouseover.maphilight', mouseover)
            .bind('mouseout.maphilight', function(e) { clear_canvas(canvas); });;

You have a working Background Color version ...

Thanks :)

Answer 2

The area element just makes part of an image clickable. It does not affect rendering, and setting background properties on it probably has no effect.

The background would matter if the image contains transparent areas. In such a case, you could overlay (with CSS positioning) the image with another image of the same dimensions and containing the desired colors; this image would of course have a lower z-index value. But it would be simpler to put the backgrounds into the image directly (unless you wish to use different backgrounds in different situations).

Answer 3

As Baba already said, you can trick area background highlighting with maphilight script.

Checkout an example here:

davidlynch.org/projects/maphilight/docs/demo_features.html

Background will highlight somehow like this:

<script>
jQuery(document).ready(function() {
     var data = $('#s1').mouseout().data('maphilight') || {};
     data.alwaysOn = !data.alwaysOn;
     $('#s1').data('maphilight', data).trigger('alwaysOn.maphilight');
});
</script>

<img src="aaaa.jpg" usemap="#myMap" width="927" height="1106" />
    <map name="myMap" id="myMap">
        <area shape="rect" coords="219,800,314,819" id="s1" class="{fill:true,fillColor:'cd3333',fillOpacity:0.4,stroke:true,strokeColor:'003333',strokeOpacity:0.8,strokeWidth:1}" />
    </map>

Answer 4

Since you have a bunch of areas with id's corresponding to your tables, the only thing you really need to do is to create the CSS markup for each of those IDs. What you want to do is loop through your mysql table and "echo" the CSS markup somewhere between your head tags.

1) Establish MySQL connection

2) Create your select statement and initiate the while loop

3) echo your css code.

<html>
<head>
<style type="text/css">
<?php
mysql_connect("localhost", "username", "password") or die(mysql_error());
mysql_select_db("database") or die(mysql_error());
$result="SELECT `box_id`,`color_code` FROM `tablename`";
while ($row=mysql_fetch_assoc($result)) {
    echo "#{$row['box_id']}\{background-color: {$row['color_code']}\}";
} mysql_close();
?>
</style>
</head>
<body></body>
</html>