I ran the theme through the W3 Validator and it came back with only 9 errors. 6 of them were because i copy pasted an <img> tag that had alt- instead of alt= Easily Fixed.

The remaining errors were 2 missing alt tags and one was a <tfoot> tag, it stumped me for a little while so i looked on “The Google” and found probably the one and only surprising concepts I’ve ever seen in a scripting language.

If you write it as follows

[cc lang="html"]

[/cc]
you get a single error warning from the W3 validator on the </tfoot> tag, Go figure!

The correct syntax is as follows: Note the thead then tfoot then tbody. Weird!!

[cc lang="html"]

[/cc]

The bottom link system is now finished; it contains what I think is a pretty sweet looking mouse over function.

I could not find a similar script on the internet so I had to hack up code that I found José Leal posted over at stackoverflow.com

HTML hyperlink with mouse over image

Again, with any script you find on the net, they require mass amounts of customization. So, here’s a list of changed I had to make to get it to perform the way i wanted to

* Removed the iframe and made it into a div instead
* implemented variables to be able to write text to the div
* Had to reformat a lot of the size variables and CSS attributes as it was causing issues with line wrapping and other minor details
* I made it so that the Y positioning was set in relation to the bottom of the screen, but still move with the mouse on the X access
* Recode the On-Page code to allow multiple mouseovers
* Implemented a replace script to fix the issue of putting complete Email addresses onto the page.

One issue i did come across which was a simple fix in the end but it took me a little while to click on to, was the at the beginning of the function the position was set to “absolute”. This was causing the hover pop ups to show on the same spot on the page even when the user scrolled, causing it to sit it an unco looking location. I changed this position to fix and BAM! All fixed.

Here is the completed working script

JavaScript:
[cc lang="js"]
var WindowVisible = null;
function WindowShow() {
this.bind = function(obj,height,width, content) {

// convert the email address to the correct format
if((content == “ian ta iblott tod com”) || (content == “ian_blott ta hotmail tod com”)){
content = content.replace(” ta “,”@”);
content = content.replace(” tod “,”.”);
}

obj.mheight = height;
obj.mwidth = width;
obj.onmouseover = function(e) {
if (WindowVisible == null) {
if (!e) e = window.event;
var tmp = document.createElement(“div”);
tmp.style.position = ‘fixed’;
tmp.style.bottom = ’0px’;

// create the DIV
var div = document.createElement(‘div’);
div.style.padding = ’10px’;
div.style.textAlign = ‘left’;
div.style.position = ‘absolute’;
div.style.bottom = ’0px’;
div.style.left = ’0px’;
div.style.backgroundColor = ‘#353535′;
div.style.color = ‘#FFFFFF’;
div.style.fontSize = ’10px’;
div.style.whiteSpace = ‘nowrap’;
div.style.opacity = ’0.6′;
div.innerHTML = content;

tmp.appendChild(div);
tmp.style.display = ‘none’;
WindowVisible = tmp;
document.body.appendChild(tmp);
tmp.style.height = parseInt(this.mheight) + ‘px’;
tmp.style.width = parseInt(this.mwidth) + ‘px’;
tmp.style.display = ‘block’;
}
}
obj.onmouseout = function() {
if (WindowVisible != null) {
document.body.removeChild(WindowVisible);
WindowVisible = null;
WindowVisible.style.bottom = ’50px’;
}
}
obj.onmousemove = function(e) {
if (!e) e = window.event;
WindowVisible.style.bottom = ’35px’;
WindowVisible.style.left = parseInt(e.clientX – 10) + ‘px’;
}
}
}
[/cc]
HTML:
[cc lang="html"]

ian ta iblott tod com

[/cc]
[cc lang="js"]

[/cc]

I just noticed that i have a Gmail email address listed that is yet to get hit with a crawler’s hammer. Weird that. I should change it now that I’m aware of the issue.

I find myself in an interesting scenario, and now i get to sit here and do some solid coding to get this looking a little more “blog like” and a little less “Work in progress” like.

The first thing I noticed this morning after posting all the back dated post’s is that if a post is more than about 200 characters long, then the mouse over disappears above the screen. So I have to implement some character length restrictions.

It was pretty simple actually, but I think i will do some more work on it soon to include a “read more” style link to it.
[cc lang="php"]
// custom character limit – Edit this as you wish
$limit = 200;

// preset $post value Demo purposes only
$post = “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum”;

if (strlen($post) > $limit) {
$post = substr($post, 0, strrpos(substr($post, 0, $limit), ‘ ‘)) . ‘ Read More…‘;
}
[/cc]