PHP Map with Parallelogram shapes
Map with Rhomb cells

In this page I added PHP and CSS code snippets that can be used to create dynamically a Map with PHP.
CSS is used to display the map cells in different shapes: rectangles, parallelograms, and rhombs.
- The cells are <div> elements added in <blockquote> tags for each row. You can define the number of cels and columns.

Simple PHP Map with Rectangle shapes

<?php
// http://coursesweb.net/php-mysql

$nr = 20;                   // HERE add the number of cells (php will auto complete the last row wih the remaining cells)
$cols = array(4, 5);        // HERE add the number of alternate cols to each row
$css_class = 'map_cell';        // css class added in each cell
$addtxt = 1;                // when is 1 add text in cell (cell number)
$map_html = '';             // stores the returned html code

// variables used to alternate the number of cells to each row
$x = 1;
$b = $cols[$x];

// creates the html code
for($i=1; $i<=$nr; $i++) {
  if($b == $cols[$x % 2]) {
    $blk1 = '<blockquote class="rw'. ($x % 2) .'">';
    $blk2 = '</blockquote>';
    $use = $x % 2;
    $b = 1;
    $x++;
  }
  else {
    $b++;
    $blk1 = '';  $blk2 = '';
  }
  $map_html .= $blk1 .'<div class="'. $css_class .'">'. ($addtxt == 1 ? $i : '') .'</div>'. $blk2;

  // adds the remaining cells to complete the row
  if($addtxt == 1 && $i == $nr) {
    $addtxt = 0;
    $nr += $cols[($use + 1) % 2] - $b;
  }
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>PHP Map - Rectangles</title>
<style type="text/css">
div.map_cell{
 float: left;
 margin:1px 1px 0 0;
 width: 100px;
 height: 75px;
 background: #abcdef;
 border: 1px solid #000;
 font-weight: bold;
 text-align: center;
 line-height:400%;
 font-size: 20px;
}
blockquote.rw1 {
 margin: 0 0 0 99px;
}
blockquote {
 clear: both;
}
</style>
</head>
<body>
<?php echo $map_html; ?>
</body>
</html>
- Result a map like in this image:
            PHP Map - Rectangles

PHP Map with Parallelogram shapes

<?php
// http://coursesweb.net/

$nr = 20;                   // HERE add the number of cells (php will auto complete the last row wih the remaining cells)
$cols = array(4, 5);        // HERE add the number of alternate cols to each row
$css_class = 'map_cell';        // css class added in each cell
$addtxt = 1;                // when is 1 add text in cell (cell number)
$map_html = '';             // stores the returned html code

// variables used to alternate the number of cells to each row
$x = 1;
$b = $cols[$x];

// creates the html code
for($i=1; $i<=$nr; $i++) {
  if($b == $cols[$x % 2]) {
    $blk1 = '<blockquote class="rw'. ($x % 2) .'">';
    $blk2 = '</blockquote>';
    $use = $x % 2;
    $b = 1;
    $x++;
  }
  else {
    $b++;
    $blk1 = '';  $blk2 = '';
  }
  $map_html .= $blk1 .'<div class="'. $css_class .'">'. ($addtxt == 1 ? $i : '') .'</div>'. $blk2;

  // adds the remaining cells to complete the row
  if($addtxt == 1 && $i == $nr) {
    $addtxt = 0;
    $nr += $cols[($use + 1) % 2] - $b;
  }
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>PHP Map - Parallelograms</title>
<style type="text/css">
div.map_cell{
 float: left;
 margin:1px 1px 0 0;
 width: 100px;
 height: 75px;
 background: #abefcd;
 -webkit-transform: skew(30deg);
 -moz-transform: skew(30deg);
 -o-transform: skew(30deg);
 font-weight: bold;
 font-size: 20px;
 text-align: center;
 line-height: 350%;
}
blockquote.rw1 {
 margin: 0 0 0 99px;
}
blockquote:first-child {
 margin: 0 0 0 45px;
}
blockquote {
 clear: both;
}
</style>
</head>
<body>
<?php echo $map_html; ?>
</body>
</html>
- Result a map like this:
            PHP Map - Parallelograms

Map with Rhomb cells

<?php
// http://coursesweb.net/php-mysql/

$nr = 20;                   // HERE add the number of cells (php will auto complete the last row wih the remaining cells)
$cols = array(4, 5);        // HERE add the number of alternate cols to each row
$css_class = 'map_cell';        // css class added in each cell
$addtxt = 1;                // when is 1 add text in cell (cell number)
$map_html = '';             // stores the returned html code

// variables used to alternate the number of cells to each row
$x = 1;
$b = $cols[$x];

// creates the html code
for($i=1; $i<=$nr; $i++) {
  if($b == $cols[$x % 2]) {
    $blk1 = '<blockquote class="rw'. ($x % 2) .'">';
    $blk2 = '</blockquote>';
    $use = $x % 2;
    $b = 1;
    $x++;
  }
  else {
    $b++;
    $blk1 = '';  $blk2 = '';
  }
  $map_html .= $blk1 .'<div class="'. $css_class .'"><div>'. ($addtxt == 1 ? $i : '') .'</div></div>'. $blk2;

  // adds the remaining cells to complete the row
  if($addtxt == 1 && $i == $nr) {
    $addtxt = 0;
    $nr += $cols[($use + 1) % 2] - $b;
  }
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>PHP Map - Rhombs</title>
<style type="text/css">
div.map_cell {
 position: relative;
 float: left;
 width: 0;
 height: 0;
 margin-top: -49px;
 border: 50px solid transparent;
 border-bottom: 55px solid #05ed08;
}

div.map_cell:after {
 position: absolute;
 left: -50px;
 top: 55px;
 width: 0;
 height: 0;
 border: 50px solid transparent;
 border-top: 55px solid #05ed08;
 content: '';
}

div.map_cell div {
 position: relative;
 margin: 45px auto 0 -10px;
 font-weight: bold;
 font-size: 20px;
 z-index: 888;
 text-align: center;
}
blockquote.rw1 {
 margin: 0 0 0 90px;
}
blockquote {
 clear: both;
}
</style>
</head>
<body>
<?php echo $map_html; ?>
</body>
</html>
- Result a map like this:
            PHP Map - Rhombs

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag adds an image in web page?
<div> <img> <span>
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Which of these CSS codes displays the text oblique?
font-style: italic; text-decoration: underline; font-weight: 500;
#id {
  font-style: italic;
}
Click on the jQuery function used to hide with animation a HTML element.
click() hide() show()
$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});
Click on the correctly defined function in PHP.
fname function() {} function fname() {} function $fname() {};
function fname($a, $b) {
  echo $a * $b;
}
Dynamically PHP Maps with Rectangle, Parallelogram, and Rhomb Shapes

Last accessed pages

  1. Create simple Website with PHP (11993)
  2. Zuma Games (8765)
  3. Qwop (3650)
  4. AJAX and XML (1109)
  5. Butterfly Kyodai (6814)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (47842)
  2. Read Excel file data in PHP - PhpExcelReader (35965)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (35572)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (32081)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (29348)