Rollover highlighting with CSS image map?

[conpassionate]

I'm working on a project to create an interactive organizational chart, and decided that a CSS rollover image would be the best way to accomplish this. Below is the relevant bit of code with the first three links in place:

<style type="text/css">
	.map_image { display: block; width: 675px; height: 2798px; position: relative; background-position: 0 0; background-repeat: no-repeat; }
	.map_image .map_link { display: block; position: absolute; text-indent: -999em; overflow: hidden; }
	.map_image #map_link_0 { width: 179px; height: 86px; top: 226px; left: 5px; }
	.map_image #map_link_1 { width: 238px; height: 86px; top: 226px; left: 219px; }
	.map_image #map_link_2 { width: 178px; height: 86px; top: 227px; left: 490px; }
</style>
<div class="map_image" style="background-image: url('Org-Chart.png');">
	<a class="map_link" id="map_link_0" title="" href=""></a>
	<a class="map_link" id="map_link_1" title="" href=""></a>
	<a class="map_link" id="map_link_2" title="" href=""></a>
</div>

This has worked perfectly, but I would also like for the relevant section of the image to highlight on rollover. Either through a change in opacity or some other method. Is this possible? Rollovers are easy enough, but I've never tried to highlight only a portion of the image.

[DrDOS]

I don't think that will work for you. Two things you can do is just make a bunch of little divs to fill the 'box' and float them all into place, or just an old fashioned table, and use one of those choices instead of a map. Then you can set the td or div to some opacity on rollover.