silverglade Posted August 13, 2010 Share Posted August 13, 2010 Hi, I have a map drawing that has image maps on it for clickable locations. The way I have it set up, the image map div must have a lower z index than the overlapping div above it with a higher z index. The image map wont click this way. Is there any kind of work around for this please ? thanks. Derek Quote Link to comment Share on other sites More sharing options...
silverglade Posted August 13, 2010 Author Share Posted August 13, 2010 I fixed it using a topmost div separate for the image map. But the image map pops out of the div now, any help greatly appreciated. Thanks. Derek here is the css #iframe_transparent_monster { position:absolute; margin: 122px auto 0 360px; /*we are setting this in game page randomly now background: url( "../sundragon_monsters_source/water/octalisk/octalisk_transp_FRAME.png");*/ width: 250px; height: 330px; z-index:2; } iframe_echoMap { position:absolute; margin: 122px auto 0 360px; /*we are setting this in game page randomly now background: url( "../sundragon_monsters_source/water/octalisk/octalisk_transp_FRAME.png");*/ width: 256px; height: 330px; z-index:3; } #iframe_monster_background { margin: 122px auto 0 357px; position: absolute; /*background: url("../sundragon_environments/ocean/ocean1_FRAME.jpg");*/ background-position: center; width: 250px; height: 330px; z-index:1; } and here is the php and html <?php session_start(); // include("connect1.php"); //include('bouncer_final.php'); // include('frames/encounters.php'); require_once('chat/dbconnect.php'); // include("bouncer.php"); // kicks the person off if session is not set, its the bouncer, big and fat man. //turned these off while we are developing // ini_set('display_errors',1); //error_reporting(E_ALL|E_STRICT); //or if you only want to see Warning Messages and not Notice Messages: //ini_set('display_errors',1); //error_reporting(E_ALL); //and if you just want all Error Reporting off, simply use this: error_reporting(0); // error_reporting (E_ALL ^ E_NOTICE); //declare vars //$oceanBackground='';//we dont need this because it's bad practice and its already set in the program. //$currentBackground=''; $echoLocation=''; $player=''; $monsters=''; $_SESSION['player'] = $player;// set this right after they log in, run this once, eventually in database. $_SESSION['monsters']=$monsters; $currentMonsterLevel='';//get rid of this eventually and put in session variable cuz we use it on other pages. $currentPlayerLevel=''; $error=''; $playerHp='';//get rid and make session var. $monsterHp=''; $echoPlayerMana=''; $echoMonster=''; $echoSpell=''; $player=''; $monsters=''; $playerMessage=''; $monsterMessage=''; $currentPLayerLevel =''; /////////////////////////////////chat code here because in chat div made input disappear/////// $message = $_POST['message']; $ip = $_POST['ip']; $mlen = strlen($message); $maxlength = 150; $date = date("M jS Y"); if ($_POST['submit']) { if ($name == "") { $chatError= "<strong>Error: Please enter your nickname.</strong>"; } else if ($message == "") { $chatError= "<strong>Error: No message to be sent.</strong>"; } else if ($mlen > $maxlength) { $chatError= "<strong>Error: Message too long.</strong>"; } else { $db = mysql_connect($dbhost,$dbuser,$dbpass); mysql_select_db($dbname) or die(mysql_error()); mysql_query("INSERT INTO chat (name,message,date,ip) VALUES('$name','$message','$date','$ip')"); } } $db = mysql_connect($dbhost,$dbuser,$dbpass); mysql_select_db($dbname) or die(mysql_error()); $query = "SELECT * FROM chat ORDER BY id DESC LIMIT 20"; $result = mysql_query($query); // echo "<div id=\"contentbox\">\n"; // echo "<ul id=\"shoutboxmessage\">\n"; while($r = mysql_fetch_array($result)) { $name = $r['name']; $name = strip_tags($name); $message = $r['message']; $message = strip_tags($message); $chatMessage= "<li><strong>>$name</strong>: $message</li>\n"; } // echo "</ul>\n"; // echo "</div>\n"; mysql_close($db); /////////////////////////////////////////////////////////////BATTLE FUNCTIONS//////////////////////////////// function encounter($monsterSeeInvis,$monsterAggro, $playerFaction) { if($monsterSeeInvis==true && $monsterAggro==true || $playerFaction<5) { return true;//return yes, for attack function } else { return false; } } function monsterAttack($currentMonster,$hitRollLow,$hitRollHigh,$dmgLow,$dmgHigh,$playerDefense, &$playerHp) { $monsterRoll= rand($hitRollLow, $hitRollHigh); if($monsterRoll>=$playerDefense) { $monsterDamage= rand($dmgLow,$dmgHigh); $monsterMessage = "You have been hit by a ". $currentMonster." for "."<strong>". $monsterDamage."</strong> points of damage!"; $playerHp= $playerHp- $monsterDamage; $monsterMessage.=" your hp is now ".$playerHp; } else { $monsterMessage= " the ".$currentMonster." missed you!<br />"; } return $monsterMessage; } function playerAttack($currMonster,$playerHitRollLow,$playerHitRollHigh,$playerDmgLow,$playerDmgHigh,$monsterDefense, &$monsterHp,$playerFaction,$playerMana) { $playerRoll= rand($playerHitRollLow, $playerHitRollHigh); if($playerRoll>=$monsterDefense) { $playerDamage= rand($playerDmgLow,$playerDmgHigh); $playerMessage = "You have hit a ". $currMonster." for "."<strong>". $playerDamage."</strong> points of damage!"; $monsterHp= $monsterHp- $playerDamage; $playerMessage.=" The ".$currMonster."'s hp is now ".$monsterHp; if($monsterHp<=0) { if($playerFaction<=0) { $playerMessage="Your faction standing with ".$playerFaction. "could not possibly get any worse."; } $playerMessage.=" You have killed the ".$currMonster. "Your faction standing with ".$playerFaction." is now ".$playerFaction-1; } } else { $playerMessage; //WTF i dont know what im doing. $playerMessage= " Whoa! You missed the ".$currMonster; } return $playerMessage; } ////////////////////////////////////////////////////////////////////////////////// /////////////////////////////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'/>" ) ); 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" /> </map>'; $currentMonster = ''; } /////////////////////////////////////////////////////////////////////////////////////////////////// ////CODE FOR MONSTERS IMAGE GALLERY IN ORDER /* if(( !isset($_SESSION['current_monster'])) OR (! $_POST)) { $_SESSION['current_monster'] = 0; } if (!isset($_SESSION['monster'])) { $_SESSION['monster'] = 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'/>" ); } if(!isset($_SESSION['current_monster'])) { $_SESSION['current_monster'] = 0; } if(isset($_POST['search'])) { $_SESSION['current_monster'] = isset($_SESSION['monster'][$_SESSION['current_monster'] + 1]) ? ($_SESSION['current_monster'] + 1) : 0; } elseif(isset($_POST['search'])) { $_SESSION['current_monster'] = isset($_SESSION['monster'][$_SESSION['current_monster'] - 1]) ? ($_SESSION['current_monster'] - 1) : count($_SESSION['monster'])-1; } $currentMonster=$_SESSION['monster'][$_SESSION['current_monster']]; //////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////END NAVIGATION CODE AND MONSTER SEARCH NOT DONE YET. */ $spells = array ( "red" => "red", "green"=>"green", "blue" =>"blue" ); $player = array ( 'inventory'=>'', 'spells'=>'', 'stats'=> array ( 'int'=>16, 'playerHp'=>100, 'playerMana'=>100, 'playerDmgLow'=>1, 'playerDmgHigh'=>10, 'playerHitRollLow'=>1, 'playerHitRollHigh'=>20, 'playerDefense'=>5, 'Teardrop_Ocean_Protectors'=>3 ), 'armor'=> array ( 'shield'=>'gold' ), 'weapons' =>array ( 'sword'=>'silver' ) , 'faction'=> array ( 'Teardrop_Ocean_Protectors'=>3 //zero means the worst faction you can have, 10 being best , 5 being indifferent. ) ); $monsters = array ( 'Ocean'=>array ( 'octalisk'=>array ( 'name'=>'octalisk', 'hp'=>100, 'exp'=>10, 'mana'=>100, 'dmgLow'=>1, 'dmgHigh'=>10, 'seeInvis'=>true, 'aggro'=>true, 'defense'=>5, 'faction'=>'Teardrop_Ocean_Protectors', 'hitRollLow'=>1, 'hitRollHigh'=>20 ), 'eel'=>array ( 'name'=>'eel', 'hp'=>100, 'exp'=>10, 'mana'=>100, 'dmgLow'=>1, 'dmgHigh'=>10, 'seeInvis'=>true, 'aggro'=>true, 'defense'=>5, 'faction'=>'Teardrop_Ocean_Protectors', 'hitRollLow'=>1, 'hitRollHigh'=>20 ), 'shark'=>array ( 'name'=>'shark', 'hp'=>100, 'exp'=>10, 'mana'=>100, 'dmgLow'=>1, 'dmgHigh'=>10, 'seeInvis'=>true, 'aggro'=>true, 'defense'=>5, 'faction'=>'Teardrop_Ocean_Protectors', 'hitRollLow'=>1, 'hitRollHigh'=>20 ), 'goldfish'=>array ( 'name'=>'goldfish', 'hp'=>100, 'exp'=>10, 'mana'=>100, 'dmgLow'=>1, 'dmgHigh'=>10, 'seeInvis'=>true, 'aggro'=>true, 'defense'=>5, 'faction'=>'Teardrop_Ocean_Protectors', 'hitRollLow'=>1, 'hitRollHigh'=>20 ), 'teardrop_ocean_protector'=>array ( 'name'=>'teardrop_ocean_protector', 'hp'=>100, 'exp'=>10, 'mana'=>100, 'dmgLow'=>1, 'dmgHigh'=>10, 'seeInvis'=>true, 'aggro'=>true, 'defense'=>5, 'faction'=>'Teardrop_Ocean_Protectors', 'hitRollLow'=>1, 'hitRollHigh'=>20 ) ),//end ocean 'Desert'=>array ( 'sand_snake' ), 'Forest'=>array ( 'frog', 'lizard', 'spider' ) ); //////////////////////////////////////////////////////// //insert octalisk stats into monsterattack function. if(encounter($monsters['Ocean']['octalisk']['seeInvis'],$monsters['Ocean']['octalisk']['aggro'],$player['faction']['Teardrop_Ocean_Protectors'])) { //BELOWE CODE instead of using globals, we set the output of monsterAttack //to $monsterMessage becasue it can be used outside the function. $monsterMessage = monsterAttack($currentMonster,$monsters['Ocean']['octalisk']['hitRollLow'],$monsters['Ocean']['octalisk']['hitRollHigh'] , $monsters['Ocean']['octalisk']['dmgLow'],$monsters['Ocean']['octalisk']['dmgHigh'], $player['stats']['playerDefense'],$player['stats']['playerHp'],$monsters['Ocean']['octalisk']['hp']); } else { echo "do nothing"; } ////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////// /*if(!empty($_POST['search'])) { //include('frames/search.php'); //I CANT GET THIS BELOW TO RUN IN A FUNCTION INSIDE THE SEARCH.PHP FILE, WTF IS UP WITH THAT //and it returns random ALL monsters instead of ocean monsters. $random = 'Ocean'; $monster = array_rand($monsters[$random]); if(is_array($monsters[$random][$monster])) { $currentMonster = $monsters[$random][$monster]['name']; } else { $currentMonster = $monsters[$random][$monster]; } //instead of echoing out $currentMonster , we set it so we can get random monster images with it output. $monsterImage=$currentMonster; //make the below into a function, note what changes , those will be your parameters. //i dont know how to do it. i tried. //function monsterEncounter($echoMonster,$monsterImage) if($monsterImage=='octalisk') { $echoMonster="<img src='sundragon_monsters_source/water/octalisk/octalisk_transp_FRAME.png'/>"; $monsterMessage='You see an Octalisk, it looks very scary'; } elseif($monsterImage=='eel') { $echoMonster="<img src='sundragon_monsters_source/water/eel/eel_transp_FRAME.png'/>"; $monsterMessage='You see an electric Eel , look out.'; } elseif($monsterImage=='shark') { $echoMonster="<img src='sundragon_monsters_source/water/shark/shark_transp_FRAME.png'/>"; $monsterMessage='You see a Hammerhead Shark, it looks powerful.'; } elseif($monsterImage=='goldfish') { $echoMonster="<img src='sundragon_monsters_source/water/goldfish/goldfish.png'/>"; $monsterMessage='You see a little goldfish, it looks cute.'; } elseif($monsterImage=='teardrop_ocean_protector') { $echoMonster="<img src='sundragon_monsters_source/water/teardrop_ocean_protector/teardrop_ocean_protector.png'/>"; $monsterMessage='You see a Teardrop Ocean Protector! , whoah..'; } else $echoMonster="You find an item!!!!"; }//end elseif */ ////////////////////////////////////////////////////////////////////////// if(!empty($_POST['spell'])) { $spellColor = array_rand($spells); if(is_array($spells)) { $currentSpell= $spellColor; } else { return 0; } //instead of echoing out $currentMonster , we set it so we can get random monster images with it output. if($currentSpell=='red') { $echoSpell=" <img src='sundragon_interface_template/spells/red.gif' align='center'/> "; $monsterMessage=' You cast <strong> BLOOD OF BEATHULE </strong>'; $player['stats']['playerMana']-=5; $echoPlayerMana=$player['stats']['playerMana']; } elseif ($currentSpell=='green') { $echoSpell=" <img src='sundragon_interface_template/spells/green.gif' align='center'/> "; $monsterMessage='You cast <strong> POISONOUS PLAGUE </strong> spell'; $player['stats']['playerMana']-=5; $echoPlayerMana=$player['stats']['playerMana']; } elseif($currentSpell=='blue') { $echoSpell=" <img src='sundragon_interface_template/spells/blue.gif' align='center'/> "; $monsterMessage='You cast <strong> HEART OF DARKNESS </strong>'; $player['stats']['playerMana']-=5; $echoPlayerMana=$player['stats']['playerMana']; } else { echo "nothing"; } } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Realm of the Sun Dragon</title> <link rel="stylesheet" type="text/css" href="css/gamestyles.css"> <style type="text/css"> body { margin-top:-32px; padding:0; color: gold; } table { color: black; } .style8 {color: #000000} </style> </head> <body oncontextmenu="return false;"> <div id="container"> <div id="monster_message"> <?php echo "this is the monster battle and NPC talk window";?> </div> <div id="currentWeapon"> <img src="sundragon_interface_template/items/swords/sword_shrunk.png" width="190" height="65" /> </div> <div id="iframe_player_top_lft" > <div id="left_player_stats"><table align="center" width="30" border="0"> <tr> <td><strong>HP</strong></td> <td><strong><font color="red"><?php echo $playerHp;?></font></strong></td> </tr> <tr> <td><strong>MANA</strong></td> <td><strong><font color="green"><?php echo $echoPlayerMana;?></font></td> </tr> <tr> <td><strong>EXP</strong></td> <td><strong><font color="blue">999</font></strong></td> </tr> <tr> <td><strong>PLAT</strong></td> <td><strong><font color="white">999</font></strong></td> </tr> </table></div> <p> </p> <p> </p> <p> </p> <p align="center"><strong><br /> <span class="style8">Octalisk (Level <?php echo $currentMonsterLevel;?>) </span></strong> <br/> <strong><span class="style8">HP</span><font color="red"> <?php echo $monsterHp;?></font></strong> </p> <div id="spelleffectsleft" > <div class="divcenter"> <div align="center"> <div class="inline"> <div align="center">spell</div> </div> <div class="inline"> <div align="center">spell</div> </div> <div class="inline"> <div align="center">spell</div> </div> </div> </div> <!--end divcenter--> </div><!--end spell effects--> <div id="bottomspellsleft" > <div class="divcenter"> <div class="inline"> <div align="center">spell</div> </div> <div class="inline"> <div align="center">spell</div> </div> <div class="inline"> <div align="center">spell</div> </div> </div> <!--end div center--> </div><!--end bottomspells--> </div><!-- end player div--> <div id="iframe_echoMap"><?php echo $echoMap; ?></div> <div id="iframe_spell_foreground"><?php echo $echoSpell;?></div> <div id="iframe_monster_background"><?php echo $currentBackground;?></div> <div id="iframe_transparent_monster"><?php echo $currentMonster;?></div> <!--not here--> <div id="iframe_player_top_right" > <table width="160" height="64" border="0" align= "center"> <tr> <td width="160"><div align="center"> <p><strong><br /> Silverglade (Level: <?php echo $currentPLayerLevel;?>)<br /> </strong></p> </div></td> </tr> </table> <div class="spelleffects" > <div class="divcenter"> <div class="inline"> <div align="center">spell</div> </div> <div class="inline"> <div align="center">spell</div> </div> <div class="inline"> <div align="center">spell</div> </div> </div> </div> <div class="bottomspells" > <div class="divcenter"> <div class="inline"> <div align="center">spell</div> </div> <div class="inline"> <div align="center">spell</div> </div> <div class="inline"> <div align="center">spell</div> </div> </div> </div> </div> <div id="iframe_chat_right"> <?php echo $chatMessage;?></div> <!--not here--> <div id="iframe_player_center_bottom" align="center" ><div style="display: inline;"> <form style="display: inline; margin: 0;" ...> <form style="display: inline; margin: 0;" action='gamestart_NEWEST.php' method='post'><input type='submit' name='attack' value='Attack'/><input type="submit" name="search" value="search" /><input type="submit" value="cast spell" name="spell" /><input type="submit" name="inventory" value="Inventory"/></form> <form style="display: inline; margin: 0;" method="get" action=""><input type="submit" value="go further" name="further" /> <input type="submit"value="Go back" name="back"/></form> </form> </div> <div id="chat"> <div align="center"> <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <strong>Message:</strong> <textarea name="message"></textarea> <input type="submit" name="submit" value="Chat"> <input type="hidden" name="ip" value="<?php echo $_SERVER['REMOTE_ADDR']; ?>"> </form> </div><!-- end center div --> </div></div></div> <!--not here--> <div id="log_off"> <a href="logout.php"><strong>LOG OFF</strong></a> </div> <!--not here--> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
silverglade Posted August 13, 2010 Author Share Posted August 13, 2010 nevermind I fixed it by putting the image map in the monster div. thanks. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.