Cool Banners
I wanted a banner for my boy's blog, and so I spent a bunch of time and picked out 6 or 7 pictures, painstakingly resized them in Photoshop, and then painstakingly figured out how to get text to go over top.
Tonight I wanted to change the banner and I figured there must be a better way. And so I wrote one in PHP. I took the random image code I wrote ages ago and used that to generate random images until they had filled a banner image, then I figured out how to get text to overlay, too: banner.php.txt (4 KB)
The "secret sauce" to using this code is to make sure you have a /fonts directory with .ttf files (just copy your favorite truetype fonts from C:\WINDOWS\Fonts\) and to have pictures published in the same way I documented before in my publishing system blog.
The other cool thing I figured out was how to have a random banner each time. I used banner.php to generate a bunch of different logos, copied them to a /logos directory (named logo1.jpg through logoN.jpg), and then added this little bit of code to each page in my boy's blog (in this case, I had 20 logos generated):
<head>
<script type="text/Javascript">
function RandomLogo()
{
var img = Math.round(Math.random()*20)+1;
imgname = "http://theboys.theeislers.com/logos/logo" + img + ".jpg";
document.images.item("logoimage").src = imgname;
}
</script>
</head>
<body>
<a href="http://theboys.theeislers.com/" accesskey="1"><img style="margin-top:4px" name="logoimage"></a>
<script language="JavaScript">
<!--
RandomLogo();
//-->
</script>
</body>
Enjoy!
Comments