<style type="text/css">
@charset "utf-8";
.castle_array {
    width: 128px;
    height: 128px;
    background-color: #6C0;
    float: left;
}
.castle_array:hover {
    background-color: #6F0;
    float: left;
}
.clear_both {
    clear: both;
}
</style>

<script type="text/javascript">
function B_modeWindow () {
    alert(this.id);
}
</script>

<?php
$id = '1';

include_once 'include_once/connect.php';

for ($x = 1; $x <= 5; $x++) {
for ($y = 1; $y <= 5; $y++) {
$xy = $x."x".$y;
    $pullMapInfo = "SELECT value FROM mapinfo WHERE id='".$id."' AND xy='".$xy."'";
    $pullMapInfo2 = mysql_query($pullMapInfo) or die('error here');

    if ($pullMapInfo3 = mysql_fetch_array($pullMapInfo2)) {
        echo '<div class="castle_array" style="background-image: url(tiles/'.$pullMapInfo3[0].'.BMP)" id="'.$x.'x'.$y.'">'. $pullMapInfo3[0] .'</div>';
    } else {
        echo '<div class="castle_array" id="'.$xy.'"></div>';
    }
}
echo '<div class="clear_both"></div>';
}

?>

<script type="text/javascript">
for (x = 1; x <= 5; x++) {
for (y = 1; y <= 5; y++) {
    document.getElementById(x+"x"+y).addEventListener("click",B_modeWindow);
}
}