Tengo una imagen la cual tiene dos maps para los botones. Cuando haces mouseover sobre el fondo de la imagen se aclara el fondo. Si haces mouseover sobre algun botón se cambia la imagen completa.
El hecho es que en firefox y chrome funciona bien. En IE7 a veces hace algún destello pero que va, no sirve
Esta es la imagen: si puedes pruébala en
http://www.nacsport.com/sp/beta.asp 
El ejemplo que he descargado, si funciona:
http://www.htmliseasy.com/buttons/index4.html http://www.htmliseasy.com/buttons/demo_imagemap.html
Mi código:
Código:
// preload images:
if (document.images) {
//dir_up = new Image(76,76); dir_up.src = "dir_up.gif";
compra_basic = new Image(417,161); compra_basic.src = "../imgs/Piezas compra NAC/piezas/panel_basic_btn_comprar.jpg";
demo_basic = new Image(417,161); demo_basic.src = "../imgs/Piezas compra NAC/piezas/panel_basic_btn_demo.jpg";
compra_scout = new Image(20,20); compra_scout.src = "../imgs/Piezas compra NAC/piezas/panel_scout_btn_comprar.jpg";
demo_scout = new Image(20,20); demo_scout.src = "../imgs/Piezas compra NAC/piezas/panel_scout_btn_demo.jpg";
}
function hiLite(imgName,imgObjName) {
if (document.images) {
document.images[imgName].src = eval(imgObjName + ".src");
}}
function nada() {
// empty function
}
//--></SCRIPT>
Código HTML:
<map name="panel_b">
<area shape="rect" coords="145,122,229,159" href="#" onMouseOver="javascript:hiLite('panel_basic','compra_basic')">
<area shape="rect" coords="228,125,300,162" href="#" onMouseOver="javascript:hiLite('panel_basic','demo_basic')">
</map>
<map name="panel_scout" id="panel_scout">
<area shape="rect" coords="143,123,225,157" href="#" onMouseOver="javascript:hiLite('panel_scout','compra_scout')">
<area shape="rect" coords="224,123,294,158" href="#" onMouseOver="javascript:hiLite('panel_scout','demo_scout')">
</map>