PHP/CSS Link Mush
The link mush featured on my site is generated by PHP and styled using a few CSS rules. The general idea came from one of the css demos at nontroppo.org.PHP Generation Bits
An array is created wherein each entry has a category, a URL, a two-letter designation, and a full name to be displayed on mouse-over. Each entry is constructed as follows:$my_links_array = array(
array("Category" => "pro", "URL" => "http://www.uniformserver.com/", "Letter" => "Us", "Name" => "The Uniform Server"),
array("Category" => "pro", "URL" => "http://en.wikibooks.org/wiki/LaTeX", "Letter" => "λx", "Name" => "LaTeX"),
This array is then shuffled using a function called twodshuffle() borrowed from an anonymous comment in the PHP manual page.
function twodshuffle($array)
{
$count = count($array);
$indi = range(0,$count-1);
shuffle($indi);
$newarray = array($count);
$i = 0;
foreach ($indi as $index)
{
$newarray[$i] = $array[$index];
$i++;
}
return $newarray;
}
Then the array is iterated over using a loop, and based upon the category a different style is applied. The set of styles that keep the boxes well behaved originated from the ones that were demonastrated at http://nontroppo.org/ ages ago. They handle the boxes as well as the hover behavior, and spacing between the boxes.
.boxframe {position: relative;
margin: 10px auto;
width: 600px;
padding: 10px;}
.boxframe {width: 620px;}
.box {float: left;
width: 15px;
height: 15px;
border: 1px solid #000;
margin: 4px;
padding: 4px;
font: 0.7em "bitstream vera sans", "Trebuchet MS", sans-serif;
text-decoration: none;
background: #3f4e4e;
text-align: center; }
.box {color: #000000; background: #3f4e4e; color: #FFFFFF;}
.box:hover {color: #000000; background: #000000;}
.clearbox { border: 1px solid black; /*background: #3f4e4e;*/ color: black;}
.blankbox { border: 1px solid black; /*background: #3f4e4e;*/ color: black;}
.clearboth {clear: both;}
a span {display: none;}
a:hover span {
display: block;
position: relative; top: -60px; left: -50px; height: 20px; width: 200px;
padding: 5px; margin: 5px; z-index: 100;
color: black; background: #CCCCCC;
border: 1px solid #000;
.clearbox {float: left;
width: 15px;
height: 15px;
border: 0px solid #4a525a;
margin: 4px;
padding: 4px;
font: 0.7em "bitstream vera sans", "Trebuchet MS", sans-serif;
text-decoration: none;
text-align: center; }
The process of spewing them all out onto the page in quietly dramatic fashion is handled by this chunk of code:
function some_empty()
{
$x = rand(1,3);
if ($x == 2) { echo ''; }
if ($x == 3) { echo ''; }
}
$my_links_array = twodshuffle($my_links_array);
$count = count($my_links_array);
for ($i = 0; $i < $count; $i++) {
some_empty();
echo '<'.'a class="box"';
if ($my_links_array[$i]["Category"] == "pro") { echo ' id="box_a" href="'; }
if ($my_links_array[$i]["Category"] == "art") { echo ' id="box_b" href="'; }
if ($my_links_array[$i]["Category"] == "fun") { echo ' id="box_c" href="'; }
if ($my_links_array[$i]["Category"] == "fri") { echo ' id="box_d" href="'; }
echo $my_links_array[$i]["URL"];
echo '" ';
echo ">";
echo $my_links_array[$i]["Letter"];
echo '<'.'span>';
echo $my_links_array[$i]["Name"];
echo '<'.'/span>';
some_empty();
}
Now that you know, the magic is entirely gone. Good job.