What I want to do now is replace the "printed" day with a fancy-looking image for the day. Each day is then represented by images with the names: Monday.jpg, Tuesday.jpg, ..., Sunday.jpg. Also, I am assuming that the day part is indicated within "::" markers, so the date format results in the following: "::Friday:: December 7th 2001". The code changes look like the following.
CODE
<MTDateHeader>
<script language="JavaScript">
<!--
WriteTheDate('<$MTEntryDate format="::%A:: %B %e %Y"$>', 3);
// -->
</script>
<noscript>
<div class="date"><br />
<$MTEntryDate format="::%A:: %B %e %Y"$>
</div><br />
</noscript>
</MTDateHeader>
<script language="JavaScript">
<!--
WriteTheDate('<$MTEntryDate format="::%A:: %B %e %Y"$>', 3);
// -->
</script>
<noscript>
<div class="date"><br />
<$MTEntryDate format="::%A:: %B %e %Y"$>
</div><br />
</noscript>
</MTDateHeader>
Notice that I have move the div-tags within the javascript stuff, as I will be needing it for the WriteTheDate() function.
Okay, the function WriteTheDate() is pretty much the same, except at the end where a check is made for a day enclosed between "::" markers, like this.
CODE
function WriteTheDate(dt, n)
{
var i;
var ind;
var gif;
...
...
if (s.substr(0, 2) == "::")
{
s = s.substr(2);
ind = s.indexOf("::");
if (ind != -1)
{
gif = s.substr(s, ind) + ".gif";
s = s.substr(ind+2);
s = "<TABLE border='0' cellspacing='0' cellpadding='0'><TR><TD valign='middle'><img src=" + gif + " /></TD><TD valign='middle'><div class='date' style='padding-bottom:3px;'>" + s + "</div></TD></TR></TABLE>";
}
}
if (gif == "")
{
s = "<div class='date'>" + s + "</div>";
}
document.write(s);
}
{
var i;
var ind;
var gif;
...
...
if (s.substr(0, 2) == "::")
{
s = s.substr(2);
ind = s.indexOf("::");
if (ind != -1)
{
gif = s.substr(s, ind) + ".gif";
s = s.substr(ind+2);
s = "<TABLE border='0' cellspacing='0' cellpadding='0'><TR><TD valign='middle'><img src=" + gif + " /></TD><TD valign='middle'><div class='date' style='padding-bottom:3px;'>" + s + "</div></TD></TR></TABLE>";
}
}
if (gif == "")
{
s = "<div class='date'>" + s + "</div>";
}
document.write(s);
}
Basically, if the day is found inbetween "::" markers, then it is extracted to generate the gif-file name, eg. "::Sunday::" will generate the gif-file name "Sunday.gif". The complicated table stuff is required in order to make sure that the image is centered properly in relation to the following text. Perhaps there is a better and more elegant way to achieve this, but this is a suitable quick-and-dirty method (for which I am famous). Note that the div-tags are embedded within the table in order to preserve the required class formatting.
If you have made it this far and are excited about this state-of-the-art improvement to the endless possibilities of Moveable Type, then I invite all of you to have a look at my blog Random Thoughts and judge it for yourself.
This has been yet another lesson in javascript. Yes, javascript can be fun, but beware that it does not get you hooked (like it did me, poor soul). I hope this excercise has been helpful to someone out there.
For those of you looking for another challenge in life, you might want to attempt the following. Extend my example to include the months and optionally the days using gifs. Good luck.