hey i am not clear what you want to do but...this code shows you how to change the image color on mouse roll over....
<UL class=download>
<LI></LI></UL>
<P><IMG height=315 alt="Screenshot - lightmapper.jpg"
src="Lightmapper/lightmapper.jpg" width=365></P>
<H2>Introduction</H2>
<P>The HTML <CODE><A
href="http://www.htmlhelp.com/reference/html40/special/map.html">map</A></CODE>
element defines a client-side image map: a set of regions that are bound to an
<CODE>img</CODE> element. From a web designer's point of view, it would be nice
to be able to highlight or replace the currently active region. Pure HTML
doesn't provide a way to alter the contents of an image map. <CODE>area</CODE>
tags -- the immediate children of the <CODE>map</CODE> -- are nothing more than
hyperlink hot spots. They do not allow any styling, such as changing a
background image or border color, for instance. The easiest way to indicate a
current map region via JavaScript is to change the entire image on the
<CODE>mouseover</CODE> event and then restore the original on
<CODE>mouseout</CODE>. <A
href="http://www.nigelbee.pwp.blueyonder.co.uk/image_map.htm">Here</A> is an
example. This method can be very bandwidth-consuming if the target image is big.
<A
href="http://www.webreference.com/programming/image_map/examples/index.htm">Another
way</A>, which involves CSS and overlay images, is much better in terms of
bandwidth, but is very complex to install.</P>
<P>This article explains an alternative technique for changing the appearance of
an image map's <CODE>area</CODE>s that is easy to use and easy enough to set up.
Also presented is a script, the Lightmapper, that uses this technique.
Installation of the script requires a casual knowledge of <A
href="http://www.w3.org/MarkUp/" target=_blank>HTML</A> and <A
href="http://www.javascriptkit.com/jsref/" target=_blank>JavaScript</A>, as well
as basic image editing skills. The script is perfectly compatible with all
mainstream browsers: Mozilla/Firefox 2, Opera 9 and MS IE 6/7. Lightmapper
script and the accompanying art are distributed under the <A
href="http://opensource.org/licenses/zlib-license.php" target=_blank>zlib/libpng
license</A>.</P>
<H2>Setup</H2>
<P>The setup procedure assumes the following:</P>
<UL>
<LI>You have the image -- in JPEG, GIF or PNG format -- to be bound to the image
map. I'll use a scanned black and white map of Europe.
<LI>You have already made the image map itself, so now you have HTML code with
<CODE>map</CODE> and <CODE>area</CODE> tags. I've used the <A
href="http://pidg.in/?p=23">Imagemapic</A>, which is a free tool for image
mapping. However, there are <A
href="http://home-2.consunet.nl/~cb007736/imagemap.html">many</A> tools on the
Internet that do this.
<LI>You have a raster image editor advanced enough to handle transparency. <A
href="http://www.getpaint.net/index2.html">Paint.NET</A> or <A
href="http://www.gimp.org/">GIMP</A> will be okay. The following explanation
assumes that you use Paint.NET. </LI></UL>
<P>At first you have to prepare the overlay images, i.e. the images that will be
shown when the cursor enters the respective <CODE>area</CODE>. Basically, these
images are the areas you've previously defined in the image map. They have been
cut from the original "big" image and pasted to the new smaller images. Do the
following, or <A href="#code">skip it</A> if you understand what I meant:</P>
<OL>
<LI>
<P>Open your "big" image in a image editor</P>
<LI>
<P>For each region:</P>
<UL>
<LI>
<P>Use the rectangular selection tool to encompass the region in a selection
(use zooming to be more accurate):</P>
<P align=center><IMG height=193 alt="Czech Republic is selected"
src="Lightmapper/1-select.jpg" width=300></IMG /></P>
<LI>
<P>Copy the selection to the clipboard either by selecting "Edit" menu ->
"Copy" item, or by pressing Ctrl-C</P>
<LI>
<P>Create a new image via "File" menu -> "New" item. With your selection
being in the clipboard, image dimensions will be set to fit this selection:</P>
<P align=center><IMG height=278 alt="File -> New dialog"
src="Lightmapper/2-new.jpg" width=285></IMG /></P>
<LI>
<P>Paste the clipboard contents into the new image by selecting "Edit" menu
-> "Paste" item, or by pressing Ctrl-P:</P>
<P align=center><IMG height=194
alt="Image pasted into the new image from the clipboard"
src="Lightmapper/3-paste.jpg" width=300></IMG /></P>
<LI>
<P>If the area/region in the image-map is not rectangular you should use the
"Eraser" tool (E key) to erase the contents of the image that go out of the
region the overlay is intended for. To do this:</P>
<UL>
<LI>
<P>Select the Eraser tool in the tools window or press the E key</P>
<LI>
<P>In the "Colors" window, select "Secondary" from the drop-down list. Click the
"More" button and then move the slider under the "Transparency - Alpha" to
0:</P>
<P align=center><IMG height=290 alt="Color selection dialog"
src="Lightmapper/4-color.jpg" width=392></IMG /></P>
<LI>
<P>Accurately erase any parts of the image that do not belong to the desired
area:</P>
<P align=center><IMG height=200 alt="Overlay image before painting"
src="Lightmapper/5-erase.jpg" width=300></IMG /></P></LI></UL>
<LI>
<P>Edit the new image. For instance, you can use the "Paint Bucket" (F key) to
change the color of the whole image:</P>
<P align=center><IMG height=203 alt="Final overlay image"
src="Lightmapper/6-paint.jpg" width=350></IMG /></P></LI></UL></LI></OL><A
name=code></A>
<P>The artistic part is now over. Next comes the programming:</P>
<OL start=3>
<LI>Make sure your <CODE>map</CODE> tag has both <CODE>id</CODE> and
<CODE>name</CODE> attributes and that these are equal: <PRE lang=html><map id="map_of_europe" name="map_of_europe"></PRE>
<LI>Make sure that all <CODE>area</CODE>s within a map have an <CODE>id</CODE>
attribute: <PRE lang=html><area href="#" id="Austria" shape="polygon"
coords="230, 319, 236, 325, 251, ... ></PRE>
<LI>Include the Lightmapper script file into your HTML page: <PRE lang=html> <html>
<head>
<script type="text/javascript" src="lightmapper.js"></script>
...</PRE>
<LI>In the page's <CODE>head</CODE> section, create a script block that will
contain the setup function: <PRE lang=html> <html>
<head>
<script type="text/javascript" src="lightmapper.js"></script>
<script type="text/javascript"></script></PRE>
<LI>Start Lightmapper; the code will look like this:
<DIV class=precollapse id=premain4 style="WIDTH: 100%"><IMG id=preimg4
style="CURSOR: hand" height=9 src="http://www.codeproject.com/images/minus.gif"
width=9 preid="4"> Collapse</DIV><PRE lang=html id=pre4 style="MARGIN-TOP: 0px"> <html>
<head>
<script type="text/javascript" src="lightmapper.js"></script>
<script type="text/javascript">
function mouse_over(id)
{
document.getElementById("name").innerHTML = id;
}
function mouse_out(id)
{
document.getElementById("name").innerHTML = "";
}
function prepare()
{
new Lightmapper(
"map_of_europe", "image_of_europe", mouse_over, mouse_out,
[ ["Albania", "images/_albania.gif", 1, -2],
["Austria", "images/_austria.gif", -1, -2],
["Belarus", "images/_belarus.gif", -2, 3],
["Belgium", "images/_belgium.gif", 1, 3],
...
["Russia", "images/russia.gif",
1, -7, , , "Russia_Kaliningrad"],
["Russia_Kaliningrad", "images/russia_kaliningrad.gif",
-2, 1, , , "Russia"],
...
["Spain", "images/_spain.gif", -1, -5],
["Switzerland", "images/_switzerland.gif", -2, 4],
["Sweden", "images/_sweden.gif", -2, 5],
["Ukraine", "images/_ukraine.gif", -2, 0] ]);
}
</script></PRE>
<LI>Bind the <CODE>prepare</CODE> function to <CODE>body</CODE>'s
<CODE>onload</CODE> event: <PRE lang=html> <html>
...
<body onload="prepare()">
...
</PRE></LI></OL>
<H2>Constructor & inner workings</H2>
<P>The constructor of the <CODE>Lightmapper</CODE> object may seem quite
complex. In fact it <STRONG>is</STRONG> complex, until you understand the
purpose of each parameter:</P>
<DIV class=precollapse id=premain6 style="WIDTH: 100%"><IMG id=preimg6
style="CURSOR: hand" height=9 src="http://www.codeproject.com/images/minus.gif"
width=9 preid="6"> Collapse</DIV><PRE lang=jscript id=pre6 style="MARGIN-TOP: 0px">function Lightmapper(mapId, // id of the MAP element,
imgId, // id of the IMAGE element the map is bound to,
mouseOver, // global onMouseOver handler,
mouseOut, // global onMouseOut handler
bindings) // array of arrays of
// area/image/position/handler bindings:
//
// [area_id, image_src, x_displacement,
// y_displacement, on_mouse_over, on_mouse_out,
// linked_area_id]
// where:
//
// area_id - id of the area,
//
// image_src - path to the image that
// will be shown on mouseover,
//
// x_displacement - horiz. displacement
// required for correct
// alignment of mouse-over
// image and the original map
// (see note below),
// y_displacement - vertical displacement,
//
// on_mouse_over - onMouseOver handler for
// current (area_id) area
// (replaces the
// global handler),
// on_mouse_out - onMouseOut handler for
// current (area_id) area
// (replaces the global
// handler),
// linked_area_id - id of the linked area
// (=pops up with the
// current area).</PRE>
<P><STRONG>Note</STRONG>: The script makes use of displacement values, specified
in pixels, that are used to align the mouse-over image of an area with the
original image. These values must be found experimentally by your
artist/programmer during the art setup. </P>
<P>Provided all of the above, the script does the following:</P>
<UL>
<LI>Calculates the position of the target image, in pixels, relative to the
<CODE>body</CODE> of the document: <PRE lang=jscript>var ct = document.getElementById(this.imgId);
// Retrieve the position of the target image:
var initX = 0, ct_ = ct;
if(ct_.offsetParent)
{
while(ct_.offsetParent)
{
initX += ct_.offsetLeft;
ct_ = ct_.offsetParent;
}
}
else if(ct_.x)
initX += ct_.x;
var initY = 0; ct_ = ct;
if(ct_.offsetParent)
{
while(ct_.offsetParent)
{
initY += ct_.offsetTop;
ct_ = ct_.offsetParent;
}
}
else if(ct_.y)
initY += ct_.y;</PRE>
<LI>For each <CODE>area</CODE>, listed in the array of bindings: <PRE lang=jscript>for(var i = 0, l = this.binds.length; i < l; i++)</PRE>
<UL>
<LI>Given the <CODE>area</CODE>'s coordinates (<CODE>coords</CODE> attribute),
the position of the image and the displacement values, the script calculates the
position of the overlay image associated with the current <CODE>area</CODE>: <PRE lang=jscript>// find area coords/width/height:
var xmin = 0, xmax = 0, ymin = 0, ymax = 0;
var coords = String(area.coords).split(",");
xmin = xmax = parseInt(coords[0]);
ymin = ymax = parseInt(coords[1]);
var m = coords.length, k = 2;
while(k < m)
{
var x = parseInt(coords[k++]);
var y = parseInt(coords[k++]);
if(x < xmin) xmin = x;
if(x > xmax) xmax = x;
if(y < ymin) ymin = y;
if(y > ymax) ymax = y;
}</PRE>
<LI>It creates an absolutely positioned <CODE>div</CODE> element and places it
in the recently calculated position: <PRE lang=jscript>var div = elem.overlay = document.createElement("DIV");
div.id = "ml_div_" + String(Lightmapper.prototype._idCount++);
...
var dts = div.style;
dts.position = "absolute";
dts.top = ymin + initY + elem["ydsp"];
dts.left = xmin + initX + elem["xdsp"];
dts.width = xmax - xmin;
dts.height = ymax - ymin;
dts.opacity = 0;
dts.filter = "alpha(opacity=0)";
dts.display = "none";</PRE>
<LI>It creates an <CODE>img</CODE> element, sets its <CODE>src</CODE> attribute
to the path to an overlay image and attaches this <CODE>img</CODE> to the
recently created <CODE>div</CODE>: <PRE lang=jscript>var img = document.createElement("IMG");
img.src = elem["isrc"];
img.border = "0";
...
div.appendChild(img);
document.body.appendChild(div);</PRE>
<LI>It creates new <CODE>map</CODE> with a new single <CODE>area</CODE>,
containing the region of the original <CODE>area</CODE> but transformed to the
image-space of the overlay image; it then attaches this <CODE>map</CODE> to the
<CODE>img</CODE> created earlier: <PRE lang=jscript>// create a map with a single area to bind to our div:
var map = document.createElement("map");
var mid = map.name = map.id = div.id + "_bound_map";
img.useMap = "#" + mid;
var area_new = document.createElement("area");
area_new.href = area.href;
area_new.shape = area.shape;
k = 0;
while(k < m)
{
coords[k++] -= xmin;
coords[k++] -= ymin;
}
area_new.coords = coords.join(",");
map.appendChild(area_new);
document.body.appendChild(map);</PRE>
<LI>It attaches a <CODE>mouseover</CODE> event to the original <CODE>area</CODE>
and a <CODE>mouseout</CODE> event to the new <CODE>area</CODE>: <PRE lang=jscript>var mi = elem["musi"] || this.mouseOver;
var mo = elem["muso"] || this.mouseOut;
this._setup_event(area, 'mouseover',
this._callLater(this._fade, div.id, 100, 50, 20, mi));
this._setup_event(area_new, 'mouseout',
this._callLater(this._fade, div.id, 0, 50, 20, mo));</PRE></LI></UL></LI></UL>
1
