0 Replies Latest reply on Jan 16, 2013 8:13 AM by resdesign

    probable z-index problem in FF - but not in Chrome or Safary other problem in IE

    resdesign Adobe Community Professional & MVP

      This composition loads the image differently in different browsers. The map image loads properly in Chrome and Safari on top of the background and allows the help box to show on mouseover in areas of the map. However in IE it has a bounded box and load under the transparent background and in FF it also load under the background with no bounding box. (see images below).

      Is there browser specific way to correct this issue?

      Here is the code to load the image with only 2 regions to simplify here:

      sym.stop('start');

      $('<img id="region1" width="310" height="475" src="images/region1.png" usemap="#region1">'+

      '<map name="region1">'+

      // 1st row

      '<area id="Dallam" shape="rect" title="County: Dallam, county seat: Dalhart" coords="29,17,97,58"/>'+

      '<area id="Sherman" shape="rect" title="County: Sherman, County Seat: Stratford" coords="100,19,145,59"/>'+

      '</map>').appendTo("#Stage");

      $('#region1').css("cursor", "help");

      sym.$('bg').css('z-index', 0);

      $("area").on("click", function(){

                switch($(this).attr('id')){

                          case "Dallam":

                                    areaSelected($(this).attr('id'));

                                    break;

                          case "Sherman":

                                    areaSelected($(this).attr('id'));

                                    break; 

                                    default:

                                    //defaut code here

                          }

      });

       

       

      z-index1.pngz-index2.pngz-index3.png