Hi, I'm making a php game, and the image map isn't working. I don't know if it is a php or javascript issue, I don't think it is an html issue but I could be wrong so feel free to move this post. lol. But basically, The image map is supposed to link to an array of images. That is how the game works. There is the overworld image map, you click on a link, and go to the zone images, all in the same window. Any help GREATLY appreciated because having the image map feature work would be awesome finally. thanks. Derek.
here is the code that uses the image map. I cut out a lot of the unnecessary code , but the image map functionality related code is in there.
Code:
<?php
session_start();
//////////////////////////////////////////////////////////////////////////////////
/////////////////////////////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(
'backgroundImages' => array(
//Array images go here.
)
);
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;
}
}
$currentBackground=$_SESSION['background'][$_SESSION['current_background']];
$currentMonster=$_SESSION['monster'][$_SESSION['current_monster']];
} else {
//?newLocation=1 means set it to Teardrop ocean.
$currentBackground = '
<img src="aradia.jpg" width="256" height="328" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="5,176,81,249" href="?newLocation=1"/>
</map>';
$currentMonster = '';
}
///////////////////////////////////////////////////////////////////////////////////////////////////
?>
<!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_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">
the data from the chat message box will be output to this div</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">
<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></div></div>
<!--not here-->
<div id="log_off"> <a href="logout.php"><strong>LOG OFF</strong></a> </div>
<!--not here-->
</div>
</body>
</html>
|
