Footer Contacts – MouseOver Hovers
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:
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';
}
}
}
HTML:
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.
