game image navigation not working properly

[silverglade]

Hi, I have three divs all with different z indexes. One div shows a  clickable world map that goes to the monsters and background divs, which is set up in an array. The problem is, when the map is clicked, it doesn't go to the first element in the array, and when I go "back" with the back button, it doesn't go all the way to the map. Also, I want to link 2 image maps togather, and I don't know how to do it. any help GREATLY appreciated. Here is the relevant code.

 

/////////////////////////////GAME NAVIGATION AND MONSTER SEARCH CODE NOT FINISHED//////////////////////////////////

$locations[0] = array();
$locations[1] = array(
  'background_images' => array(
     "<img src='sundragon_environments/ocean/ocean1_FRAME.jpg'/>",
     "<img src='sundragon_environments/ocean/ocean1_FRAME2.jpg'/>",
     "<img src='sundragon_environments/ocean/ocean1_FRAME3.jpg'/>",
     "<img src='sundragon_environments/ocean/ocean1_FRAME4.jpg'/>",
     "<img src='sundragon_environments/ocean/ocean1_FRAME5.jpg'/>"
  ),
  'monster_images' => array(
     "<img src='sundragon_monsters_source/water/goldfish/goldfish.png'/>",
     "<img src='sundragon_monsters_source/water/eel/eel_transp_FRAME.png '/>",
     "<img src='sundragon_monsters_source/water/shark/shark_transp_FRAME.png'/>",
     "<img src='sundragon_monsters_source/water/octalisk/octalisk_transp_FRAME.png'/>",
     "<img src='sundragon_monsters_source/water/teardrop_ocean_protector/teardrop_ocean_protector.png'/>"
  )
);
$locations[2] = array(
  'background_images' => array(
  "<img src='sundragon_environments/shore/teardrop_shore/teardrop_shore1.jpg'/>",
  "<img src='sundragon_environments/shore/teardrop_shore/teardrop_shore2.jpg'/>",
  "<img src='sundragon_environments/shore/teardrop_shore/teardrop_shore3.jpg'/>",
  "<img src='sundragon_environments/shore/teardrop_shore/teardrop_shore4.jpg'/>",
  "<img src='sundragon_environments/shore/teardrop_shore/teardrop_shore5.jpg'/>"
  ),
  'monster_images' => array(
     "<img src='sundragon_monsters_source/shore/teardrop_shore/cats/background1_cat.png'/>",
  "<img src='sundragon_monsters_source/shore/teardrop_shore/cats/background2_cat.png'/>",
  "<img src='sundragon_monsters_source/shore/teardrop_shore/cats/background3_cat.png'/>",
  "<img src='sundragon_monsters_source/shore/teardrop_shore/cats/background4_cat.png'/>",
  "<img src='sundragon_monsters_source/shore/teardrop_shore/cats/background5_cat.png'/>"
  )
);


$locations[3] = array(
  'background_images' => array(
  "<img src='sundragon_environments/forest/whispering_forest/whispering_forest1.jpg'/>",
"<img src='sundragon_environments/forest/whispering_forest/whispering_forest2.jpg'/>",
"<img src='sundragon_environments/forest/whispering_forest/whispering_forest3.jpg'/>",
"<img src='sundragon_environments/forest/whispering_forest/whispering_forest4.jpg'/>",
"<img src='sundragon_environments/forest/whispering_forest/whispering_forest5.jpg'/>"
  ),
  'monster_images' => array(
  "<img src='sundragon_monsters_source/forest/whispering_forest/whispering_monkey_1.png'/>",
"<img src='sundragon_monsters_source/forest/whispering_forest/whispering_fairy_2.png'/>",
  "<img src='sundragon_monsters_source/forest/whispering_forest/giant_toad_3.png'/>",
  "<img src='sundragon_monsters_source/forest/whispering_forest/whispering_bear_4.png'/>",
  "<img src='sundragon_monsters_source/forest/whispering_forest/lizasaur_5.png'/>"
  )
);

if(isset($_GET['newLocation']))
{
  $_SESSION['current_location']=$_GET['newLocation'];
}

if(!isset($_SESSION['current_location']) && !isset($_SESSION['current_background']) && !isset($_SESSION['currentMonster']))
{
  $_SESSION['current_location'] = 0;
  $_SESSION['current_monster'] = 0;
   $_SESSION['current_background'] = 0;
}

if($_SESSION['current_location'] != 0) {
  if(!isset($_SESSION['current_background']) && !isset($_SESSION['current_monster']))
  {
     $_SESSION['current_monster'] = 0;
     $_SESSION['current_background'] = 0;
  }

  if(isset($_GET['further']))
  {   //below is- inside the locations array, teardrop ocean (1) the background image is 4(example)+1 is set, then
     //do this
     if(isset($locations[$_SESSION['current_location']]['background_images'][$_SESSION['current_background']+1])) {
        $_SESSION['current_background']+=1;
     }
     if(isset($locations[$_SESSION['current_location']]['monster_images'][$_SESSION['current_monster']+1])) {
        $_SESSION['current_monster']+=1;
     }
  }
  elseif(isset($_GET['back']))
  {
     if(isset($locations[$_SESSION['current_location']]['background_images'][$_SESSION['current_background']-1])) {
        $_SESSION['current_background']-=1;
     }
     if(isset($locations[$_SESSION['current_location']]['monster_images'][$_SESSION['current_monster']-1])) {
        $_SESSION['current_monster']-=1;
     }
  }

  // I dont have any $_SESSION['background'] var
  //$currentBackground=$_SESSION['background'][$_SESSION['current_background']];

  $currentBackground = $locations[$_SESSION['current_location']]['background_images'][$_SESSION['current_background']];

  //I dont have any $_SESSION['monster'] var
  //$currentMonster=$_SESSION['monster'][$_SESSION['current_monster']];

  $currentMonster=$locations[$_SESSION['current_location']]['monster_images'][$_SESSION['current_monster']];

} else {
  //?newLocation=1 means set it to Teardrop ocean.
  $echoMap = '
     <img src="aradia.jpg" width="256" height="328" border="0" usemap="#Map" />
     <map name="Map" id="Map">
        <area shape="rect" coords="5,178,28,220" href="?newLocation=1" />
<area shape="rect" coords="6,224,43,254" href="?newLocation=2" />
<area shape="rect" coords="26,263,60,295" href="?newLocation=3" />
     </map>';
  $currentMonster = '';
}

 

<div id="monster_background"><?php echo $currentBackground;?></div>

<div id="transparent_monster"><?php echo $currentMonster;?><?php echo $echoMap; ?></div>