[align=center][b]- Phatfusion Imagemenu -[/b]
is back~!

[sub]updated 18 May 2009[/sub]
[/align]
credit to
[img]http://i282.photobucket.com/albums/kk264/unmaskedluke/phat.png[/img]
[align=center]
How to turn :
[img]http://www.webappers.com/img/2007/09/image-menu.png[/img]
[img]http://4.bp.blogspot.com/_fufFXoAi6aE/SWTwfmlnKRI/AAAAAAAAACA/R2yEWOBGnqI/s200/GreenDownArrow.png[/img]
[img]http://i282.photobucket.com/albums/kk264/unmaskedluke/imageasf.png[/img]
Effect = reveals more of the image as you rollover it.
[url=http://profiles.friendster.com/nelnel90]Preview[/url]
Browser compatibility - Firefox only. *sad*

------------------------------------------------------------------------------------------------------------------
1st download this file
[url=http://www.mediafire.com/download.php?zyd33h1qmyn]imgmenu.js[/url]
upload it to your hosting site.
then paste this code at the very top of your js ext.
<">[/align]
2nd, edit this code
[quote]window.addEvent('domready', function() {
var imgmenu="<div id=\"example\">"+
"<div id=\"imageMenu\">"+
"<ul>"+
"<li class=\"1\"><a href=\"[b]url_link_to_your_friends_profile[/b]\">1</a></li>"+
"<li class=\"2\"><a href=\"[b]url_link_to_your_friends_profile[/b]\">2</a></li>"+
"<li class=\"3\"><a href=\"[b]url_link_to_your_friends_profile[/b]\">3</a></li>"+
"<li class=\"4\"><a href=\"[b]url_link_to_your_friends_profile[/b]\">4</a></li>"+
"</ul>"+
"</div>"+
"</div>";
document.getElementById('content_2').style.overflowY='hidden';
document.getElementById('content_2').innerHTML = "<table width='100%'><tr><td align='center'>"+imgmenu+"</td></tr></table>";
var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:230, border:2, onOpen:function(e,i){window.location=(e);}});
});[/quote]
paste to ur js ext.
3rd, edit this css
[quote]/**************************************************************
Image Menu
v 2.2
**************************************************************/
#example { width : 400px !important; }
#imageMenu {
position: relative;
width: 400px;
height: 175px;
overflow: hidden;
}
#imageMenu ul {
list-style: none;
margin: 0px;
display: block;
height: 175px;
width: 1000px;
}
#imageMenu ul li {
float: left;
}
#imageMenu ul li a {
text-indent: -1000px;
background:#FFFFFF none repeat scroll 0%;
border-right: 2px solid #fff;
cursor:pointer;
display:block;
overflow:hidden;
width:98px;
height: 175px;
}
#imageMenu ul li.1 a {
background: url(http://i282.photobucket.com/albums/kk264/unmaskedluke/joanne_phat.jpg) repeat scroll 0%;
}
#imageMenu ul li.2 a {
background: url(http://i282.photobucket.com/albums/kk264/unmaskedluke/kristy_phat.jpg) repeat scroll 0%;
}
#imageMenu ul li.3 a {
background: url(http://i282.photobucket.com/albums/kk264/unmaskedluke/shasha_phat.jpg) repeat scroll 0%;
}
#imageMenu ul li.4 a {
background: url(http://i282.photobucket.com/albums/kk264/unmaskedluke/ben_phat.jpg) repeat scroll 0%;
}
.clear {
clear: both;
}
/*************************************************************/[/quote]
change the image link to your own image link.
u can use the image as a guide in making ur own friends image
remember to put their names at the left side of the image.
then paste it in ur css ext.
end.
NOTES : u can put as many featured friends as you want. just adjust the width on the css.
Last edited by unmaskedluke (2009-05-18 12:05:42)