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 Link to comment https://forums.phpfreaks.com/topic/210633-z-index-and-image-map-problem/ 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> Link to comment https://forums.phpfreaks.com/topic/210633-z-index-and-image-map-problem/#findComment-1098825 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. Link to comment https://forums.phpfreaks.com/topic/210633-z-index-and-image-map-problem/#findComment-1098832 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.