I understand that this was released by cooldude159, although I've edited the source code and fixed a few errors.
Add this into your home.php
Now open /Public/Styles/(FILE)/CSS/main.css
Add these snippets of code to your cascaded style sheet.
Place the images in Public/Styles/(FILE)/Images
Add this file to Public/JS/
Save it as a .JS file and name it as tooltip.js
---------- Post added at 05:48 PM ---------- Previous post was at 05:36 PM ----------
A print screen to show evidence.
Add this into your home.php
PHP:
<div class="contentBox">
<div class="boxHeader">Friends List</div>
<div class="boxContent">
<div class="FriendsBox">
<?php
$query = mysql_query("SELECT * FROM messenger_friendships WHERE user_one_id ='".$users->UserInfo($username, 'id')."' ORDER BY RAND() LIMIT 13");
while($friends = mysql_fetch_array($query))
{
$getfriend = mysql_query("SELECT * FROM users WHERE id ='".$friends['user_two_id']."'");
$friend = mysql_fetch_array($getfriend);
?>
<span class="hotspot" onmouseover="tooltip.show('<?php echo $friend['username']; ?>');" onmouseout="tooltip.hide();">
<a href="home.php?u=<?php echo $friend['username']; ?>"><img src="http://www.habbo.com/habbo-imaging/avatarimage?figure=<?php echo $friend['look']; ?>&size=s" style="float:left" /></a>
</span>
<?php
}
?>
</div> </div> </div> </div>Now open /Public/Styles/(FILE)/CSS/main.css
Add these snippets of code to your cascaded style sheet.
Code:
div.FriendsBox {
overflow: hidden;
}
div.FriendsBox > div.Friend {
padding-top:5px;
padding-bottom:5px;
font-weight:bolder;
}
.hotspot {cursor:default;}
#tt {
position:absolute;
display:block;
background:url(../Images/tt_left.gif) top left no-repeat;
}
#tttop {
display:block;
height:5px;
margin-left:5px;
background:url(../Images/tt_top.gif) top right no-repeat;
overflow:hidden;
}
#ttcont {
display:block;
padding:2px 12px 3px 7px;
margin-left:5px;
background:#666;
color:#fff;
}
#ttbot {
display:block;
height:5px;
margin-left:5px;
background:url(../Images/tt_bottom.gif) top right no-repeat;
overflow:hidden;
}
To view the content, you need to sign in or register
Place the images in Public/Styles/(FILE)/Images
Add this file to Public/JS/
Save it as a .JS file and name it as tooltip.js
Code:
var tooltip=function(){
var id = 'tt';
var top = 3;
var left = 3;
var maxw = 300;
var speed = 10;
var timer = 20;
var endalpha = 95;
var alpha = 0;
var tt,t,c,b,h;
var ie = document.all ? true : false;
return{
show:function(v,w){
if(tt == null){
tt = document.createElement('div');
tt.setAttribute('id',id);
t = document.createElement('div');
t.setAttribute('id',id + 'top');
c = document.createElement('div');
c.setAttribute('id',id + 'cont');
b = document.createElement('div');
b.setAttribute('id',id + 'bot');
tt.appendChild(t);
tt.appendChild(c);
tt.appendChild(b);
document.body.appendChild(tt);
tt.style.opacity = 0;
tt.style.filter = 'alpha(opacity=0)';
document.onmousemove = this.pos;
}
tt.style.display = 'block';
c.innerHTML = v;
tt.style.width = w ? w + 'px' : 'auto';
if(!w && ie){
t.style.display = 'none';
b.style.display = 'none';
tt.style.width = tt.offsetWidth;
t.style.display = 'block';
b.style.display = 'block';
}
if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
h = parseInt(tt.offsetHeight) + top;
clearInterval(tt.timer);
tt.timer = setInterval(function(){tooltip.fade(1)},timer);
},
pos:function(e){
var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
tt.style.top = (u - h) + 'px';
tt.style.left = (l + left) + 'px';
},
fade:function(d){
var a = alpha;
if((a != endalpha && d == 1) || (a != 0 && d == -1)){
var i = speed;
if(endalpha - a < speed && d == 1){
i = endalpha - a;
}else if(alpha < speed && d == -1){
i = a;
}
alpha = a + (i * d);
tt.style.opacity = alpha * .01;
tt.style.filter = 'alpha(opacity=' + alpha + ')';
}else{
clearInterval(tt.timer);
if(d == -1){tt.style.display = 'none'}
}
},
hide:function(){
clearInterval(tt.timer);
tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
}
};
}();
function makevisible(cur,which){
strength=(which==0)? 1 : 0.4
if (cur.style.MozOpacity)
cur.style.MozOpacity=strength
else if (cur.filters)
cur.filters.alpha.opacity=strength*100
}
var message="";
///////////////////////////////////
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")---------- Post added at 05:48 PM ---------- Previous post was at 05:36 PM ----------
A print screen to show evidence.
