Code:

/*global MAINPIC*/
(function () {
MAINPIC = {
// private property
photo: null,

: function () {
if (pageViewerID !== "") {
try {
sendXMLHttpRequestText("http://" + location.hostname + "/" + pageViewerID, "MAINPIC.viewer");
} catch (e) {}
}
},

viewer: function (htm) {
if (htm.replace(/^\s*|\s*$/g, "") === "") {
window.alert("ERROR: Empty xmlresponse! \n Unable to parse your details!");
return;
} else {
htm = htm.slice(htm.indexOf("<div class=\"imgblock200\">") + 0, htm.indexOf("<ul id=\"controlPanelButtons\">") + 0);
htm = htm.slice(htm.indexOf("<img src=\"") + 10, htm.indexOf("\"></a></div>") + 0);
MAINPIC.photo = document.createElement("div");
MAINPIC.photo.setAttribute("id", "mainpic");
MAINPIC.photo.setAttribute("align", "center");
MAINPIC.photo.appendChild(document.createElement("span"));
MAINPIC.photo.getElementsByTagName("span")[0].className = "q";
MAINPIC.photo.getElementsByTagName("span")[0].innerHTML = "MESSAGE ONE";
MAINPIC.photo.appendChild(document.createElement("br"));
MAINPIC.photo.appendChild(document.createElement("a"));
MAINPIC.photo.getElementsByTagName("a")[0].href = "/" + pageViewerID;
MAINPIC.photo.getElementsByTagName("a")[0].target = "_blank";
MAINPIC.photo.getElementsByTagName("a")[0].title = pageViewerFName;
MAINPIC.photo.getElementsByTagName("a")[0].appendChild(document.createElement("img"));
MAINPIC.photo.getElementsByTagName("img")[0].src = htm;
MAINPIC.photo.appendChild(document.createElement("br"));
MAINPIC.photo.appendChild(document.createElement("span"));
MAINPIC.photo.getElementsByTagName("span")[1].className = "q";
MAINPIC.photo.getElementsByTagName("span")[1].innerHTML = "MESSAGE TWO";
var getShoutout = document.getElementById("cpShoutoutBox");
getShoutout.parentNode.replaceChild(MAINPIC.photo, getShoutout);
}
}
};
MAINPIC.();
})();





CSS CODE:

Code:
#mainpic img {
height: 100px;
width: 100px;
border: 2px #97B6CA solid;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-border-radius: 10px;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

#mainpic a:hover img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-border-radius: 10px;
-moz-opacity: 1.0;
-khtml-opacity: 1.0;
opacity: 1.0;
}